本頁面由 Cloud Translation API 翻譯而成。

跨來源網路要求

一般網頁可使用 fetch() 或 XMLHttpRequest API 傳送及接收遠端伺服器的資料，但受到同源政策的限制。內容指令碼會代表已插入內容指令碼的網路來源發出要求，因此內容指令碼也必須遵守相同的來源政策。擴充功能來源並未受到太多限制。只要擴充功能要求跨來源權限，在擴充功能服務 worker 或前景分頁中執行的腳本就能與來源以外的遠端伺服器通訊。

擴充功能來源

每個執行中的擴充功能都存在於各自的安全性來源中。如果不要求其他權限，擴充功能可呼叫 fetch() 以取得安裝中的資源。舉例來說，如果擴充功能包含名為 config.json 的 JSON 設定檔，且位於 config_resources/ 資料夾中，擴充功能就能擷取檔案內容，如下所示：

const response = await fetch('/config_resources/config.json');
const jsonData = await response.json();

如果擴充功能嘗試使用自身以外的安全性來源，例如 https://www.google.com，瀏覽器會禁止這項操作，除非擴充功能已要求適當的跨來源權限。

要求跨來源權限

如想要求存取擴充功能來源外的遠端伺服器，請在manifest檔案的 host_permissions 區段中新增主機和/或比對模式。

{
  "name": "My extension",
  ...
  "host_permissions": [
    "https://www.google.com/"
  ],
  ...
}

跨來源權限值可以是完整的主機名稱，例如：

"https://www.google.com/"
"https://www.gmail.com/"

也可以是比對模式，例如：

"https://*.google.com/"
"https://*/"

比對模式為「https://*/」時，系統會允許 HTTPS 存取所有可到達的網域。請注意，比對模式與內容指令碼比對模式類似，但會忽略主機後方的任何路徑資訊。

請注意，存取權會由主機和通訊協定授予。如果擴充功能想同時取得特定主機或主機組合的安全和非安全 HTTP 存取權，就必須個別宣告權限：

"host_permissions": [
  "http://www.google.com/",
  "https://www.google.com/"
]

Fetch() 與 XMLHttpRequest()

fetch() 是專為服務工作者而設計，並遵循網路趨勢，避免同步作業。XMLHttpRequest() API 支援 Service Worker 以外的擴充功能，呼叫該 API 會觸發擴充功能 Service Worker 的擷取處理常式。新工作應盡可能使用 fetch()。

安全性考量

避免跨網站指令碼攻擊漏洞

使用透過 fetch() 擷取的資源時，請注意螢幕外文件、側邊面板或彈出式視窗，避免遭受跨網站指令碼攻擊。具體來說，請避免使用危險的 API，例如 innerHTML。例如：

const response = await fetch("https://api.example.com/data.json");
const jsonData = await response.json();
// WARNING! Might be injecting a malicious script!
document.getElementById("resp").innerHTML = jsonData;
    ...

請改用不執行指令碼的更安全 API：

const response = await fetch("https://api.example.com/data.json");
const jsonData = await response.json();
// JSON.parse does not evaluate the attacker's scripts.
let resp = JSON.parse(jsonData);

const response = await fetch("https://api.example.com/data.json");
const jsonData = response.json();
// textContent does not let the attacker inject HTML elements.
document.getElementById("resp").textContent = jsonData;

限制內容指令碼存取跨來源要求

代表內容腳本執行跨來源要求時，請小心防範惡意網頁，這些網頁可能會嘗試冒用內容腳本。特別要注意的是，請勿允許內容指令碼要求任意網址。

舉例來說，擴充功能執行跨來源要求，讓內容指令碼找出商品價格。其中一種不安全做法，就是讓內容指令碼指定要由背景頁面擷取的確切資源。

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if (request.contentScriptQuery == 'fetchUrl') {
      // WARNING: SECURITY PROBLEM - a malicious web page may abuse
      // the message handler to get access to arbitrary cross-origin
      // resources.
      fetch(request.url)
        .then(response => response.text())
        .then(text => sendResponse(text))
        .catch(error => ...)
      return true;  // Will respond asynchronously.
    }
  }
);

chrome.runtime.sendMessage(
  {
    contentScriptQuery: 'fetchUrl',
    url: `https://another-site.com/price-query?itemId=${encodeURIComponent(request.itemId)}`
  },
  response => parsePrice(response.text())
);

在上述方法中，內容指令碼可以要求擴充功能擷取擴充功能可存取的任何網址。惡意網頁可能會偽造這類訊息，並誘騙擴充功能提供跨來源資源存取權。

請改為設計可限制可擷取資源的訊息處理常式。以下內容中，內容腳本只會提供 itemId，而非完整網址。

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if (request.contentScriptQuery == 'queryPrice') {
      const url = `https://another-site.com/price-query?itemId=${encodeURIComponent(request.itemId)}`
      fetch(url)
        .then(response => response.text())
        .then(text => parsePrice(text))
        .then(price => sendResponse(price))
        .catch(error => ...)
      return true;  // Will respond asynchronously.
    }
  }
);

chrome.runtime.sendMessage(
  {contentScriptQuery: 'queryPrice', itemId: 12345},
  price => ...
);

使用 HTTPS 而非 HTTP

此外，透過 HTTP 擷取資源時請格外小心。如果擴充功能是在敵對網路上使用，網路攻擊者 (又稱「中間人」"man-in-the-middle") 可能會修改回應，進而攻擊擴充功能。請盡量使用 HTTPS。

調整內容安全政策

如果您透過在資訊清單中新增 content_security_policy 屬性來修改擴充功能的預設《內容安全政策》，就必須確保您要連線的任何主機都已獲准。雖然預設政策不會限制主機連線，但在明確新增 connect-src 或 default-src 指令時，請務必小心操作。