原來瀏覽器插件有這么多風(fēng)險(xiǎn)？

嫦美找到我時(shí)，整個(gè)人是崩潰的 —— “卡頌，我好像被監(jiān)視了”。

傍晚的星巴克，她的影子被吊燈拉得很長(zhǎng)，顫抖著如同她此刻的內(nèi)心。

“怎么回事？”我盡量讓聲音聽起來平靜些。

“最近認(rèn)識(shí)個(gè)男生，是我MBA同學(xué)，對(duì)我很熱情，也很懂我”嫦美環(huán)顧四周，仿佛隨時(shí)會(huì)有什么東西從夜色中跳出來。

“緣分啊，這不很好嘛？”我笑著說。

“不是那種心有靈犀的懂，是那種「生活起居都被監(jiān)視的懂」”嫦美解釋道。不待我回應(yīng)，又補(bǔ)充道：“這次約你出來，也是想讓你幫忙看看我電腦有沒有被植入啥監(jiān)聽木馬”。

說罷，從背包里取出MacBook Air遞給我。

“Mac一般安全性都蠻高的，你最近沒裝啥來路不明的應(yīng)用吧？”一邊擺弄她的電腦，我一邊問道。

“我也不會(huì)裝應(yīng)用，平時(shí)主要就上上網(wǎng)、刷刷劇”。

瀏覽完她的應(yīng)用列表，我順手打開了瀏覽器，又習(xí)慣性打開插件列表。

這時(shí)，一個(gè)瀏覽器插件吸引了我的注意：

“這是啥？”

“奧，我們MBA的網(wǎng)課需要在這個(gè)平臺(tái)看。這個(gè)平臺(tái)很嚴(yán)，看課不能快進(jìn)，也不能切換到其他頁面。這是那個(gè)男同學(xué)發(fā)我的，裝了后就能突破這些限制，還挺方便”說罷，嫦美皺了皺眉“和這個(gè)插件不會(huì)有關(guān)系吧？”

“不好說，等我看看插件源碼”。

事實(shí)證明，這個(gè)插件真的有問題......

本文參考文章Let's build a Chrome extension that steals everything^[1]

瀏覽器插件能做什么？

瀏覽器插件為我們上網(wǎng)提供了極大便利，比如：

• GPT插件能幫我們一鍵總結(jié)網(wǎng)頁內(nèi)容

• 翻譯插件能實(shí)時(shí)翻譯網(wǎng)頁內(nèi)容

• 去廣告插件能去掉網(wǎng)頁牛皮癬，還我們清爽的頁面

實(shí)際上，瀏覽器插件除了能「分析并修改原始頁面」外，還能：

• 獲取我們的實(shí)時(shí)位置

• 讀取、修改我們復(fù)制粘貼的內(nèi)容

• 讀取cookie、瀏覽歷史

• 屏幕截圖

• 記錄鍵盤輸入

• 等等

可以說，有心人只要利用得當(dāng)，就能通過瀏覽器插件獲得我們上網(wǎng)的所有足跡。

這時(shí)，有人會(huì)說：“插件能做這些沒錯(cuò)，但必須申請(qǐng)必要的權(quán)限，我不給他權(quán)限不就行了？”

事實(shí)真的這么簡(jiǎn)單么？

安全約束夠么？

《Building Browser Extensions》一書作者「Matt Frisbie」為了演示瀏覽器插件的潛在安全問題，構(gòu)造了一個(gè)「會(huì)申請(qǐng)全部49項(xiàng)權(quán)限」的chrome瀏覽器插件spy-extension^[2]。

當(dāng)你在瀏覽器安裝這個(gè)插件后，瀏覽器確實(shí)會(huì)提示你「插件申請(qǐng)的權(quán)限」：

不過，等等！明明申請(qǐng)了49項(xiàng)權(quán)限，這里為什么只顯示5項(xiàng)？原來，窗口顯示的內(nèi)容行數(shù)有限，超出部分需要拖動(dòng)滾動(dòng)條才會(huì)顯示。

可是，又有幾個(gè)用戶會(huì)發(fā)現(xiàn)「在申請(qǐng)的5項(xiàng)權(quán)限下面，滾動(dòng)條后面還隱藏了44項(xiàng)權(quán)限呢」？

一旦有了權(quán)限，想做什么就取決于插件作者的想象力了。可以被用來做壞事的WebExtensions API非常多，比如：

Service Worker

后臺(tái)運(yùn)行的Service Worker可以監(jiān)聽發(fā)出的網(wǎng)絡(luò)請(qǐng)求，并在請(qǐng)求發(fā)送到網(wǎng)絡(luò)之前修改它們。

這意味著插件可以使用Service Worker發(fā)送數(shù)據(jù)到服務(wù)器，或者在用戶瀏覽網(wǎng)頁時(shí)攔截請(qǐng)求并發(fā)送額外的數(shù)據(jù)。

由于Service Worker運(yùn)行于一個(gè)獨(dú)立的后臺(tái)進(jìn)程中，所以打開調(diào)試工具的Network面板看不到插件發(fā)出的請(qǐng)求：

都有哪些有價(jià)值的數(shù)據(jù)可以收集呢？

用戶敏感數(shù)據(jù)

最簡(jiǎn)單的，監(jiān)聽用戶鍵盤輸入：

[...document.querySelectorAll("input,textarea,[contenteditable]")].map((input) =>
  input.addEventListener("input", _.debounce((e) => {
    // 處理 用戶輸入
  }, 1000))
);

除此之外：

• chrome.cookies.getAll({})會(huì)以數(shù)組的形式返回瀏覽器的所有cookie

• chrome.history.search({ text: "" })會(huì)以數(shù)組形式返回用戶的整個(gè)瀏覽歷史記錄

• chrome.tabs.captureVisibleTab()會(huì)靜默將用戶當(dāng)前正在查看的頁面截圖，并以data URL的形式返回。

• chrome.webRequest可以讓插件監(jiān)控所有Tab的流量

上述API結(jié)合Service Worker傳輸數(shù)據(jù)，用戶在插件作者面前無異于裸奔。

更高階的玩法

據(jù)嫦美表示 —— 她那個(gè)MBA同學(xué)好像知道她住哪兒，這是怎么做到的呢？很有可能是通過「獲取地理位置」的插件功能。

一個(gè)網(wǎng)課插件獲取地理位置，這不是太奇怪了么？可是嫦美一點(diǎn)都沒發(fā)覺，這是怎么辦到的？

如果插件腳本獲取地理位置（通過navigator.permissions.query({ name: "geolocation" })），將詢問用戶授權(quán)。

但如果「被注入腳本的網(wǎng)站」已經(jīng)獲得用戶的地理位置授權(quán)，插件不需要授權(quán)就能靜默使用對(duì)應(yīng)功能。

舉個(gè)例子，如果百度地圖向你請(qǐng)求「獲取地理位置」的授權(quán)，這很合理，你也大概率會(huì)同意。

如果惡意插件可以向百度地圖注入腳本，當(dāng)你訪問百度地圖時(shí)，他就不用再獲取授權(quán)就能訪問你的地理位置。

借尸還魂之法

以上所說的所有功能都局限在 —— 插件向已有網(wǎng)站注入腳本。那插件是否能不被察覺的直接打開惡意網(wǎng)站呢？

答案是 —— 可以，我愿稱其為「借尸還魂」之法。

很多朋友都會(huì)打開多個(gè)瀏覽器Tab，但常用的可能就是其中幾個(gè)，剩下的Tab會(huì)閑置很長(zhǎng)時(shí)間。

而這些「閑置的Tab」就是最好的下手目標(biāo)。

首先，插件通過以下代碼篩選出閑置的Tab：

const tabs = await chrome.tabs.query({
  // 篩選用戶當(dāng)前沒使用的Tab
  active: false,
  // 篩選用戶沒有pin的Tab，pin的Tab使用頻率通常比較高
  pinned: false,
  // 不使用有音頻的Tab
  audible: false,
  // 使用已經(jīng)加載完畢的Tab
  status: "complete",
});

// 篩選出閑置Tab
const [idleTab] = tabs.filter(/** ...省略其他篩選條件 **/)

只要惡意網(wǎng)站的標(biāo)題、圖標(biāo)（favicon）與閑置Tab一致，那么用惡意網(wǎng)站替換閑置Tab后，用戶也不會(huì)有任何察覺。

舉個(gè)例子，如果閑置Tab是React官網(wǎng)，那惡意網(wǎng)站只需要標(biāo)題是React，圖標(biāo)是React，即使閑置Tab跳轉(zhuǎn)到惡意網(wǎng)站，從Tab外觀上也無法區(qū)分。

下面的代碼構(gòu)造了惡意網(wǎng)站的url，其中「與閑置Tab一致的標(biāo)題、圖標(biāo)」保存在url searchParams中：

// 將標(biāo)題、圖標(biāo)保存在searchParams中
const searchParams = new URLSearchParams({
  returnUrl: idleTab.url,
  faviconUrl: idleTab.favIconUrl || "",
  title: idleTab.title || "",
});

const url = `${chrome.runtime.getURL(
  "惡意網(wǎng)站.html"
)}?${searchParams.toString()}`;

惡意網(wǎng)站在url searchParams中取出標(biāo)題、圖標(biāo)數(shù)據(jù)，并替換：

// 修改標(biāo)題
document.title = searchParams.get('title);

// 修改圖標(biāo)
document.querySelector(`link[rel="icon"]`)
  .setAttribute("href", searchParams.get('faviconUrl'));

最后，用惡意網(wǎng)站替換閑置Tab的網(wǎng)站：

await chrome.tabs.update(idleTab.id, {
  url,
  active: false,
});

惡意網(wǎng)站只需要在「做完壞事后」或「用戶重新點(diǎn)擊 閑置Tab 時(shí)」跳回原來的網(wǎng)站即可。代碼如下：

const searchParams = new URL(window.location.href).searchParams;

function useReturnUrl() {
  // 跳回原來網(wǎng)站
  window.location.href = searchParams.get('returnUrl');
}

if (document.visibilityState === "visible") {
  useReturnUrl();
}

// 用戶訪問了閑置Tab
document.addEventListener("visibilitychange", () => useReturnUrl());

// ...開始做壞事

// 做完壞事，跳回原來網(wǎng)站
useReturnUrl();

從用戶的視角看，當(dāng)他點(diǎn)擊閑置Tab時(shí)，網(wǎng)站重新加載。對(duì)于一個(gè)閑置的Tab來說，重新訪問時(shí)加載頁面是再正常不過的邏輯。

只是用戶不會(huì)知道，這并不是「網(wǎng)站重新加載」，而是「退回到前一個(gè)網(wǎng)站」。

后記

有人會(huì)說 —— 我只使用那些信得過的插件。

但今天信得過的插件，明天就一定信得過么？在暗網(wǎng)中，「用戶量大的免費(fèi)瀏覽器插件」能賣不錯(cuò)的價(jià)錢。

為什么會(huì)有人收購(gòu)這類「沒有商業(yè)價(jià)值的免費(fèi)插件」呢？一種可能是 —— 收購(gòu)后向代碼中投毒，只要用戶升級(jí)插件就會(huì)中招。

所以，好用的插件不一定沒問題，今天沒問題的插件明天也不一定沒問題。

對(duì)于嫦美來說，技術(shù)上能做的只能是刪除插件、清除緩存、清除cookie，退出所有的賬號(hào)登錄并修改密碼。

但似乎更大的危險(xiǎn)，來自現(xiàn)實(shí)世界......