来自外部 url 的 svg 图像未加载，因为它违反了以下内容安全策略指令："default-src 'none'"

Question

所以我正在尝试创建一个包含来自外部图像的 svg url https://i.stack.imgur.com/4iGwt.jpg:

<svg version="1.1" baseProfile="full" width="300" height="86" viewBox="0 0 300 86" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
  <rect 
    x="0"
    y="0"
    rx="5"
    ry="5"
    width="300"
    height="86"
    fill="red"
  ></rect>
  <svg x="11" y="11" width="auto">
    <image transform="translate(0,0)" width="64" height="64" ry="30" href="https://i.stack.imgur.com/4iGwt.jpg" />
  </svg>
</svg>

问题是，如果我在 GitHub 上托管此 svg，例如图像未加载，我收到此错误消息：

Refused to load the image 'https://i.stack.imgur.com/4iGwt.jpg' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.

您可以在 https://github.com/johannchopin/poc-svg/blob/main/svg.svg.

上看到直播

我在上看到我必须添加一些元标记，例如：

<meta http-equiv="Content-Security-Policy" content="img-src 'self' data:; default-src 'self' http://XX.XX.XX.XX:8084/mypp/">

然而，当我将它添加到我的 svg 顶部时，没有任何变化。有谁知道我如何在 GitHub 上的 svg 中看到我的头像？

Answer 1

<meta http-equiv="Content-Security-Policy" ...> 只有放在 <head> 部分才有效。

不幸的是 Github 通过 HTTP header 发布了自己的 CSP：

此 header 不允许图像，因此会阻止 SVG。当然，如果您不是 Github 管理员，则无法放松此 CSP。

来自外部 url 的 svg 图像未加载，因为它违反了以下内容安全策略指令："default-src 'none'"

Image in svg from external url not loaded because it violates the following Content Security Policy directive: "default-src 'none'"

html

svg

image

content-security-policy