クリックジャッキングは、信頼できる身近なサイトのように見えるサイト上のリンクや UI 要素をクリックするようユーザーをだます悪意のある攻撃です。これは通常、<iframe> を使用して信頼できるサイトの一部またはすべてを悪意のあるサイトに埋め込むことで実現されます。
X-Frame-Options（XFO）ヘッダーと Content-Security-Policy（CSP）ヘッダーの frame-ancestors ディレクティブを使用すると、サイトを <iframe> 内に埋め込む方法を制御することで、クリックジャッキング攻撃を軽減できます。
Lighthouse 監査が失敗する仕組み
XFO ヘッダーが SAMEORIGIN または DENY で設定されているか、CSP ヘッダーに frame-ancestors ディレクティブが設定されている場合、監査は合格となります。これらのフレーム制御ポリシーのどちらも構成されていない場合、監査は失敗します。
クリックジャッキングの軽減にフレーム制御ポリシーを設定する方法
最初のドキュメント リクエストの HTTP ヘッダーにフレーム制御ポリシーを設定する必要があります。<meta> 要素に設定した場合、X-Frame-Options ヘッダーと Content-Security-Policy の frame-ancestors ディレクティブは機能しません。
XFO ヘッダー
XFO ヘッダーに DENY または SAMEORIGIN を設定すると、クリックジャッキング攻撃を軽減できます。
X-Frame-Options: SAMEORIGIN
X-Frame-Options: DENY
SAMEORIGIN ディレクティブは、すべての祖先フレームがページ自体と同じオリジンを共有している場合にのみ、ページを表示できるようにします。一方、DENY ディレクティブは、親フレームのオリジンに関係なく、ページがフレームに表示されないようにします。
CSP ヘッダー
CSP ヘッダー内の frame-ancestors ディレクティブは、特定のページを <frame>、<iframe>、<object>、<embed> に埋め込むことができるサイトを定義します。XFO と同様に、CSP frame-ancestors ディレクティブを self または none に設定することで、クリックジャッキング攻撃を軽減できます。
Content-Security-Policy: frame-ancestors 'self';
Content-Security-Policy: frame-ancestors 'none';
ただし、frame-ancestors ディレクティブは、ページを埋め込む可能性のある特定の親ソースを設定できるため、XFO よりも柔軟性があります。
Content-Security-Policy: frame-ancestors 'self' https://example.com;