我有一个应用程序,其中用户将能够复制一个图像的网址,粘贴到一个输入和图像将被加载到一个框。
但我的应用程序一直在触发这个消息:
拒绝加载映像“LOREM_IPSUM_URL”,因为它违反了以下内容安全策略指令:“img-src”自身“数据:“。
这是我的 meta标签:
<meta http-equiv="Content-Security-Policy" content="default-src *;
img-src 'self' data:; script-src 'self' 'unsafe-inline' 'unsafe-eval' *;
style-src 'self' 'unsafe-inline' *">
我在应用程序中使用html 2Canvas,当我删除此:“img-src”自身“数据:“
它将引发以下错误:
html2canvas.js:3025 Refused to load the image 'data:image/svg+xml,
<svg xmlns='http://www.w3.org/2000/svg'></svg>' because it violates
the following Content Security Policy directive: "default-src *".
Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.
沿着一堆其他的错误。
6条答案
按热度按时间swvgeqrz1#
尝试更换此部件:
所以完整的标签:
Content Security Policy Reference
nzkunb0c2#
img-src * 'self' data: https:;
不是一个好的解决方案,因为它会使您的应用容易受到XSS攻击。这里最好的解决方案应该是:img-src 'self' data:image/svg+xml
。如果不起作用,请尝试:img-src 'self' data:
如果指令仍为img-src * 'self' data: https:;
,请考虑更改它b1zrtrql3#
对于 Helm 用户。更好的做法,而不是设置contentSecurityPolicy为false,这应该是最后的选项。我在my app中使用了这个,它很好地解决了这个问题。我的应用程序托管在here中。检查我的源代码here。
eimct9ow4#
除了@manzapanza在上面所做的贡献外,您还需要确保CSP是否尚未在应用的Web配置文件中配置,因为如果该设置存在,它将覆盖索引文件中的 meta标记设置,如下图所示:
索引 meta标记:
正在被Web配置文件中的CSP设置覆盖。
Web配置设置:
在这种情况下,可以考虑在系统的web配置文件中设置一个。
6uxekuva5#
我的jspdf和html 2canvas也遇到了同样的问题。我也使用了nginx,并且在我的“conf/nginx-template.conf”文件中配置了“内容安全策略”。下面的修改为我解决了这个问题:
o75abkj46#
这简单地解决了问题:
但要确保多个指令使用分号(;)