无法在 iOS 中加载 iframe
iframe can not be loaded in iOS
我的网络应用有一个 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(Chrome 在 MacOS 上)。
在 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">
None 其中有效。你能帮我让它工作吗?
更新:
这是我在 ipad Safari(iOS 10.2.1)和 MacOS -Safari(最新版本)中看到的响应 header。他们都不允许加载 iframe URL
X-Frame-Options sameorigin
X-XSS-Protection 1;mode=block
X-Content-Type-Options nosniff
X-Webkit-CSP default-src 'self'
但我在 MacOS 上也看到相同的 header 和 Chrome(macbook pro 最新版本)和 Chrome 允许在 MacOS 上毫无问题地加载 iframe。
基于调查响应的想法,我对我的问题有了答案 header。感谢sideshowbaker的回复
首先,我尝试在 jsp 文件的 header 元标记中设置 "Content-Security-Policy"。但是那个不起作用。
所以我尝试在控制器中从服务器端(spring MVC)设置 header 值。它工作正常。
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,我可以看到 header 值。
我的网络应用有一个 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(Chrome 在 MacOS 上)。
在 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">
None 其中有效。你能帮我让它工作吗?
更新: 这是我在 ipad Safari(iOS 10.2.1)和 MacOS -Safari(最新版本)中看到的响应 header。他们都不允许加载 iframe URL
X-Frame-Options sameorigin
X-XSS-Protection 1;mode=block
X-Content-Type-Options nosniff
X-Webkit-CSP default-src 'self'
但我在 MacOS 上也看到相同的 header 和 Chrome(macbook pro 最新版本)和 Chrome 允许在 MacOS 上毫无问题地加载 iframe。
基于调查响应的想法,我对我的问题有了答案 header。感谢sideshowbaker的回复
首先,我尝试在 jsp 文件的 header 元标记中设置 "Content-Security-Policy"。但是那个不起作用。 所以我尝试在控制器中从服务器端(spring MVC)设置 header 值。它工作正常。
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,我可以看到 header 值。