关于javascript：如何在开发者控制台中注入带有chrome的jquery？

How to Inject jQuery with Chrome in Developer Console?

问题

我曾经能够(在本地)使用以下两个chrome扩展中的任何一个来轻松地将jquery注入到没有jquery的页面中，并且我不拥有(客户端)来尝试设计更改、开发修改和实时故障排除：

jquery注入器-Chrome Web Store
jquery Everywhere-Chrome Web商店

不幸的是，由于最近出现了防止"跨站脚本"的热潮，这些插件不再工作。这些变化背后可能有一个崇高的目标，我只是想了解变化的内容。我认为这与"内容安全策略"有关，我最近才听说过这一点，而且对它知之甚少。

2011年，我第一次了解到XSS是一个浏览器问题，但是，XSS预防措施从未阻止过我进行本地开发。我一直在寻找一个现代(2017年底)的解决方案，但无济于事。

我不知道从这里到哪里去。

我试过的没用

以下是我尝试过的插件(在6个月前还可以使用)，但现在不再适用于我：

控制台中的jquery(插件)

jquery注入(插件)

jquery注入器(插件)

github-蓝兔/jquery注入：jquery注入(chrome扩展)

以下是我遇到的许多链接中的一些，它们提供了不再有效的解决方案：

如果服务器上启用了内容安全策略，如何使用bookmarklet将脚本注入页面？
在javascript控制台中包含jquery
如何将jquery注入任何网页
如何在另一个javascript文件中包含一个javascript文件？
Google Chrome扩展：如何在编程注入的内容脚本中包含jquery？
将jquery注入任何站点brandon martinez
内容脚本-Google Chrome

最后一个看起来也很有希望，但我还没有尝试过：

如何通过chrome开发者工具将jquery注入任何网站

我的问题

如何将jquery(使用chrome开发人员控制台)注入到不使用jquery的网页中？

2017年，浏览器/javascript/编程世界是否发生了重大变化，以至于如果有人知道这种变化或现象，那么就很容易解释为什么上述插件不再工作了？

为什么上面的插件不能工作？今年所有的浏览器公司都普遍推出了一些重大变革吗？

相关讨论

Unfortunately, now because of what appears to be the newest craze in preventing"XSS" (cross-site scripting), those plugins no longer work. There may be a noble purpose behind these changes, and I'm just trying to understand WHAT changed. I think it has something to do with"content security policy", which I've only recently heard of and have very little knowledge of.

对。这些插件不起作用的原因是因为它们与MITM(中间人)攻击不可区分，恶意攻击者可以在其中注入任意的javascript。CSP(内容安全策略)旨在通过仅从源的白名单中运行受信任的javascript来防止这种情况发生。不幸的是，在开发者白名单从插件作者那里注入了javascript/css之前，目前在Chrome或Firefox中都没有简单的方法来处理这个问题。这不太可能发生，因为Chrome为应用程序开发人员提供了如何遵守CSP策略的指南。

同时，我建议您了解有关XSS的OWASP文章，这样您就可以了解为什么它如此重要。

不推荐的方法

您可以从chrome商店下载"禁用内容安全策略"加载项。仅用于本地开发。请记住，如果您这样做，恶意ISP或专用攻击者仍然可以在MITM攻击中注入脚本(例如，如果他们控制您的路由器)。

推荐方法

不要插入jquery，而是将其放到页面中。添加CSP标签：

1	<meta http-equiv="Content-Security-Policy" content="...">

这里您将放置类似于default-src 'self'; script-src https://cdn.com/jquery的东西，其中cdn.com是从中下载jquery的地方。更进一步，添加子资源完整性哈希。如果cdn曾经受到攻击，变得恶意，或者你变成了mitm'd，散列将不匹配，恶意脚本将不会被加载。此外，你也不能因为同样的原因而真正信任插件。

如果您决定不使用cdn，您可以使用包管理器(如node或bower)，它将为您下载jquery的特定版本。然后在本地加载。当然，对于生产，您通常希望使用cdn，以便访问者可以从更近的数据中心下载。另外，如果您使用的是CloudFlare，很可能他们已经缓存了jQuery的特定版本，因此他们不必一直下载它。

原型法

如果您的动机是原型设计，那么有一些解决方法：

不推荐：你可以刮网站，做你的修改，然后呈现给客户。

建议：不要在实时网站上进行修改，而应该进行快速原型设计。其优点是：

如果你和客户坐在一起，客户可以准确地看到你在做什么。
你处理的是抽象的原型，而不是具体的细节，这些应该在合同中规定。有关框架屏幕上的问题，请参阅ux.stackexchange.com。
你可以向客户解释为什么你不能在你应该做y的时候做x(将jquery注入到活动站点中)，这将有希望说服他们采用更好的安全实践。
原型可以被站起来并迅速扔掉，您甚至可以为了比较的目的保留修改。对活动网站的更改并不容易