このページは Cloud Translation API によって翻訳されました。

クロスオリジンネットワークリクエスト

通常のウェブページでは、fetch() API または XMLHttpRequest API を使用してリモートサーバーからデータを送受信できますが、同一生成元ポリシーによって制限されます。コンテンツスクリプトは、コンテンツスクリプトが挿入されたウェブオリジンに代わってリクエストを開始するため、コンテンツスクリプトには同一生成元ポリシーも適用されます。拡張機能の生成元はそれほど制限されません。拡張機能 Service Worker またはフォアグラウンドタブで実行しているスクリプトは、拡張機能がクロスオリジンの権限をリクエストしている限り、オリジン外のリモートサーバーと通信できます。

拡張機能の作成元

実行中の拡張機能はそれぞれ、個別のセキュリティオリジン内に存在します。追加の権限をリクエストしなくても、拡張機能は fetch() を呼び出してインストール内のリソースを取得できます。たとえば、拡張機能の config_resources/ フォルダに config.json という JSON 構成ファイルが含まれている場合、拡張機能は次のようにファイルの内容を取得できます。

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

拡張機能がそれ自体以外のセキュリティオリジン（https://www.google.com など）を使用しようとすると、拡張機能が適切なクロスオリジン権限をリクエストしない限り、ブラウザはセキュリティオリジンを禁止します。

クロスオリジン権限のリクエスト

拡張機能の作成元以外のリモートサーバーへのアクセスをリクエストするには、マニフェストファイルの 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 アクセスとセキュアでない HTTP アクセスの両方を必要とする拡張機能では、権限を個別に宣言する必要があります。

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

Fetch() と XMLHttpRequest() の比較

fetch() は Service Worker 専用に作成されたもので、同期オペレーションとは異なる幅広いウェブトレンドに沿っています。XMLHttpRequest() API は Service Worker 外の拡張機能でサポートされており、これを呼び出すと拡張機能 Service Worker のフェッチハンドラがトリガーされます。新しい職場では可能な限り fetch() を優先してください。

セキュリティ上の考慮事項

クロスサイトスクリプティングの脆弱性を回避する

fetch() で取得したリソースを使用する場合、画面外のドキュメント、サイドパネル、ポップアップがクロスサイトスクリプティングの被害に遭わないように注意する必要があります。特に、innerHTML などの危険な API は使用しないでください。例:

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;

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

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

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

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') {
      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 => ...
);

HTTP より HTTPS を優先する

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

コンテンツセキュリティポリシーを調整する

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

クロスオリジン ネットワーク リクエスト