如何在開發者控制台中使用 Chrome 注入 jQuery？

Question

問題

我曾經能夠（在本地）使用以下兩個 Chrome 擴展中的任何一個來輕松地將 jQuery 注入到還沒有 jQuery 的頁面中，並且我沒有擁有（客戶端）來試驗設計更改、開發修改和實時故障排除：

• jQuery 注入器 - Chrome 網上應用店
• jQuery 無處不在 - Chrome 網上應用店

不幸的是，現在由於防止“XSS”（跨站點腳本）的最新熱潮，這些插件不再起作用。 這些變化背后可能有一個崇高的目的，我只是想了解發生了什么變化。 我認為這與“內容安全策略”有關，我最近才聽說過，對此知之甚少。

我在 2011 年第一次了解到 XSS 是瀏覽器問題，然而，XSS 預防措施從未阻止我進行本地開發。 我一直在尋找現代（2017 年末）解決方案，但無濟於事。

我不知道從這里去哪里。

我嘗試過但沒有奏效的方法

以下是我嘗試過的插件（直到大約 6 個月前還可以使用），但不再適合我：

1. 控制台中的 jQuery（插件）
2. jQuery 注入（插件）
3. jQuery 注入器（插件）
4. jquery-inject,jQuery-inject(Chrome 擴展),下載jquery-inject的源碼_GitHub_酷徒

以下是我遇到的許多鏈接中的一些，這些鏈接提供了不再有效的解決方案：

• 如果在服務器上啟用了內容安全策略，如何使用書簽將腳本注入頁面？
• 在 JavaScript 控制台中包含 jQuery
• 如何將 jquery 注入任何網頁
• 如何在另一個 JavaScript 文件中包含一個 JavaScript 文件？
• Google Chrome 擴展：如何在以編程方式注入的內容腳本中包含 jQuery？
• 將 jQuery 注入任何站點 | 布蘭登馬丁內斯
• 內容腳本 - Google Chrome

最后一個看起來也很有希望，但我還沒有嘗試過：

• 如何通過 Chrome 開發者工具將 jQuery 注入任何網站 | DSASBLR

我的問題

1. 如何將 jQuery（使用 Chrome 開發者控制台）注入不使用 jQuery 的網頁？

2. 2017 年瀏覽器/JavaScript/編程世界是否發生了足夠大的變化，如果一個人知道這個特定的變化或現象，很容易解釋為什么上述插件不再起作用？

3. 為什么上面的插件不起作用？ 今年所有瀏覽器公司是否普遍推出了一些重大變化？

Answer 1

這是一個一直對我有用的直接方法：

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 正在拉扯你的腿。 （谷歌在幽默方面的弱小的嘗試，也許......）

然后，在 DevTools 控制台中，測試它：

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

如果出現錯誤，請按以下方式嘗試：

jQuery('div').length

希望第一種方法有效 - 但有時您需要使用第二種方法。

此代碼感謝jondavidjohn ，來自這篇原始帖子。

Answer 2

使用片段。

1. 復制 jQuery 代碼，並將其粘貼到 Snippet 中。
2. 運行代碼段。

Answer 3

不幸的是，現在由於防止“XSS”（跨站點腳本）的最新熱潮，這些插件不再起作用。 這些變化背后可能有一個崇高的目的，我只是想了解發生了什么變化。 我認為這與“內容安全策略”有關，我最近才聽說過，對此知之甚少。

是的。 這些插件不起作用的原因是因為它們與惡意攻擊者可以注入任意 JavaScript 的 MITM（中間人）攻擊無法區分。 CSP（內容安全策略）旨在通過僅運行來自源白名單的受信任 JavaScript 來防止這種情況發生。 不幸的是，目前在 Chrome 或 Firefox 中沒有簡單的方法來處理這個問題，直到開發人員白名單從插件作者那里注入 JavaScript/CSS。 這不太可能發生，因為 Chrome為應用開發者提供了如何遵守 CSP 政策的指南。

同時，我建議您閱讀有關XSS的 OWASP 文章，以便了解為什么它如此重要。

不推薦的方法

您可以從 Chrome 商店下載“禁用內容安全策略”插件。 僅將其用於本地開發。 請記住，如果您這樣做，惡意 ISP 或專門的攻擊者仍然可以在 MITM 攻擊中注入腳本（例如，如果他們控制了您的路由器）。

推薦方法

不要注入 jQuery，而是將它放在您的頁面中。 添加CSP標簽：

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

在這里你可以放一些類似default-src 'self'; script-src https://cdn.com/jquery default-src 'self'; script-src https://cdn.com/jquery其中cdn.com是您從中下載 jQuery 的位置。 更進一步，添加一個子資源完整性哈希。 如果 CDN 遭到破壞、變得惡意或您成為 MITM，則散列將不匹配並且不會加載惡意腳本。 此外，出於同樣的原因，您永遠無法真正信任插件。

如果您決定不使用 CDN，您可以使用包管理器（如 node 或 Bower）為您下載特定版本的 jQuery。 然后只需在本地加載它。 當然，對於生產，您通常希望使用 CDN，以便您的訪問者可以從更近的數據中心下載。 此外，如果您使用 Cloudflare，他們很可能會緩存該特定版本的 jQuery，因此他們不必繼續下載它。

原型制作

如果您的動機是原型設計，那么有一些解決方法：

不推薦：您可以抓取網站，進行修改，然后呈現給客戶。

推薦：您應該進行快速原型制作，而不是在實時網站上進行修改。 這樣做的優點是：

• 如果您與客戶坐下來，客戶可以確切地看到您在做什么

• 您正在處理抽象原型而不是具體細節，這應該在合同中規定。 有關骨架屏幕的問題，請參閱ux.stackexchange.com 。

• 您可以向客戶解釋為什么當您應該執行 Y 時不能執行 X（將 jQuery 注入實時站點）（請參閱答案的其余部分），這有望說服他們采用更好的安全實踐

• 原型可以立起來並迅速扔掉，您甚至可以保留修訂以進行比較。 更改實時站點並不容易

Answer 4

您可以制作一個非常基本的 chrome 擴展，它只在每個頁面上注入 JQuery。 開始使用 chrome 擴展。 您可以使用這段代碼在清單本身中指定。

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

請注意，匹配中的 * 將在每個網頁上注入腳本。 你也可以給出不同的圖案。 例如，“www.abc.com/*”將匹配所有以“www.abc.com”開頭的 URL，並且只會在這些頁面上注入腳本。

更好的解決方案

更好的方法是創建一個 chrome 擴展程序，當您單擊擴展程序圖標時，該擴展程序可以在當前選項卡中注入您的 JavaScript 文件。

制作一個后台腳本並在您的清單中指定它。

清單文件

{
  "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。

背景.js

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

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