【问题标题】：Content Security Policy: "img-src 'self' data:"内容安全策略：“img-src 'self' data:”
【发布时间】：2017-03-14 14:16:04
【问题描述】：

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

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

拒绝加载图像“LOREM_IPSUM_URL”，因为它违反了以下内容安全策略指令：“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:”

它会触发此错误：

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.

还有一堆其他错误。

【问题讨论】：

default-src 上的 * 是否可以正常工作？
@DakshMehta 它没有......我认为这是因为 html2canvas。但 manzapanza 的回答解决了问题！
很高兴，它成功了。但是当您使用画布时，我不知道它如何与 https 一起工作，数据应该可以工作。

标签： html canvas ionic-framework content-security-policy

【解决方案1】：

尝试更换这部分：

img-src * 'self' data: https:;

所以完整的标签：

<meta http-equiv="Content-Security-Policy" content="default-src *;
   img-src * 'self' data: https:; script-src 'self' 'unsafe-inline' 'unsafe-eval' *;
   style-src  'self' 'unsafe-inline' *">

Content Security Policy Reference

【讨论】：

但这不是违背了它的目的 img-src * 'self' data: https: that is security？
您正在使安全性无效，使用 *
“我上班的时候有客人过来，我想让他们进我家，我该怎么做？”这个答案相当于“把门从铰链上撕下来，让任何人进来”。 不要这样做。这些键被称为unsafe-是有原因的。

【解决方案2】：

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

【讨论】：

我想对任何阅读本文的人补充一点，在data: 的端口之后添加任何内容都行不通。 IE。你不能设置data:image/svg+xml。它只允许设置data:。
我正在使用helmet。禁用contentSecurityPolicy 为我解决了这个问题。

【解决方案3】：

除了上面@manzapanza 贡献的内容之外，您还需要确保 CSP 是否尚未在您的应用程序的 Web 配置文件中配置，因为如果该设置存在，它将覆盖您在索引文件中的元标记设置如下例所示：

索引元标记：

<meta http-equiv="Content-Security-Policy" content="default-src *;img-src * 'self' data: https:; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src  'self' 'unsafe-inline' *">

被您的网络配置文件中的 CSP 设置覆盖。

网页配置设置：

<add name="Content-Security-Policy" value="default-src https: http: 'unsafe-inline'; img-src * 'self' data: https:;" />

在这种情况下，请考虑在系统的 Web 配置文件中主要设置一组。

【讨论】：

【解决方案4】：

这样就解决了问题：

img-src 'self' data:

但请确保使用分号 (;) 分隔多个指令

【讨论】：

这个问题的答案相当不完整。

【解决方案5】：

对于头盔用户。更好的做法，而不是将 contentSecurityPolicy 设置为 false，这应该是最后一个选项。我在my app 中使用了它，它很好地解决了这个问题。我的应用托管在here。查看我的源代码here。

app.use(
  helmet.contentSecurityPolicy({
    useDefaults: true,
    directives: {
      "img-src": ["'self'", "https: data:"]
    }
  })
)

【讨论】：