このページは 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 など）の使用を試みると、拡張機能が適切なクロスオリジン権限をリクエストしていない限り、ブラウザはそれを許可しません。

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

拡張機能のオリジン外のリモートサーバーにアクセスするには、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 アクセスと保護されていない HTTP アクセスの両方を必要とする場合、権限を個別に宣言する必要があります。

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

Fetch() と XMLHttpRequest()

fetch() はサービスワーカー専用に作成されたもので、同期オペレーションから離れつつあるウェブのトレンドに沿っています。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 をリクエストすることを許可しないでください。

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

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 を取得するように拡張機能に要求できます。悪意のあるウェブページは、このようなメッセージを偽造して、拡張機能にクロスオリジンリソースへのアクセスを許可させることができます。

代わりに、取得できるリソースを制限するメッセージハンドラを設計します。以下では、コンテンツスクリプトによる itemId のみ提供し、完全な URL は提供していません。

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 ディレクティブを明示的に追加する場合は注意が必要です。

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