如何在浏览器 JS 控制台中包含脚本时覆盖内容安全策略？

Question

我试图通过这种方式使用控制台将 JQuery 包含在现有网站上：

var script = document.createElement('script');
script.src = 'http://code.jquery.com/jquery-1.11.1.min.js';
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);

然后我得到了这个错误：

Content Security Policy: The page's settings blocked the loading of a resource at http://code.jquery.com/jquery-1.11.1.min.js ..

在开发过程中，我可能想包含外部 Javascript。我可能不想复制粘贴整个 JQuery 代码，因为它看起来不整洁。如何为了开发目的而覆盖内容安全策略？

这对于快速测试非常有用。我可能想稍后将我正在编写的脚本转换为浏览器扩展。

注意（更新）：我正在现有网站上编写脚本，并且无法控制设置 Content-Security-Policy 标头。

Answer 1

您可以通过禁用

security.csp.enable

菜单中的

about:config

来关闭 Firefox 中整个浏览器的 CSP。如果您这样做，您应该使用完全独立的浏览器进行测试。例如，在普通浏览器旁边安装 Firefox Developer Edition 并使用它进行测试（而不是正常 Web 使用）。

作为替代方案，应该可以在

Content-Security-Policy

 响应标头到达您的浏览器之前对其进行更改（通过 HTTP 代理）。也可以通过扩展来做到这一点。

Chrome 扩展程序可以为其自己的 chrome-extension://... 页面设置自己的 CSP

，但它无法更改普通网页的活动、有效 CSP（但可以在接收之前编辑 CSP 标头，如上所述）。 

Answer 2

我正在使用此 Chrome 扩展程序在每个选项卡的基础上禁用 CSP。

禁用内容安全策略扩展：

• https://chrome.google.com/webstore/detail/disable-content-security/ieelmcmcagommmplceebfedjlakkhpden

有一个分叉默认禁用 CSP。

始终禁用内容安全策略扩展：

• https://chrome.google.com/webstore/detail/always-disable-content-se/ffelghdomoehpceihalcnbmnodohkibj

Answer 3

我找到了一种无需打开安全漏洞即可做到这一点的方法。这有点复杂，但首要的安全规则应该是这样。你需要：

一个可以向http响应添加标头的浏览器插件。我在 Mozilla 中使用了
• simple-modify-headers

  。

您可以在其中托管脚本的网络服务器。我在本地计算机上使用了适用于 Windows 的 Rebex Tiny Web Server。

将

.js

 文件托管在 Web 服务器上。

配置插件将标头

Content-Security-Policy: script-src <url>;

 添加到您可能想要加载的任何站点，其中 

<url>

 是脚本的 url 或其所在目录。例如，

http://localhost/Programming/

。确保您的插件修改任何现有标头而不是覆盖，否则网站可能会崩溃。

*

您现在可以从控制台或书签加载脚本：

javascript:(function() {const script = document.createElement('script'); script.src = 'http://localhost/???.js'; document.head.append(script);})(); 我尝试将

file://

 uri 列入白名单，这将消除对 Web 服务器的需求，但这不起作用。有道理，因为这将允许网页访问您的驱动器。

*：奇怪的是，对于简单修改标头，它似乎只有在我运行“按规则过滤 URL”时才有效。 （在“参数”下）