内容安全策略:“img-src 'self' 数据:" [英] 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' data:".

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' data:"

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' data: https:; 不是一个好的解决方案，因为它会使您的应用容易受到 XSS 攻击攻击.这里最好的解决方案应该是:img-src 'self' data:image/svg+xml.如果它不起作用，请尝试:img-src 'self' data:如果您的指令仍然是 img-src * 'self' data: 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 'self' 数据:"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！