CSP frame-ancestorsエラーとトラブルシューティング：意図しない埋め込み拒否を防ぐ

HTTPヘッダーの Content-Security-Policy (CSP) は、ウェブページが読み込むことのできるリソース（スクリプト、スタイルシート、画像、フォントなど）の配信元を制限することで、クロスサイトスクリプティング (XSS) などの攻撃を防ぐための重要なセキュリティ機能です。

この CSP ディレクティブの一つである frame-ancestors は、ウェブページを <frame>, <iframe>, <object>, <embed>, <applet> タグ内に埋め込むことを許可する配信元（オリジン）を指定します。つまり、あなたのウェブページが、どのウェブサイトのフレーム内で表示されることを許可するかを制御します。

frame-ancestors ディレクティブを使用することで、クリックジャッキングといった、悪意のあるウェブサイトがあなたのウェブページを不可視のフレーム内に埋め込み、ユーザーに意図しない操作をさせる攻撃を防ぐことができます。

frame-ancestors の構文

Content-Security-Policy: frame-ancestors <source> [<source> ...]

<source> には、許可する配信元を指定します。複数の配信元を指定する場合は、スペースで区切ります。指定できる値には以下のようなものがあります。

• 'none': どのオリジンからの埋め込みも許可しません。つまり、自身のウェブページをフレーム内に埋め込むことを完全に禁止します。
• '*': すべてのオリジンからの埋め込みを許可します。ただし、セキュリティ上のリスクが高いため、特別な理由がない限り使用は推奨されません。
• <origin>: 特定のオリジン（例: https://example.com, http://localhost:8080）からの埋め込みを許可します。
• 'self': 自サイトのオリジンからの埋め込みを許可します。スキーム（http/https）、ホスト、ポートが完全に一致する必要があります。

例

• 一切の埋め込みを禁止する場合：

  Content-Security-Policy: frame-ancestors 'none'
  

• https://example.com と https://trusted-site.net からの埋め込みを許可する場合：

  Content-Security-Policy: frame-ancestors https://example.com https://trusted-site.net
  

• 自サイトからの埋め込みのみを許可する場合：

  Content-Security-Policy: frame-ancestors 'self'
  

• 古いブラウザの中には frame-ancestors をサポートしていないものもあります。そのようなブラウザでは、代わりに非推奨の X-Frame-Options ヘッダーが部分的に機能する場合がありますが、セキュリティの観点からは CSP の利用が推奨されます。
• CSP ヘッダーは、ウェブサーバーの設定や、サーバーサイドのスクリプトを通じてレスポンスに含めて送信されます。
• frame-ancestors は、トップレベルのドキュメントに対してのみ有効です。iframe 内のドキュメントに設定しても効果はありません。

---

CSP: frame-ancestors の一般的なエラーとトラブルシューティング

Content-Security-Policy (CSP) の frame-ancestors ディレクティブは、ウェブページがどのオリジンに埋め込まれることを許可するかを制御する重要なセキュリティ機能ですが、設定ミスや理解不足によって様々なエラーや問題が発生することがあります。以下に、よくあるエラーとそのトラブルシューティングについて解説します。

意図しない埋め込みの拒否 (Blocked a frame with origin "..." from accessing a cross-origin frame.)

• トラブルシューティング
  
  • 許可するオリジンを確認
    埋め込みを許可したいウェブサイトのオリジン（スキーム、ホスト、ポート）が frame-ancestors ディレクティブに正しく記述されているか確認してください。https://example.com と http://example.com は異なるオリジンとして扱われます。
  • サブドメインの扱い
    サブドメイン（例: sub.example.com）からの埋め込みを許可したい場合は、明示的に記述する必要があります。ワイルドカード (*.example.com) は frame-ancestors ではサポートされていません。
  • 'self' の確認
    自サイトからの埋め込みを許可する場合は 'self' を指定しますが、スキームやポートが一致しているか確認してください。例えば、HTTPS で提供しているページで HTTP のオリジンを 'self' として指定しても許可されません。
  • テスト環境と本番環境
    テスト環境と本番環境でオリジンが異なる場合、それぞれの環境に合わせて CSP を設定する必要があります。
• 原因
  frame-ancestors に許可されていないオリジンからの埋め込みを試みた場合に発生します。ブラウザのデベロッパーツール（コンソール）に、どのオリジンからの埋め込みが拒否されたかを示すエラーメッセージが表示されます。

全ての埋め込みを拒否してしまう (frame-ancestors 'none')

• トラブルシューティング
  
  • 設定の見直し
    本当に全ての埋め込みを禁止する必要があるのか再検討してください。
  • 必要なオリジンを追加
    もし自サイト内や特定の連携サイトからの埋め込みが必要な場合は、それらのオリジンを frame-ancestors に追加してください。
• 原因
  frame-ancestors に 'none' を設定すると、どのオリジンからの埋め込みも許可されません。意図せずこの設定をしてしまうと、自身のサイト内のフレームや、連携している他のサイトからの埋め込みもブロックされてしまいます。

'*' の使用によるセキュリティリスク

• トラブルシューティング
  
  • '*' の削除
    極力 '*' の使用は避け、許可する必要のある特定のオリジンのみを指定するようにしてください。
  • 代替案の検討
    全ての埋め込みを許可する必要がある状況は稀です。もしそのような要件がある場合は、他のセキュリティ対策と組み合わせて慎重に検討する必要があります。
• 原因
  frame-ancestors '*' は全てのオリジンからの埋め込みを許可するため、クリックジャッキングなどの攻撃に対して脆弱になります。

CSP ヘッダーの記述ミス

• トラブルシューティング
  
  • 構文の確認
    スペースの入れ方、セミコロンの有無など、CSP ヘッダーの構文が正しいか確認してください。複数のディレクティブを記述する場合は、セミコロンで区切る必要があります。
  • ヘッダーの送信確認
    サーバーが正しく CSP ヘッダーを送信しているか、ブラウザのデベロッパーツール（Network タブ）で確認してください。
  • CSP 検証ツールの利用
    CSP の構文を検証してくれるオンラインツールなどを利用して、記述ミスがないか確認するのも有効です。
• 原因
  CSP ヘッダーの構文が間違っていると、ブラウザが正しく解釈できず、frame-ancestors ディレクティブが意図通りに機能しないことがあります。

ブラウザのサポート状況

• トラブルシューティング
  
  • ブラウザのアップデート
    可能な限り最新のブラウザを使用するようにユーザーに促してください。
  • 代替手段の検討
    サポートされていないブラウザに対しては、非推奨の X-Frame-Options ヘッダーを併用することを検討するかもしれませんが、セキュリティの観点からは CSP の利用が推奨されます。X-Frame-Options はより制限が強く、柔軟な設定ができません。
• 原因
  古いブラウザの中には frame-ancestors をサポートしていないものがあります。

レポート機能の活用 (report-uri, report-to)

• トラブルシューティング
  
  • レポート機能の設定
    report-uri ディレクティブまたは report-to ディレクティブを設定し、CSP 違反レポートを収集するようにしてください。これにより、意図しないブロックや潜在的な攻撃を早期に発見し、対応することができます。
• 原因
  CSP 違反が発生しても、レポート機能を設定していないと、どのような埋め込みがブロックされたのかを把握することが困難です。

1. ブラウザのデベロッパーツール (Console, Network タブ) を確認する
   エラーメッセージや CSP ヘッダーの送信状況を確認します。
2. CSP の設定を確認する
   サーバー側の設定や、レスポンスヘッダーを生成するコードを確認します。
3. 許可するオリジンが正しいか確認する
   スキーム、ホスト、ポートが正確に一致しているか確認します。
4. 構文ミスがないか確認する
   スペース、セミコロンなどの記述に誤りがないか確認します。
5. テスト環境で検証する
   本番環境に影響を与えないように、事前にテスト環境で CSP の設定を検証します。
6. CSP 検証ツールを利用する
   オンラインの CSP 検証ツールなどを活用して、設定の妥当性を確認します。

---

CSP: frame-ancestors のプログラミング例

frame-ancestors ディレクティブは、HTTP レスポンスヘッダーとしてサーバーから送信されるため、プログラミングとしては主にサーバーサイドの実装に関わってきます。以下に、いくつかの一般的なサーバーサイド環境での設定例を示します。

Apache HTTP Server の設定 (.htaccess または httpd.conf)

Apache サーバーを使用している場合、.htaccess ファイルまたはサーバー設定ファイル (httpd.conf) を編集して CSP ヘッダーを設定できます。

<IfModule mod_headers.c>
  # 自サイトからの埋め込みのみを許可
  Header set Content-Security-Policy "frame-ancestors 'self'"

  # example.com と trusted-site.net からの埋め込みを許可
  # Header set Content-Security-Policy "frame-ancestors https://example.com https://trusted-site.net"

  # 一切の埋め込みを禁止
  # Header set Content-Security-Policy "frame-ancestors 'none'"
</IfModule>

解説

• Header set Content-Security-Policy "...": Content-Security-Policy ヘッダーを設定し、その値として frame-ancestors ディレクティブを指定します。
• <IfModule mod_headers.c>: mod_headers モジュールが有効になっている場合にのみ、Header ディレクティブを実行します。

Nginx の設定 (nginx.conf)

Nginx を使用している場合は、サーバー設定ファイル (nginx.conf) の http, server, または location ブロック内で add_header ディレクティブを使用して CSP ヘッダーを設定します。

http {
  server {
    location / {
      # 自サイトからの埋め込みのみを許可
      add_header Content-Security-Policy "frame-ancestors 'self'";

      # example.com と trusted-site.net からの埋め込みを許可
      # add_header Content-Security-Policy "frame-ancestors https://example.com https://trusted-site.net";

      # 一切の埋め込みを禁止
      # add_header Content-Security-Policy "frame-ancestors 'none'";
    }
  }
}

解説

• add_header Content-Security-Policy "...": Content-Security-Policy ヘッダーを追加し、その値として frame-ancestors ディレクティブを指定します。

Node.js (Express.js) の例

Node.js の Express.js フレームワークを使用している場合は、ミドルウェアを使って HTTP ヘッダーを設定できます。

const express = require('express');
const app = express();

app.use((req, res, next) => {
  // 自サイトからの埋め込みのみを許可
  res.setHeader('Content-Security-Policy', "frame-ancestors 'self'");

  // example.com と trusted-site.net からの埋め込みを許可
  // res.setHeader('Content-Security-Policy', "frame-ancestors https://example.com https://trusted-site.net");

  // 一切の埋め込みを禁止
  // res.setHeader('Content-Security-Policy', "frame-ancestors 'none'");

  next();
});

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(3000, () => {
  console.log('Server listening on port 3000');
});

解説

• next(): 次のミドルウェアまたはルートハンドラーに処理を移します。
• res.setHeader('Content-Security-Policy', "...");: レスポンスヘッダーに Content-Security-Policy を設定し、frame-ancestors ディレクティブを指定します。
• app.use((req, res, next) => { ... });: すべてのリクエストに対して実行されるミドルウェアを定義します。

Python (Flask) の例

Python の Flask フレームワークを使用している場合は、レスポンスオブジェクトのヘッダーを設定できます。

from flask import Flask, make_response

app = Flask(__name__)

@app.route('/')
def index():
    response = make_response("Hello World!")
    # 自サイトからの埋め込みのみを許可
    response.headers['Content-Security-Policy'] = "frame-ancestors 'self'"

    # example.com と trusted-site.net からの埋め込みを許可
    # response.headers['Content-Security-Policy'] = "frame-ancestors https://example.com https://trusted-site.net"

    # 一切の埋め込みを禁止
    # response.headers['Content-Security-Policy'] = "frame-ancestors 'none'"

    return response

if __name__ == '__main__':
    app.run(debug=True)

解説

• response.headers['Content-Security-Policy'] = "...": レスポンスヘッダーの Content-Security-Policy を設定し、frame-ancestors ディレクティブを指定します。
• make_response("Hello World!"): レスポンスオブジェクトを作成します。

ブラウザの挙動

上記のようにサーバーサイドで Content-Security-Policy ヘッダーを設定すると、ブラウザはレスポンスを受け取った際にこのヘッダーを解析し、frame-ancestors ディレクティブに従って、ウェブページがフレーム内で表示されることを許可または拒否します。

• 'none' の場合
  どのオリジンからの埋め込みも許可されないため、自身のウェブページをフレーム内で表示しようとしてもブロックされます。
• 許可されていないオリジンからの埋め込み
  ブラウザは、frame-ancestors にリストされていないオリジンからの埋め込みを拒否し、通常はコンソールにエラーメッセージを出力します。埋め込みは表示されません。
• 許可されたオリジンからの埋め込み
  ブラウザは、frame-ancestors にリストされているオリジンからの <frame>, <iframe>, <object>, <embed>, <applet> タグによる埋め込みを許可します。

---

CSP: frame-ancestors の代替的なプログラミング方法

通常、frame-ancestors ディレクティブは HTTP レスポンスヘッダーとしてサーバーサイドで設定されますが、状況によっては他の方法で同様の目的を達成したり、補完的な対策を講じたりすることがあります。以下に、いくつかの代替的なアプローチと補完的な方法を説明します。

X-Frame-Options ヘッダー (非推奨)

• プログラミング例 (サーバーサイド)
  

  <IfModule mod_headers.c>
    # 自サイトからの埋め込みのみを許可 (X-Frame-Options)
    Header set X-Frame-Options "SAMEORIGIN"
  
    # 全ての埋め込みを拒否 (X-Frame-Options)
    # Header set X-Frame-Options "DENY"
  </IfModule>
  

  http {
    server {
      location / {
        # 自サイトからの埋め込みのみを許可 (X-Frame-Options)
        add_header X-Frame-Options "SAMEORIGIN";
  
        # 全ての埋め込みを拒否 (X-Frame-Options)
        # add_header X-Frame-Options "DENY";
      }
    }
  }
  

  // Node.js (Express.js)
  res.setHeader('X-Frame-Options', 'SAMEORIGIN');
  

  # Python (Flask)
  response.headers['X-Frame-Options'] = 'SAMEORIGIN'
  

• 注意点
  X-Frame-Options は CSP の frame-ancestors よりも機能が限定的であり、複数のオリジンを許可するなどの柔軟な設定ができません。また、ALLOW-FROM は標準化されておらず、ブラウザのサポートも一貫していません。セキュリティの観点からは、可能な限り Content-Security-Policy と frame-ancestors を使用することが推奨されます。
• 設定値
  
  • DENY: どのオリジンからの埋め込みも拒否します。
  • SAMEORIGIN: 自サイトのオリジンからの埋め込みのみを許可します。
  • ALLOW-FROM <origin>: 指定したオリジンからの埋め込みのみを許可します（一部の古いブラウザでのみサポート）。
• 説明
  X-Frame-Options は、ウェブページが <frame>, <iframe>, <object> タグ内に埋め込まれるのを制御するために以前使用されていた HTTP ヘッダーです。CSP の frame-ancestors よりも制限が強く、柔軟な設定ができません。

JavaScript によるフレーム制御 (クライアントサイド)

• 注意点
  この方法はクライアントサイドの JavaScript に依存するため、JavaScript が無効になっている環境では効果がありません。また、リダイレクトが発生するため、ユーザー体験が損なわれる可能性があります。サーバーサイドでの frame-ancestors の設定がより堅牢な対策となります。
• 実装
  

  if (window.top !== window.self) {
    // 自身のページがフレーム内で表示されている場合
    window.top.location.href = window.self.location.href; // トップフレームにリダイレクト
    // または、エラーメッセージを表示するなど他の処理を行う
  }
  

• 説明
  クライアントサイドの JavaScript を使用して、自身のウェブページがフレーム内で表示されているかどうかを検出し、その場合にリダイレクトなどの処理を行うことができます。

Content-Security-Policy レポート機能の活用 (report-uri, report-to)

• プログラミング
  レポートを受け取るサーバーサイドのエンドポイント (/csp-report など) を実装し、受信したレポートをログに記録したり、分析したりする処理を記述する必要があります。
• 設定例 (サーバーサイド)
  

  <IfModule mod_headers.c>
    Header set Content-Security-Policy "frame-ancestors 'self'; report-uri /csp-report"
    # または
    # Header set Content-Security-Policy "frame-ancestors 'self'; report-to default; report-uri /csp-report"
  </IfModule>
  

  http {
    server {
      location / {
        add_header Content-Security-Policy "frame-ancestors 'self'; report-uri /csp-report";
        # または
        # add_header Content-Security-Policy "frame-ancestors 'self'; report-to default; report-uri /csp-report";
      }
    }
  }
  

• 説明
  frame-ancestors ディレクティブに違反する埋め込み試行があった場合に、ブラウザにレポートを送信させるように設定できます。これにより、意図しない埋め込みを検知し、状況を把握することができます。

<iframe> の sandbox 属性

• 注意点
  sandbox 属性は、自身のページ内で使用する iframe のセキュリティを強化するものであり、外部サイトからの埋め込みを制御する frame-ancestors とは目的が異なります。
• 例
  

  <iframe src="some-content.html" sandbox="allow-scripts allow-same-origin"></iframe>
  

• 説明
  自身のウェブページ内で <iframe を使用する場合、sandbox 属性を使用して iframe 内のコンテンツに様々な制限をかけることができます。これにより、iframe 内の悪意のあるコードが親ページに影響を与えるのを防ぐことができますが、これは主に埋め込む側の制御であり、外部サイトからの埋め込みを防ぐものではありません。

frame-ancestors の主な代替手段としては、非推奨の X-Frame-Options ヘッダーがありますが、機能や柔軟性の面で劣ります。クライアントサイドの JavaScript によるフレーム制御は、JavaScript が無効な場合に効果がなく、ユーザー体験にも影響を与える可能性があります。

最も推奨される方法は、やはりサーバーサイドで Content-Security-Policy ヘッダーと frame-ancestors ディレクティブを適切に設定することです。レポート機能 (report-uri, report-to) を活用することで、セキュリティポリシー違反を監視し、より安全なウェブアプリケーションを構築することができます。