このページは 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 アクセスとセキュアでない 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();

コンテンツスクリプトによるクロスオリジンリクエストへのアクセスを制限する

コンテンツスクリプトに代わってクロスオリジンリクエストを実行する場合は、コンテンツスクリプトになりすますことを試みる悪意のあるウェブページに対する保護に注意してください。特に、コンテンツスクリプトが任意の URL をリクエストできるようにしないでください。

拡張機能がクロスオリジンリクエストを実行して、コンテンツスクリプトにアイテムの価格を検出させる例について考えてみましょう。（安全でない）アプローチの一つとして、バックグラウンドページによって取得される正確なリソースをコンテンツスクリプトに指定させるというものがあります。

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

上述のアプローチでは、コンテンツスクリプトは拡張機能に、拡張機能がアクセスできる URL を取得するよう要求できます。悪意のあるウェブページが、このようなメッセージを偽って拡張機能をだましてクロスオリジンリソースにアクセスさせる可能性があります。

代わりに、取得可能なリソースを制限するメッセージハンドラを設計します。以下の例では、完全な URL ではなく、コンテンツスクリプトから 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 => ...);

HTTP より HTTPS を優先する

また、HTTP 経由で取得するリソースには特に注意してください。拡張機能が悪意のあるネットワークで使用されている場合、ネットワーク攻撃者（中間者"man-in-the-middle"）がレスポンスを改ざんし、場合によっては拡張機能を攻撃するおそれがあります。可能であれば、HTTPS を使用することをおすすめします。

コンテンツセキュリティポリシーの調整

マニフェストに content_security_policy 属性を追加して、アプリや拡張機能のデフォルトのコンテンツセキュリティポリシーを変更する場合は、接続するホストがすべて許可されるようにする必要があります。デフォルトポリシーではホストへの接続は制限されませんが、connect-src ディレクティブまたは default-src ディレクティブを明示的に追加する場合は注意が必要です。