サードパーティCookieがブロックされて埋め込みが動かないときの対処

サードパーティCookieとは

Cookieには、今表示しているサイトと同じドメインが発行する「ファーストパーティCookie」と、ページ内に埋め込まれた別ドメイン(iframeや外部スクリプト)が発行する「サードパーティCookie」があります。

サードパーティCookieは広告のトラッキングに使われてきた経緯から、近年の主要ブラウザは標準で制限・ブロックする方向に進んでいます。SafariのITP、Firefoxの強化型トラッキング防止、Chromeの段階的な制限などがその例です。

問題なのは、トラッキングではない正当な埋め込み(認証付きウィジェット、決済、チャットなど)も、同じ仕組みでセッションを維持できなくなることです。

埋め込みが動かなくなる典型症状

iframe内のサービスにログインしてもすぐログアウト扱いになる、保存した設定が反映されない、決済フォームが「Cookieを有効にしてください」と表示する。これらはサードパーティCookieブロックの典型症状です。

ファーストパーティ環境(そのサービスを直接開いたとき)では正常に動くのに、別サイトのiframe内に置いた途端に動かなくなるのが特徴です。逆に言えば、直接開くと正常なら原因の切り分けがしやすくなります。

シークレットウィンドウや別ブラウザで挙動が変わるかどうかも、Cookie設定起因かを見分ける手がかりになります。

症状別チェック表

サードパーティCookieがブロックされて埋め込みが動かないは、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。

確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。

• 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
• 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
• 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
• 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する

原因を切り分ける手順

「埋め込みが壊れている」のか「Cookieがブロックされているだけ」なのかを切り分けると、対応の方向が定まります。

1. 埋め込み元サービスのURLを直接ブラウザで開き、単体で正常に動くか確認する
2. 開発者ツールのConsoleやNetworkで、Cookieが拒否された旨の警告が出ていないか見る
3. ブラウザの設定でサードパーティCookieの扱い(ブロック/許可)を確認する
4. 別ブラウザやシークレットウィンドウで再現するか試し、設定依存かを判定する
5. 埋め込みサービス側にiframe対応の公式ガイドがないか確認する

回避策と現実的な落としどころ

サードパーティCookieのブロックはブラウザのプライバシー方針に基づくもので、埋め込む側が一方的に解除することはできません。提供サービス側が Storage Access API への対応や別方式の認証を用意しているかが鍵になります。

実務上は、どうしてもセッション維持が必要な機能はiframe埋め込みをやめ、新しいタブで本家サービスを開くリンクに切り替えるのが堅実です。レビュー用ページでは、埋め込みが効かない旨を注記しておくと混乱を避けられます。

閲覧側の環境差が大きいため、特定のブラウザでだけ動くことを前提にしない設計が無難です。

確認共有の場面での扱い方

クライアントに共有したHTMLで埋め込みが動かないとき、それが制作物の不具合なのか相手のブラウザ設定なのかが分からないと、原因究明が長引きます。共有前に複数ブラウザで開いて挙動を控えておくと、報告を受けたときの切り分けが速くなります。

ギガサイト便はHTMLやZIPを同じURLのまま差し替えられるため、埋め込みをリンク方式に変えた版を素早く差し替えて再確認してもらえます。アクセスログで誰が見たかを確認できるので、環境差による再現待ちの調整もしやすくなります。