如何在受CSP限制的Facebook站点开发者控制台使用jQuery？

问题背景 #

访问Facebook网站时，尝试在开发者控制台通过动态创建脚本标签加载jQuery，触发了Content Security Policy（CSP）限制，错误提示如下：

Refused to load the script 'https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js' because it violates the following Content Security Policy directive: "script-src blob: data: 'self' 'unsafe-inline' 'unsafe-eval' *.facebook.com *.fbcdn.net *.facebook.net *.google-analytics.com *.google.com *.fbsbx.com". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

使用的加载脚本：

var jq = document.createElement('script');
jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);
// ... give time for script to load, then type (or see below for non wait option)
jQuery.noConflict();

该脚本在其他站点可正常运行，但在Facebook域名下无法生效。

解决方法 #

Facebook的CSP规则明确禁止从ajax.googleapis.com加载脚本，因此需要调整注入方式：

方法1：直接注入jQuery源码 #

这是最可靠的方案，完全绕开外部域名的CSP限制：

1. 打开对应版本jQuery的CDN页面（如3.5.1压缩版），复制全部源码内容。
2. 在Facebook的开发者控制台中粘贴源码并执行。
3. 执行完成后，全局对象中会直接挂载jQuery和$，可直接调用，若担心命名冲突可执行jQuery.noConflict()。

方法2：使用CSP允许的域名加载 #

查看Facebook的CSP允许列表，*.google.com在许可范围内，可改用该域名下的jQuery资源：

var jq = document.createElement('script');
// 使用符合CSP规则的谷歌域名资源
jq.src = "https://ajax.libraries.google.com/ajax/libs/jquery/3.5.1/jquery.min.js";
document.head.appendChild(jq);
// 监听加载完成事件，确保后续代码正常执行
jq.onload = function() {
  jQuery.noConflict();
  // 此处编写你的jQuery逻辑
};

注意：方法2依赖外部域名的许可状态，若Facebook后续调整CSP规则可能失效，方法1的稳定性更高。

内容的提问来源于stack exchange，提问作者Stackcans