新搭建的 Magento 2.4 开源版本的商城系统，网站首页会报 js 错误，在浏览器的开发者工具中可以看到：
refused to load script https://static.cloudflareinsights.com/beacon.min.js，because it violates the following Content Security Policy directive
虽然不影响功能，但是看起来比较让人担心。
static.cloudflareinsights.com/beacon.min.js 做啥的
Cloudflare occasionally updates the beacon.min.js file to improve Web Analytics functionality.
看起来是，Cloudflare 的网页统计工具脚本。
正常 JS 链接的格式
正常可以加载的 JS 链接的域名是自己的域名，而非 cloudflare 的域名。 例如：
https://www.sunzhongwei.com/static/version1719047205/frontend/Magento/luma/en_US/jquery/ui-modules/vendor/jquery-color/jquery.color.js
Content Security Policy (CSP) 是什么
Content Security Policy 是一种安全机制，旨在减少跨站脚本攻击 (XSS) 的风险。CSP 通过指定哪些内容来源是受信任的，来限制网页中内容的加载。 简单来说，就是一套白名单机制，防止网页被恶意注入不明来源的脚本。有两种声明方式：
- HTTP header: Magento 就是在 http header 中声明的 CSP 白名单
- HTML meta 标签
例如，在我从浏览器看到的错误消息中，CSP 指令限制了 Magento 网站只能从下面的域名列表中加载 JS:
- assets.adobedtm.com
- adobe.com
- www.googleadservices.com
- www.google-analytics.com
- googleads.g.doubleclick.net
- analytics.google.com
- www.googletagmanager.com
- newrelic.com
- ...
那就很好理解了，应该是可以从 Magento 后台的某处进行配置。实际上不行。。。只能在服务器上修改代码配置。
In Adobe Commerce and Magento Open Source version 2.4.7 and later, CSP is configured in restrict-mode by default for payment pages in the storefront and admin areas, and in report-only mode for all other pages. Prior to version 2.4.7, CSP was configured in report-only mode for all pages.
Magento 的 CSP 在哪里设置
Magento Admin 管理后台虽然也有一个 CSP 的配置的地方，但是那个地方的配置跟 CSP 白名单没有关系。
只能通过修改 Magento 代码的方式来解决。概括来说，就是新建一个 module，里面包含一个 csp 白名单配置文件。
You have to create a new module which contains a csp-whitelist file. There is no way around. It's actually pretty easy but requires a deploy on changes / updates.
但是由于我还没有 magento 的开发经验，所以我选择在现有模块中修改即有白名单的做法：
在 magento 项目目录的 vendor/magento 下，搜索：
~/magento_project/vendor/magento# grep "googleads.g.doubleclick.net" -r ./
./module-google-gtag/etc/csp_whitelist.xml: <value id="google_ad_services_conversion" type="host">googleads.g.doubleclick.net</value>
./module-google-gtag/etc/csp_whitelist.xml: <value id="google_ad_services_pixel" type="host">googleads.g.doubleclick.net</value>
这样就找到了 google ads 相关的模块。
然后修改 module-google-gtag/etc/csp_whitelist.xml
<policy id="script-src">
<values>
<value id="google_ad_services_conversion" type="host">googleads.g.doubleclick.net</value>
<value id="google_ad_services" type="host">www.googleadservices.com</value>
<value id="google_analytics" type="host">www.google-analytics.com</value>
<value id="google_analytics_4" type="host">analytics.google.com</value>
<value id="google_tag_manager" type="host">www.googletagmanager.com</value>
<!-- 以下一行为新增 -->
<value id="cloudflareinsights_analytics" type="host">static.cloudflareinsights.com</value>
</values>
</policy>
<policy id="connect-src">
<values>
<value id="google_ad_services" type="host">www.googleadservices.com</value>
<value id="google_analytics" type="host">www.google-analytics.com</value>
<value id="google_analytics_4" type="host">analytics.google.com</value>
<value id="google_tag_manager" type="host">www.googletagmanager.com</value>
<!-- 以下三行为新增 -->
<value id="cloudflareinsights_analytics" type="host">static.cloudflareinsights.com</value>
<value id="google_ad_services_pixel" type="host">googleads.g.doubleclick.net</value>
<value id="bing_analytics" type="host">bat.bing.com</value>
</values>
</policy>
顺便解决了其他几个 CSP 的报错信息。
清除缓存：
System - Cache Management - Flush Magento Cache
再次刷新网页，浏览器中的 JS 报错就消失了。
参考
- https://developer.adobe.com/commerce/php/development/security/content-security-policies/
- https://www.reddit.com/r/magento2/comments/vudmfc/magento_csp_headers_how_to_add/
微信关注我哦 👍
我是来自山东烟台的一名开发者，有敢兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊， 查看更多联系方式