Question

问题

我以前能够（本地）使用以下两个Chrome扩展中的任何一个来轻松地将jQuery注入到还没有jQuery的页面中，并且我没有（客户端）来试验设计变更，开发修改和实时故障排除：

不幸的是，现在由于似乎是防止“XSS”（跨站点脚本）的最新热潮，这些插件不再有效。这些变化背后可能有一个崇高的目的，我只是想了解改变了什么。我认为这与“内容安全政策”有关，我最近才听说过，并且对此知之甚少。

我在2011年首次了解到XSS作为一个浏览器问题，然而，XSS预防措施从未阻止我以前进行本地开发。我一直在寻找现代（2017年末）的解决方案，但无济于事。

我不确定从哪里开始。

我曾尝试过什么都没有工作

以下是我尝试的插件（过去大约6个月前一直工作）不再适用于我：

jQuery in Console (Plugin)
jQuery Inject (Plugin)
jQuery Injector (Plugin)
GitHub - bluerabbit/jquery-inject: jQuery-inject(Chrome extension)

以下是我遇到的一些提供解决方案的链接，这些链接不再有效：

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

How to Inject jQuery Into Any Website via Chrome Developer Tools | DSASMBLR

我的问题

如何将jQuery（使用Chrome Developer Console）注入不使用jQuery的网页？
2017年浏览器/ JavaScript /编程世界发生了一些变化，如果一个人知道这个特定的变化或现象，那么很容易解释为什么上面的插件不再有效？
为什么上面的插件不起作用？今年所有浏览器公司是否普遍推出了一些重大变化？

Answer 1

使用Snippets。

复制jQuery代码，并将其粘贴到代码段中。
运行代码段。

Answer 2

不幸的是，现在因为看起来是最新的预防＆＃34; XSS＆＃34; （跨站点脚本），那些插件不再有效。这些变化背后可能有一个崇高的目的，我只是想了解改变了什么。我认为它与内容安全政策＆＃34;有关，这是我最近才听说过的，并且知之甚少。

是。这些插件之所以不起作用，是因为它们与恶意攻击者可以注入任意JavaScript的MITM（中间人）攻击无法区分。 CSP（内容安全策略）旨在通过仅从源白名单运行受信任的JavaScript来防止这种情况发生。不幸的是，在开发人员白名单从插件作者注入JavaScript / CSS之前，目前还没有简单的方法可以在Chrome或Firefox中处理这个问题。由于Chrome有guide for app developers如何遵守CSP政策，因此不太可能发生这种情况。

与此同时，我建议您了解XSS上的OWASP文章，以便了解它为何如此重要。

不推荐的方法

您可以下载＆＃34;禁用内容安全政策＆＃34;来自Chrome商店的插件。仅用于本地开发。请记住，如果您这样做，恶意ISP或专门的攻击者仍然可以在MITM攻击中注入脚本（例如，如果他们控制了您的路由器）。

推荐方法

不要注入jQuery，但要把它放在你的页面中。添加CSP代码：

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

在这里，您可以使用default-src 'self'; script-src https://cdn.com/jquery之类的内容，其中cdn.com是您从中下载jQuery的地方。更进一步，添加subresource integrity hash。如果CDN遭到入侵，变得恶意，或者您成为MITM，则哈希将不匹配，恶意脚本将无法加载。此外，出于同样的原因，你永远不会真正信任插件。

如果您决定不使用CDN，您可以使用将为您下载特定版本的jQuery的包管理器（如node或Bower）。然后只需在本地加载它。当然，对于制作而言，您通常希望使用CDN，以便访问者可以从更近的数据中心下载。此外，如果您使用Cloudflare，他们可能已经缓存了特定版本的jQuery，因此他们不必继续下载它。

<强>原型

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

不推荐：您可以抓取网站，进行修改，然后呈现给客户。

推荐：您应该进行快速原型设计，而不是在网站上进行修改。这样做的好处是：

如果您正在与客户进行坐下，客户可以准确了解您正在做什么
您正在处理抽象原型而不是具体细节，这些细节应该在合同中规定。有关骨架屏幕的问题，请参阅ux.stackexchange.com。
你可以向客户解释为什么你不能做X（将jQuery注入现场网站）当你应该做Y（见其余的回答），这有望说服他们采用更好的安全措施
原型可以站起来并迅速丢弃，您甚至可以保留修改以进行比较。对现场网站的更改不会轻松实现

Answer 3

你可以制作一个非常基本的chrome扩展，它只是在每个页面上注入JQuery。 Getting started with chrome extensions。您可以使用这段代码在清单本身中指定它。

"content_scripts": [
     {
          "matches": ["*"],
          "js": ["jquery.min.js"]  }
]

请注意，匹配中的*将在每个网页上注入脚本。你也可以提供不同的模式。例如，＆＃34; www.abc.com / *＆＃34;将匹配所有以＆＃34开头的网址; www.abc.com＆＃34;并且只会在这些页面上注入脚本。

更好的解决方案

更好的方法是创建一个chrome扩展程序，当您点击扩展程序图标时，该扩展程序可以在当前选项卡中注入JavaScript文件。

制作后台脚本并在清单中指定。

<强>的manifest.json

{
  "name": "My Extension",
  "version": "0.1",
  "manifest_version": 2,
  "description": "inject script",
  "browser_action": {
    "default_icon": "logo.png"
  },
  "permissions": [
    "activeTab"
  ],
  "background": {
    "scripts": ["background.js"]
  }
}

在后台脚本中，侦听扩展图标上的点击，并在currert选项卡中注入jquery。

<强> background.js

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.executeScript(null, {file: "jquery.min.js"});
});

Answer 4

这是一直对我有用的直接方法：

var jq = document.createElement('script');
jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/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();

只需将每一行粘贴到控制台中，一次即可。 （实际上，如果您选择前三行并将它们全部一次粘贴到DevTools Console中，则可以正常工作。）

然后，在DevTools控制台中对其进行测试：

$('div').length; //press Enter

如果遇到错误，请尝试以下方式：

jQuery('div').length

希望第一种方法可以工作-但有时您需要使用第二种方法。

希望我可以将此代码声明为我的代码，但这要感谢jondavidjohn。 请访问下面的引用链接并支持他的解决方案。

参考：

https://stackoverflow.com/a/7474386/1447509

Answer 5

最简单的方法是在整个开发控制台中执行此操作并查看其神奇之处：

var script = document.createElement('script');
script.src = "https://code.jquery.com/jquery 3.4.1.min.js";
document.getElementsByTagName('head')[0].appendChild(script);

如何在开发者控制台中使用Chrome注入jQuery？

问题

我曾尝试过什么都没有工作

我的问题

5 个答案: