在我看来,iframe内容中的Content-Security-Policy元标记可防止在我的主页中加载动态图像。此问题仅限于Firefox(56版本)。这里是例子:firefox中的CSP头iframes在动态内容的整个页面上工作
的test.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没有任何反应,并出现一个控制台错误,说:
内容安全策略:该页面的设置阻止了负载 资源 https://www.google.ru/logos/doodles/2017/fridtjof-nansens-156th-birthday-5694774550986752-s.png (“img-src file:// data:”)。
这是一个错误吗?有什么解决方法吗?提前致谢。