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

Question

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

javascriptjquerydependency-injectiongoogle-chrome-devtools

15

问题

我曾经可以使用以下两个Chrome扩展程序之一（本地）轻松将jQuery注入到没有jQuery且我不拥有的页面（客户端）中，以便进行设计更改、开发修改和实时故障排除：

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

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

我不确定接下来该怎么办。

我尝试过但没有成功的方法

以下是我尝试过的插件（大约6个月前仍然有效），但现在对我不再起作用：

这里有一些我遇到的链接，它们提供的解决方案已经不再有效:

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

如何通过Chrome开发者工具将jQuery注入到任何网站中 | DSASMBLR

我的问题

如何在不使用jQuery的网页中使用Chrome开发者控制台注入jQuery？
2017年浏览器/JavaScript/编程领域是否有重大变化，如果一个人知道这个特定的变化或现象，就可以轻松解释为什么上述插件不再起作用？
为什么上述插件不起作用？是所有浏览器公司普遍推出了一些重大变化吗？

- Eric Hepperle - CodeSlayer2010

你能告诉我为什么需要注入jQuery吗？我的意思是为了什么目的？#想知道 - plonknimbuzz

我刚刚测试了你发布的其中一个插件，它完美地运行了：https://chrome.google.com/webstore/detail/jquery-inject/iibfbhlfimdnkinkcenncoeejnmpemof?hl=en-US - Ahmed Musallam

请确保您的浏览器未被广告软件、插件或ISP连接注入任何脚本。我对此有经验。制作简单的脚本，检查您的DOM和源代码。 - plonknimbuzz

1

@plonknimbuzz 谢谢。我会考虑这些因素的。我试图更新我的“为什么”评论，但没有成功，所以这是我回应的其余部分：

有时我会遇到老旧的基本网站，使用 jQuery，我可以快速模拟升级的样子，以便让业主看到，作为一名自由职业的网站开发/设计师，我希望做他们的客户。

希望这可以帮助到你。 - Eric Hepperle - CodeSlayer2010

@plonknimbuzz 我解决了这个问题吗？是和否：我还没有学会如何让jQuery再次工作，但我自学了ES6并重写了所有的jQuery代码以使用它。现在我有了更少的依赖问题，一切仍然正常。 :) 接下来我需要做的是学习如何创建自己的javascript库并将其导入Chrome。也许最好通过插件实现？ - Eric Hepperle - CodeSlayer2010

显示剩余5条评论

5个回答

8

使用代码片段。

复制jQuery代码并粘贴到代码片段中。
运行代码片段。

- Kayce Basques

1

在 Google Chrome 版本 83.0.4103.116 中运行得非常好！它避免了内容安全策略问题。 - stomy

嗯，似乎不再避免CSP问题了。 - undefined

3

很不幸，由于最新的防止“跨站脚本攻击（XSS）”热潮，这些插件现在已经不再起作用。这些更改背后可能有一种高尚的目的，我只是想了解发生了什么变化。我认为这与“内容安全策略（CSP）”有关，我最近才听说并且知之甚少。

是的。这些插件无法正常工作的原因是它们与恶意攻击者可以注入任意JavaScript的MITM（中间人）攻击无法区分。CSP旨在通过仅运行来自受信任源的白名单JavaScript来防止发生这种情况。不幸的是，在Chrome或Firefox中目前没有简单的方法来处理此问题，直到开发人员将插件作者注入的JavaScript/CSS列入白名单。这是不太可能发生的，因为Chrome有一个应用程序开发人员指南，介绍如何符合CSP策略。

同时，我建议您阅读OWASP关于XSS的文章，以便了解其重要性。

不推荐的方法

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

推荐的方法

不要注入jQuery，而是将其放在页面中。添加一个 CSP 标签：

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

这里你需要放置类似于default-src 'self'; script-src https://cdn.com/jquery的东西，其中cdn.com是你从中下载jQuery的地方。更进一步并添加子资源完整性哈希。如果CDN被攻击、成为恶意网站或者你被MITM攻击，哈希将不匹配，恶意脚本将无法加载。此外，出于同样的原因，你永远无法真正信任插件。

如果你决定不使用CDN，可以使用包管理器（如node或Bower）为你下载特定版本的jQuery。然后只需在本地加载即可。当然，在生产环境中，通常要使用CDN，以便访问者可以从更近的数据中心下载。另外，如果你正在使用Cloudflare，他们很可能已经缓存了该特定版本的jQuery，因此不必再次下载。 原型制作 如果你的动机是原型制作，那么有解决方法: 不推荐: 你可以爬取网站，进行修改，然后呈现给客户。推荐：不要在一个正在运行的网站上进行修改，而应该进行快速原型设计。这样做的优点是：

如果你和客户一起坐下来，客户可以看到你正在做什么
你正在处理抽象的原型，而不是具体的细节，这些细节应该在合同中规定。有关骨架屏幕的问题，请参见ux.stackexchange.com
你可以向客户解释为什么不能做X（将jQuery注入实时站点），而应该做Y（请参见答案的其余部分），这将希望说服他们采用更好的安全实践
原型可以很快地搭建起来并且很容易被丢弃，你甚至可以保留修订版本以进行比较。对现有网站的更改并不容易实现这一点。

- user9147305

感谢您提供详细的信息！您让我了解到了许多我之前不知道的事情，例如csp元标记、快速原型设计、MITM攻击等。通过学习现代ES6 JavaScript中的document.querySelectorAll()方法，我成功地解决了注入jQuery的问题，因此不再需要使用jQuery，并且可以在控制台中运行我一直称之为片段（可能与Chrome Dev Tools所称的片段不同）。我刚刚将所有的jQuery片段转换成了ES6。然而，我期待进一步研究您介绍的新概念 :) - Eric Hepperle - CodeSlayer2010

1

你可以制作一个非常基本的Chrome扩展程序，它只是在每个页面上注入JQuery。开始使用Chrome扩展程序。您可以使用以下代码在清单中指定它。

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

请注意，匹配中的*将在每个网页上注入脚本。您也可以使用不同的模式。例如，“www.abc.com/*”将匹配所有以“www.abc.com”开头的URL，并仅在这些页面上注入脚本。

更好的解决方案是创建一个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。

background.js

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

- Abhishek Deora

-5

最简单的方法是将整个代码复制到开发控制台中执行，然后看魔法发生：

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

- Shoaib Khalil

这个答案与之前的答案完全相同（两年前发布），只是变量名改变了。 - crashwap

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- cssyphus · Accepted Answer

这里有一个对我总是有效的直接方法：

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控制台中，则可以正常工作）。

您可能会立即看到一个错误：Uncaught ReferenceError: jQuery is not defined。忽略它-DevTools在开玩笑。 （也许是Google的幽默尝试...）

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

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

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

jQuery('div').length

希望第一个方法可行 - 但有时需要使用第二种方法。

这段代码归功于jondavidjohn，摘自于这篇原始帖子。