在 Shopify 结帐页面上加载 img 像素时的 CSP 问题答案

【问题标题】：CSP issue when loading img pixel on Shopify check out page在 Shopify 结帐页面上加载 img 像素时的 CSP 问题
【发布时间】：2015-12-14 21:55:01
【问题描述】：

我们正在创建一个公共 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（内容安全策略）问题？

【问题讨论】：

这不是我的专业领域，但我认为您可能需要在问题中提供更多详细信息才能获得准确的答案。
@WhiteVking 感谢您的友好回答。我会详细说明一下：我们正在尝试在 Shpofiy 结帐页面实现 img 像素以跟踪转换。看起来服务器端阻止从该页面打开脚本和图像。系统向我们显示的错误是：拒绝加载图像''，因为它违反了以下内容安全策略指令：“img-src 'self' https:blob:data:”。希望这些信息足以诊断问题。
您是否尝试从 SSL 调用此图像？
@alexandresaiz ，我并没有真正了解如何通过添加 HTML 代码（客户端）来负责 SSL（服务器端）的更改。
@EyalTorjman 请在感谢页面中发布您注入的代码，它会为您提供此错误。此外，出现错误的感谢页面呈现的 html 页面的源代码也会有所帮助。

标签： image e-commerce shopify checkout

【解决方案1】：

Content Security Policy 是一个 HTTP 响应标头，用于控制允许浏览器从何处加载某些类型的内容。 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: 源匹配。

【讨论】：