内容安全政策：“ img-src'自身'数据：” [英] Content Security Policy: "img-src 'self' data:"

问题描述

我有一个应用程序，用户可以在其中复制图像URL，将其粘贴到输入中，然后将图像加载到盒子上。

I have an app, in which the user would be able to copy an image URL, paste it unto an input and the image will be loaded on a box.

但是我的应用程序，则不断触发此消息：

But my app, keeps triggering this message:

拒绝加载图像 LOREM_IPSUM_URL，因为它违反了以下内容安全策略指令： img-src'self'数据：。

Refused to load the image 'LOREM_IPSUM_URL' because it violates the following Content Security Policy directive: "img-src 'self' data:".

这是我的元标记：

<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' *">

我在应用程序内使用html2Canvas，当我删除以下内容时： img-src'self'数据： "

I'm using html2Canvas within the app, and when I remove this: "img-src 'self' data:"

它会引发此错误：

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.

还有很多其他错误。

推荐答案

img-src *'self'数据：https：; 并不是一个好的解决方案，因为它会使您的应用容易受到XSS攻击。最好的解决方案应该是： img-src‘self’data：image / svg + xml 。如果不起作用，请尝试： img-src'self'数据：如果您的指令仍为 img-src *'，请考虑更改它自我数据：https：;

img-src * 'self' data: https:; is not a good solution as it can make your app vulnerable against XSS attacks. The best solution here should be: img-src 'self' data:image/svg+xml. If it doesn't work try: img-src 'self' data:Consider changing it if you still have your directive as img-src * 'self' data: https:;

这篇关于内容安全政策：“ img-src'自身'数据：”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！