Q&A
リンクをクリックすると、という意味ですよね？
解決したいこと
下記のBにおいて、なぜ別窓表示にも関わらずiframe内で開いている扱いにされてしまうのでしょうか？
sandbox属性を維持したままAと同じ挙動にする方法はありますか？
html
1<!DOCTYPE html> 2<html lang="en"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <title>Document</title> 9</head> 10 11<body> 12 <p>A. sandboxなし・リンク先：X-Frame-Options: DENY（正しく表示できる）</p> 13 <iframe 14 srcdoc="<a href="https://twitter.com" target="_blank">twitter.com</a>"></iframe> 15 16 <p>B. sandboxあり・リンク先：X-Frame-Options: DENY（正しく表示できない）</p> 17 <iframe sandbox="allow-popups" 18 srcdoc="<a href="https://twitter.com" target="_blank">twitter.com</a>"></iframe> 19 <!-- 20 Chromeの場合の表示 21 22 twitter.com はブロックされています 23 twitter.com で接続が拒否されました。 24 ERR_BLOCKED_BY_RESPONSE 25 --> 26 27 <p>C. sandboxあり・リンク先：X-Frame-Optionsなし（正しく表示できる）</p> 28 <iframe sandbox="allow-popups" 29 srcdoc="<a href="https://example.com" target="_blank">example.com</a>"></iframe> 30</body> 31 32</html>
各ブラウザの挙動
Chrome → ブラウザのエラー画面（ブロック）
Firefox → ブラウザのエラー画面（ブロック）
Safari → Twitter画面（JavaScriptを使用できません。このブラウザではJavaScriptが無効に...）
※リロードしても変わりませんでした。
Safariだけ挙動が違いますが、この結果からフレーム禁止だけでなく、
iframeから別タブで開いた際にsandboxの制約が引き継がれている模様です。
補足
そもそも何を想定したhtmlなんだ、という実装そのもののツッコミもあるかと思いますが、
あくまで事象理解のためのサンプルですので、挙動について理解できればと思っています。
肝心なトリガーが抜けていましたね。失礼しました。
仰る通りiframe内のaタグクリック時についてとなります。
ひとつ目のhref属性が違うのではないかな、と感じていますが、いかがですか？
Aのリンク部分は下記のようになっていますのであっているかと思います。
<a href="https://example.com" target="_blank">twitter.com</a>
そうなんですか？ そのリンク先の https://example.com は、当方で確認した限りでは x-frame-options ヘッダがないようでしたので比較にならなそうな……？
現象の要点はつかめるから、いいのかな？ 些末なことを言ってすみませんでした。
ありがとうございます、ご指摘の意味を理解しました。
完全に間違えておりましたので修正しました。
回答1件
0
ベストアンサー
調べたところ、sandbox属性は新タブに引き継がれる仕様ということがわかりました。
投稿2021/06/05 13:02
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
