我们正在创建一个公共(public) Shopify应用程序要求用户将跟踪代码嵌入到他们的感谢页面中。加载感谢页面时，我们在 Chrome 中收到以下错误。
Refused to load the image, the message is a as follows because it violates the following Content Security Policy directive: "img-src 'self' https: blob: data:".
我们如何解决此 CSP(内容安全策略)问题？
最佳答案
Content Security Policy是一个 HTTP 响应 header ，用于控制允许浏览器从何处加载某些类型的内容。来自 Chrome 的错误消息提供了策略指令:
img-src 'self' https: blob: data:
img-src指令告诉浏览器允许从哪里加载图像资源( <img> )。根据此策略，允许的图像来源为 'self' ，这是您自己的域名，https:它允许任何主机使用 https 然后 'blob'和'data'允许使用其中任何一个 URI。
目前您正在尝试从 http://rdr.merchico.com 加载图像，如您上面的评论所示。这与您的 CSP 中允许的任何源都不匹配。该域似乎是通过 https 提供服务的，因此如果您更改 src图像属性为 https://rdr.merchino.com那么它将被 CSP 允许，因为它与 https: 匹配来源。
关于image - 在 Shopify 结帐页面上加载图像像素时出现 CSP 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32640332/