在我看来，iframe 内容中的 Content-Security-Policy 元标记会阻止在我的主页中加载动态图像。此问题仅适用于 Firefox(56 版本)。这是示例:
测试.html
</html>
<head></head>
<body>
<form>
<input type="button" id="btn" value="GO" />
</form>
<script type="text/javascript">
document.getElementById('btn').onclick = function() {
src = 'https://www.google.ru/logos/doodles/2017/fridtjof-nansens-156th-birthday-5694774550986752-s.png',
img = document.createElement('img');
img.src = src;
document.body.appendChild(img);
}
</script>
<img src="https://www.google.ru/logos/doodles/2017/fridtjof-nansens-156th-birthday-5694774550986752-s.png"/>
<iframe src="iframe.html"></iframe>
</body>
</html>
iframe.html
<html>
<head>
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self' data:; script-src 'self' *.jquery.com 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; font-src 'self' data:;"></meta>
</head>
<body style="font-family: Arial; font-size: 13px;">
<br>
</body>
</html>
在任何其他浏览器中单击“GO”按钮后，您可以看到图像被添加到页面中，但在 Firefox 中没有任何反应，并且显示控制台错误，显示
Content Security Policy: The page’s settings blocked the loading of a resource at https://www.google.ru/logos/doodles/2017/fridtjof-nansens-156th-birthday-5694774550986752-s.png (“img-src file:// data:”).
这是一个错误吗？有什么解决方法吗？提前致谢。
最佳答案
通过点击网址“about:config”进入 Firefox 配置并搜索 security.csp 并将值设置为“false”，即禁用标志。
这是屏幕截图:
注意 - 这只是一种解决方法，因为它会降低您的系统的安全性。
更好的解决方案是检查
您的 csp header 是什么并将 header 更改为适当的策略。
以下是了解严格的 csp 和策略的链接:
关于html - Firefox iframe 中的 CSP header 在具有动态内容的整个页面上工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46664897/