この記事では、iframe で生じる Blocked opening XXXXX in a new window because the request was made in a sandboxed frame whose 'allow-popups' permission is not set. エラーの解消方法について記載します。
Webサイトで広告やサードパーティコンテンツを表示する際、このようなエラーに遭遇したことはありませんか？
このエラーは、iframe内のコンテンツから新しいウィンドウ（タブ）を開こうとした際に発生します。
原因
このエラーの根本原因は、iframeのsandbox属性にあります。
<!-- これだとポップアップがブロックされる -->
<iframe src="https://example.com/ad" sandbox></iframe>sandbox属性が設定されたiframeでは、セキュリティ上の理由から様々な機能が制限されます。その中に「新しいウィンドウを開く機能」も含まれており、window.open()やtarget="_blank"によるリンクがブロックされます。
解決方法
解決は簡単です。sandbox属性にallow-popupsを追加するだけです。
<!-- これでポップアップが許可される -->
<iframe src="https://example.com/ad" sandbox="allow-popups"></iframe>複数の権限を設定する場合
他の機能も必要な場合は、スペース区切りで指定できます。
<iframe
src="https://example.com/ad"
sandbox="allow-popups allow-scripts allow-same-origin">
</iframe>よくある勘違い
- Next.jsやReactの問題ではない
フレームワークに関係なく、純粋にHTML側の設定問題です。 私の場合は Next.js サイトで生じたのですが、原因は単純でした。
- JavaScript側での対処は不可
iframe内のJavaScriptからは制御できません。
- 親ページ側での設定が必要
iframe要素を配置している側で対応する必要があります。
広告配信での注意点
広告サービスを利用する際は、多くの場合クリック時に外部サイトへ遷移するため、allow-popupsの設定が必須となります。
設定前にユーザビリティテストを行い、広告が正常にクリックできることを確認しましょう。
まとめ
sandboxed frameエラーが発生した場合は、iframe要素のsandbox属性にallow-popupsを追加することで解決できます。
広告は出てるのに、クリック数が少ないな？と感じたら、そもそもクリック可能な状態かも一度は試した方がいいです（一敗）。
コメント