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

How to override content security policy while including script in browser JS console?

本文关键字：脚本 覆盖 安全策略 包含 浏览器 JS 控制台      更新时间：2023-09-26

我试图以这种方式使用控制台将 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 代码，因为它看起来不整洁。如何覆盖内容安全策略以进行开发？

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

注意(更新(：我正在通过现有网站编写脚本，无法控制设置内容安全策略标头。

您可以通过在about:config菜单中禁用security.csp.enable来关闭 Firefox 中整个浏览器的 CSP。如果这样做，则应使用完全独立的浏览器进行测试。例如，将 Firefox Developer Edition 与普通浏览器一起安装，并将其用于测试(而不是正常的 Web 使用(。

作为替代方案，应该可以在Content-Security-Policy响应标头到达浏览器之前对其进行更改(通过 HTTP 代理(。也可以使用扩展来执行此操作。

Chrome 扩展程序可以为自己的 chrome-extension://... 页面设置自己的 CSP，但无法更改普通网页的 CSP。

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

禁用内容安全策略扩展：

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

有一个分支默认禁用 CSP。

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

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

我找到了一种方法来做到这一点，而不会打开安全漏洞。这有点复杂，但覆盖安全规则应该是。你需要：

  • 一个浏览器插件，可以向 http 响应添加标头。我用simple-modify-headers来做Mozilla。
  • 可在其中托管脚本的 Web 服务器。我在本地机器上使用Rebex Tiny Web Server for Windows。

在 Web 服务器上承载.js文件。

配置插件以将标头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"时才有效。(在"参数"下(

相关文章：