iframe 无法在 iOS 中加载答案

【问题标题】：iframe can not be loaded in iOSiframe 无法在 iOS 中加载
【发布时间】：2017-11-01 22:32:14
【问题描述】：

我的网络应用有一个 iframe：

<div id="iframe-wrapper" class="iframe-wrapper">
  <iframe src="https://xxx.company.com/aaa/bbbb/cccc" style="border:none; height: 100%; width : 100%; scrolling: no;">
    <p>Your browser does not support iframes.</p>
 </iframe>
</div>

它在 windows 桌面和 android 设备（url 已加载到）中的任何浏览器中都可以正常工作，但在 iOS 和 MacOS（MacOS 上的 Chrome 除外）中不能正常工作。

在 iOS - iPad/iPhone - Safari 中，我在控制台中看到此错误

refuse to load https://xxx.company.com/aaa/bbbb/cccc because it appears in neither the child-src directive nor the default-source directive of the content security policy

我做了研究，发现这与 Content-security-Policy 相关，所以我使用这个

<meta http-equiv="Content-Security-Policy" content="
  default-src https://*.company.com;
  child-src     https://*.company.com;
  frame-src     https://*.company.com;">

或

<meta http-equiv="Content-Security-Policy" content="
   default-src * data: blob: ws: wss: gap://ready ;
   style-src * 'unsafe-inline'; 
   script-src * 'unsafe-inline' 'unsafe-eval';
   connect-src * ws: wss:;
   child-src * https://*.company.com gap://ready;
   frame-src * https://*.company.com gap://ready">

它们都不起作用。你能帮我让它工作吗？

更新：这是我在 ipad safari（iOS 10.2.1）和 MacOS -Safari（最新版本）的响应头中看到的内容。他们都不允许加载 iframe URL

X-Frame-Options  sameorigin
X-XSS-Protection 1;mode=block
X-Content-Type-Options   nosniff
X-Webkit-CSP  default-src 'self'

但我在 MacOS 和 Chrome（macbook pro 最新版本）上也看到相同的标题，并且 Chrome 允许在 MacOS 上加载 iframe 而不会出现问题。

【问题讨论】：

查看文档的响应标头，看看它是否使用 Content-Security-Policy HTTP 标头提供服务。要查看这些标头，请在浏览器 devtools 中打开“网络”窗格并重新加载文档并检查那里的响应——或者使用 Postman 或 curl 或其他一些命令行工具来检查文档的 HTTP 标头。当您指定多个策略时，CSP 的工作方式是，最严格的策略总是获胜。因此，您的浏览器实际上只是忽略了元元素中的策略，而是仅使用 HTTP 标头中指定的策略。
谢谢，旁观者。我已将我的 ipad 连接到 macos 并启用“web Inpector”，以便在 macbook 中查看 req/resp 的详细信息。这是我在响应头中看到的：X-Frame-Options sameorigin; X-XSS-保护 1;mode=block ; X-Content-Type-Options nosniff； X-Webkit-CSP default-src 'self'

标签： ios iphone iframe content-security-policy

【解决方案1】：

根据调查响应标头的想法，我有一个问题的答案。感谢 sideshowbaker 的回复。

首先，我尝试在 jsp 文件的标头元标记中设置“Content-Security-Policy”。但是那个不起作用。所以我尝试从控制器中的服务器端（spring MVC）设置标头值。它工作正常。

public ModelAndView confirmNumber(....,HttpServletResponse response) {  
.....
response.setHeader("Content-Security-Policy","style-src * 'unsafe-inline';  script-src * 'unsafe-inline' 'unsafe-eval'; connect-src *; default-src *; child-src * https://*.company.com; frame-src  * https://*.company.com;");

return modelView;
}

现在从 safari 的 Web Inspector 中，我可以看到标头值。

【讨论】：