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

跨來源 XMLHttpRequest

一般網頁可以使用 XMLHttpRequest 物件，從遠端伺服器傳送及接收資料，但受到相同來源政策的限制。內容指令碼會代表插入內容指令碼的網路來源啟動要求，因此內容指令碼也必須符合相同的來源政策。(內容指令碼自 Chrome 73 版起就受到 CORB 規範；自 Chrome 第 83 版起便必須遵守 CORS。)擴充功能來源並不受限 - 在擴充功能的背景頁面或前景分頁中執行的指令碼，只要擴充功能要求跨來源權限，即可與來源外的遠端伺服器通訊。

擴充功能來源

每個執行中的擴充功能都位於各自的安全性來源中。而不需要要求其他權限，擴充功能就能使用 XMLHttpRequest 取得安裝作業中的資源。例如，如果擴充功能在 config_resources 資料夾中包含名為 config.json 的 JSON 設定檔，擴充功能即可擷取檔案內容，如下所示：

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = handleStateChange; // Implemented elsewhere.
xhr.open("GET", chrome.extension.getURL('/config_resources/config.json'), true);
xhr.send();

如果擴充功能嘗試使用非本身的安全性來源 (例如 https://www.google.com)，則瀏覽器會禁止該擴充功能，除非擴充功能要求適當的跨來源權限。

要求跨來源權限

將主機或主機比對模式 (或兩者) 新增至資訊清單檔案的權限部分，擴充功能即可要求存取來源以外的遠端伺服器。

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

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

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

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

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

「https://*/」的比對模式允許透過 HTTPS 存取所有可存取的網域。請注意，此處的比對模式與「內容指令碼比對模式」類似，但會忽略主機後面的所有路徑資訊。

另請注意，系統會同時透過主機和配置授予存取權。如果擴充功能想同時以安全與非安全的 HTTP 存取指定主機或一組主機，則其必須分別宣告權限：

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

安全性考量

避免跨網站指令碼攻擊

使用透過 XMLHttpRequest 擷取的資源時，背景頁面應小心，以免受害者變成跨網站指令碼攻擊。具體來說，請避免使用危險 API，例如：

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data.json", true);
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4) {
    // WARNING! Might be evaluating an evil script!
    var resp = eval("(" + xhr.responseText + ")");
    ...
  }
}
xhr.send();

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data.json", true);
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4) {
    // WARNING! Might be injecting a malicious script!
    document.getElementById("resp").innerHTML = xhr.responseText;
    ...
  }
}
xhr.send();

建議您改用較安全的 API，不要執行指令碼：

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data.json", true);
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4) {
    // JSON.parse does not evaluate the attacker's scripts.
    var resp = JSON.parse(xhr.responseText);
  }
}
xhr.send();

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data.json", true);
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4) {
    // innerText does not let the attacker inject HTML elements.
    document.getElementById("resp").innerText = xhr.responseText;
  }
}
xhr.send();

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

代表內容指令碼執行跨來源要求時，請務必防範企圖冒用內容指令碼的惡意網頁。請特別注意，不允許內容指令碼要求任意網址。

我們舉個例子說明：擴充功能執行跨來源要求，讓內容指令碼探索商品價格。其中一種 (不安全的) 做法是讓內容指令碼指定背景頁面要擷取的確切資源。

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') {
        var 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 指令時請務必謹慎。