セキュリティ ヘッダーのクイック リファレンス

セキュリティ ヘッダーについて説明する前に、ウェブ上の既知の脅威と、これらのセキュリティ ヘッダーを使用する理由について説明します。

インジェクションの脆弱性からサイトを保護する

インジェクションの脆弱性は、アプリで処理される信頼できないデータがアプリの動作に影響を与え、通常は攻撃者が制御するスクリプトの実行につながる場合に発生します。インジェクション バグによって引き起こされる最も一般的な脆弱性は、リフレクテッド XSS、ストアド XSS、DOM ベースの XSS などのさまざまな形式のクロスサイト スクリプティング（XSS）です。

通常、XSS 脆弱性により、攻撃者はアプリケーションで処理されるユーザーデータや、同じウェブ オリジンでホストされている他の情報に完全にアクセスできるようになります。

インジェクションに対する従来の防御策としては、HTML テンプレート システムの自動エスケープを常に使用する、危険な JavaScript API の使用を避ける、ユーザーが制御する HTML をサニタイズしてファイル アップロードを別のドメインでホストすることでユーザーデータを適切に処理する、などがあります。

• コンテンツ セキュリティ ポリシー（CSP）を使用して、アプリケーションで実行できるスクリプトを制御し、インジェクションのリスクを軽減します。
• Trusted Types を使用して、危険な JavaScript API に渡されるデータのサニタイズを強制します。
• X-Content-Type-Options を使用して、ブラウザがウェブサイトのリソースの MIME タイプを誤って解釈し、スクリプトが実行されるのを防ぎます。

サイトを他のウェブサイトから分離する

ウェブのオープン性により、ウェブサイトはアプリケーションのセキュリティ要件に違反する可能性のある方法で相互にやり取りできます。たとえば、予期せず認証済みリクエストを作成したり、別のアプリケーションのデータを攻撃者のドキュメントに埋め込んだりして、攻撃者がアプリケーション データを変更または読み取れるようにするなどが挙げられます。

ウェブ分離を損なう一般的な脆弱性には、クリックジャッキング、クロスサイト リクエスト フォージェリ（CSRF）、クロスサイト スクリプト インクルージョン（XSSI）、さまざまなクロスサイト リークなどがあります。

• X-Frame-Options を使用して、悪意のあるウェブサイトによってドキュメントが埋め込まれるのを防ぎます。
• クロスオリジン リソース ポリシー（CORP）を使用して、ウェブサイトのリソースがクロスオリジン ウェブサイトに含まれないようにします。
• クロスオリジン オープナー ポリシー（COOP）を使用して、悪意のあるウェブサイトによる操作からウェブサイトのウィンドウを保護します。
• クロスオリジン リソース シェアリング（CORS）を使用して、クロスオリジン ドキュメントからのウェブサイトのリソースへのアクセスを制御します。

これらのヘッダーに関心がある場合は、Post-Spectre Web Development を読むことをおすすめします。

強力なウェブサイトを安全に構築する

Spectre は、同一オリジン ポリシーにもかかわらず、同じブラウジング コンテキスト グループに読み込まれたデータを読み取り可能にします。ブラウザは、「クロスオリジン分離」と呼ばれる特別な環境の背後にある脆弱性を悪用する可能性のある機能を制限します。クロスオリジン分離を使用すると、SharedArrayBuffer などの強力な機能を使用できます。

• Cross-Origin Embedder Policy（COEP）と COOP を組み合わせて使用すると、クロスオリジン分離を有効にできます。

サイトへのトラフィックを暗号化する

暗号化の問題は、アプリケーションが転送中のデータを完全に暗号化していない場合に発生します。これにより、盗聴攻撃者がユーザーとアプリケーションのやり取りを把握できるようになります。

暗号化が不十分になるのは、HTTPS を使用していない場合、混合コンテンツの場合、Secure 属性（または __Secure 接頭辞）なしで Cookie を設定している場合、CORS 検証ロジックが緩い場合などです。

• HTTP Strict Transport Security（HSTS）を使用して、コンテンツを HTTPS 経由で一貫して配信します。

推奨される使用方法

1. ノンスベースの厳格な CSP を使用する {: #nonce-based-csp}

サーバーで HTML ページをレンダリングする場合は、ノンスベースの厳格な CSP を使用します。

サーバーサイドのすべてのリクエストに対して新しいスクリプト nonce 値を生成し、次のヘッダーを設定します。

サーバー構成ファイル

Content-Security-Policy:
  script-src 'nonce-{RANDOM1}' 'strict-dynamic' https: 'unsafe-inline';
  object-src 'none';
  base-uri 'none';

HTML でスクリプトを読み込むには、すべての <script> タグの nonce 属性を同じ {RANDOM1} 文字列に設定します。

index.html

<script nonce="{RANDOM1}" src="https://example.com/script1.js"></script>
<script nonce="{RANDOM1}">
  // Inline scripts can be used with the <code>nonce</code> attribute.
</script>

Google フォトは、ノンスベースの厳格な CSP の良い例です。DevTools を使用して、その使用方法を確認します。

2. ハッシュベースの厳格な CSP を使用する {: #hash-based-csp}

HTML を静的に配信またはキャッシュに保存する必要がある場合（シングルページ アプリケーションを構築している場合など）は、ハッシュベースの厳格な CSP を使用します。

サーバー構成ファイル

Content-Security-Policy:
  script-src 'sha256-{HASH1}' 'sha256-{HASH2}' 'strict-dynamic' https: 'unsafe-inline';
  object-src 'none';
  base-uri 'none';

HTML では、ハッシュベースのポリシーを適用するためにスクリプトをインライン化する必要があります。これは、ほとんどのブラウザが外部スクリプトのハッシュ化をサポートしていないためです。

index.html

<script>
...// your script1, inlined
</script>
<script>
...// your script2, inlined
</script>

外部スクリプトを読み込むには、オプション B: ハッシュベースのコンテンツ セキュリティ ポリシー レスポンス ヘッダー セクションの「ソーススクリプトを動的に読み込む」をご覧ください。

CSP 評価ツールは、CSP を評価するのに適したツールであると同時に、nonce ベースの厳格な CSP の優れた例でもあります。DevTools を使用して、その使用方法を確認します。

サポートされているブラウザ

CSP に関するその他の注意事項

• frame-ancestors ディレクティブは、信頼できないサイトがサイトを埋め込むことを許可した場合に発生するリスクであるクリックジャッキングからサイトを保護します。よりシンプルなソリューションが必要な場合は、X-Frame-Options を使用して読み込みをブロックできますが、frame-ancestors を使用すると、特定のオリジンのみを埋め込み元として許可する高度な構成が可能になります。
• CSP を使用して、サイトのすべてのリソースが HTTPS で読み込まれるようにしている可能性があります。現在では、ほとんどのブラウザが混合コンテンツをブロックするため、この問題はあまり重要ではなくなっています。
• CSP はレポート専用モードで設定することもできます。
• CSP をヘッダーとしてサーバーサイドで設定できない場合は、メタタグとして設定することもできます。メタタグに レポート専用モードを使用することはできません（ただし、これは変更される可能性があります）。

その他の情報

• 厳格なコンテンツ セキュリティ ポリシー（CSP）で XSS を軽減する
• コンテンツ セキュリティ ポリシー クイック リファレンス

推奨される使用方法

1. 危険な DOM シンクに Trusted Types を適用する CSP と Trusted Types ヘッダー:

   Content-Security-Policy: require-trusted-types-for 'script'

   現時点では、require-trusted-types-for ディレクティブで指定できる値は 'script' のみです。

   もちろん、Trusted Types を他の CSP ディレクティブと組み合わせることもできます。

上記の nonce ベースの CSP を Trusted Types と統合します。

Content-Security-Policy:
  script-src 'nonce-{RANDOM1}' 'strict-dynamic' https: 'unsafe-inline';
  object-src 'none';
  base-uri 'none';
  require-trusted-types-for 'script';


<aside class="note"><b>注: </b>  追加の <code>trusted-types</code> ディレクティブ（例: <code>trusted-types myPolicy</code>）を設定することで、許可される Trusted Types ポリシー名を制限できますが、これは必須ではありません。</aside>


  

    
ポリシーを定義する
    
ポリシー:
    
// Feature detection
if (window.trustedTypes && trustedTypes.createPolicy) {
  // Name and create a policy
  const policy = trustedTypes.createPolicy('escapePolicy', {
    createHTML: str => {
      return str.replace(/\/g, '>');
    }
  });
}
    
  
  

    
ポリシーを適用する
    
DOM にデータを書き込むときにポリシーを使用します。
    
// Assignment of raw strings are blocked by Trusted Types.
el.innerHTML = &#39;some string&#39;; // This throws an exception.</p>

<p>// Assignment of Trusted Types is accepted safely.
const escaped = policy.createHTML(&#39;<img src="x" onerror="alert(1)">&#39;);
el.innerHTML = escaped;  // &#39;&lt;img src=x onerror=alert(1)&gt;&#39;
    
require-trusted-types-for 'script' では、信頼できる型を使用することが要件です。文字列で危険な DOM API を使用すると、エラーが発生します。
  

サポートされているブラウザ

  
    
    
    
    
  
  
  
    
      
    
  
    
      
    
  
    
      
    
  
    
      
    
  
    
      
    
   

    
    
      
    
    
    
  
その他の情報

  
Trusted Types を使用して DOM ベースのクロスサイト スクリプティングの脆弱性を防止する
  
CSP: require-trusted-types-for - HTTP |
      MDN
  
CSP: trusted-types - HTTP |
      MDN
  
Trusted Types のデモ - DevTools インスペクタを開いて、何が起こっているかを確認する