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

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

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

我在2011年第一次了解到XSS是一个浏览器问题，然而，XSS预防措施从未阻止过我进行本地开发。我一直在寻找一种现代（2017年末）解决方案，但毫无结果

我不知道接下来该怎么办

我试过的都没用 以下是我尝试过的插件（在大约6个月前还可以使用），但现在已经不适用于我了：

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

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

我的问题

如何将jQuery（使用Chrome开发者控制台）注入到不使用jQuery的网页中

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

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

---

您可以创建一个非常基本的chrome扩展，它只在每个页面上注入JQuery。您可以使用这段代码在清单本身中指定

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

请注意，*in匹配项将在每个网页上注入脚本。你也可以给出不同的图案。例如，“www.abc.com/*”将匹配以“www.abc.com”开头的所有URL，并将仅在此类页面上注入脚本

更好的解决方案

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

更好的方法是创建一个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"]
  }
}

在您的后台脚本中，聆听对扩展图标的单击，并将jquery插入curlert选项卡中

background.js

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

使用

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

运行代码段

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

对。这些插件无法工作的原因是，它们与MITM（中间人）攻击无法区分，在MITM攻击中，恶意攻击者可以注入任意JavaScript。CSP（内容安全策略）旨在通过仅从源白名单运行受信任的JavaScript来防止这种情况发生。不幸的是，目前在Chrome或Firefox中都没有简单的方法来处理这个问题，直到开发者白名单从插件作者那里注入JavaScript/CSS。这种情况不太可能发生，因为Chrome对如何遵守CSP政策有明确的规定

同时，我建议您了解OWASP文章的内容，以便了解它为什么如此重要

不推荐的方法

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

推荐方法

不要注入jQuery，而是将其放入页面中。添加标记：

在这里，您可以放置类似于

defaultsrc'self'的内容；脚本srchttps://cdn.com/jquery

其中

cdn.com

是您下载jQuery的地方。再往前走一步，添加一个。如果CDN遭到破坏，变得恶意，或者您成为MITM'd，则哈希将不匹配，并且不会加载恶意脚本。此外，出于同样的原因，你永远不能真正信任插件

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

原型设计

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

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

推荐：与其在实时网站上进行修改，不如进行快速原型制作。这样做的好处是：

• 如果你和客户坐下来，客户可以确切地看到你在做什么

• 你处理的是抽象的原型，而不是具体的细节，这些应该在合同中规定。有关骨架屏幕上的问题，请参阅<

  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();
  

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

  jQuery('div').length
  

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