teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問iframeのsandbox属性とフレーム禁止ヘッダーの関係

編集履歴

質問編集履歴

3

コード修正

2021/06/05 05:00

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -12,6 +12,8 @@
12
12
 
13
13
  <html lang="en">
14
14
 
15
+
16
+
15
17
  <head>
16
18
 
17
19
  <meta charset="UTF-8">
@@ -24,23 +26,29 @@
24
26
 
25
27
  </head>
26
28
 
29
+
30
+
27
31
  <body>
28
32
 
29
33
  <p>A. sandboxなし・リンク先：X-Frame-Options: DENY（正しく表示できる）</p>
30
34
 
31
- <iframe srcdoc="&lt;a href=&quot;https://example.com&quot; target=&quot;_blank&quot;&gt;twitter.com&lt;/a&gt;"></iframe>
35
+ <iframe
32
36
 
33
-
37
+ srcdoc="&lt;a href=&quot;https://twitter.com&quot; target=&quot;_blank&quot;&gt;twitter.com&lt;/a&gt;"></iframe>
38
+
39
+
34
40
 
35
41
  <p>B. sandboxあり・リンク先：X-Frame-Options: DENY（正しく表示できない）</p>
36
42
 
43
+ <iframe sandbox="allow-popups"
44
+
37
- <iframe sandbox="allow-popups" srcdoc="&lt;a href=&quot;https://twitter.com&quot; target=&quot;_blank&quot;&gt;twitter.com&lt;/a&gt;"></iframe>
45
+ srcdoc="&lt;a href=&quot;https://twitter.com&quot; target=&quot;_blank&quot;&gt;twitter.com&lt;/a&gt;"></iframe>
38
46
 
39
47
  <!--
40
48
 
41
49
  Chromeの場合の表示
42
50
 
43
-
51
+
44
52
 
45
53
  twitter.com はブロックされています
46
54
 
@@ -50,13 +58,17 @@
50
58
 
51
59
  -->
52
60
 
53
-
61
+
54
62
 
55
63
  <p>C. sandboxあり・リンク先：X-Frame-Optionsなし（正しく表示できる）</p>
56
64
 
65
+ <iframe sandbox="allow-popups"
66
+
57
- <iframe sandbox="allow-popups" srcdoc="&lt;a href=&quot;https://example.com&quot; target=&quot;_blank&quot;&gt;example.com&lt;/a&gt;"></iframe>
67
+ srcdoc="&lt;a href=&quot;https://example.com&quot; target=&quot;_blank&quot;&gt;example.com&lt;/a&gt;"></iframe>
58
68
 
59
69
  </body>
70
+
71
+
60
72
 
61
73
  </html>
62
74
 

2

補足追加

2021/06/05 05:00

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -8,45 +8,59 @@
8
8
 
9
9
  ```html
10
10
 
11
- <p>A. sandboxなし・リンク先：X-Frame-Options: DENY（正しく表示できる）</p>
11
+ <!DOCTYPE html>
12
12
 
13
- <iframe srcdoc="&lt;a href=&quot;https://example.com&quot; target=&quot;_blank&quot;&gt;twitter.com&lt;/a&gt;"></iframe>
13
+ <html lang="en">
14
14
 
15
+ <head>
15
16
 
17
+ <meta charset="UTF-8">
16
18
 
17
- <p>B. sandboxあり・リンク先：X-Frame-Options: DENY（正しく表示できない）</p>
19
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
18
20
 
19
- <iframe sandbox="allow-popups" srcdoc="&lt;a href=&quot;https://twitter.com&quot; target=&quot;_blank&quot;&gt;twitter.com&lt;/a&gt;"></iframe>
21
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
20
22
 
21
- <!--
23
+ <title>Document</title>
22
24
 
23
- Chromeの場合の表示
25
+ </head>
24
26
 
27
+ <body>
25
28
 
29
+ <p>A. sandboxなし・リンク先：X-Frame-Options: DENY（正しく表示できる）</p>
26
30
 
27
- twitter.com はブロックされています
31
+ <iframe srcdoc="&lt;a href=&quot;https://example.com&quot; target=&quot;_blank&quot;&gt;twitter.com&lt;/a&gt;"></iframe>
28
32
 
29
- twitter.com で接続が拒否されました。
33
+
30
34
 
31
- ERR_BLOCKED_BY_RESPONSE
35
+ <p>B. sandboxあり・リンク先：X-Frame-Options: DENY（正しく表示できない）</p>
32
36
 
33
- -->
37
+ <iframe sandbox="allow-popups" srcdoc="&lt;a href=&quot;https://twitter.com&quot; target=&quot;_blank&quot;&gt;twitter.com&lt;/a&gt;"></iframe>
34
38
 
39
+ <!--
35
40
 
41
+ Chromeの場合の表示
36
42
 
37
- <p>C. sandboxあり・リンク先：X-Frame-Optionsなし（正しく表示できる）</p>
43
+
38
44
 
45
+ twitter.com はブロックされています
46
+
47
+ twitter.com で接続が拒否されました。
48
+
49
+ ERR_BLOCKED_BY_RESPONSE
50
+
51
+ -->
52
+
53
+
54
+
55
+ <p>C. sandboxあり・リンク先：X-Frame-Optionsなし（正しく表示できる）</p>
56
+
39
- <iframe sandbox="allow-popups" srcdoc="&lt;a href=&quot;https://example.com&quot; target=&quot;_blank&quot;&gt;example.com&lt;/a&gt;"></iframe>
57
+ <iframe sandbox="allow-popups" srcdoc="&lt;a href=&quot;https://example.com&quot; target=&quot;_blank&quot;&gt;example.com&lt;/a&gt;"></iframe>
58
+
59
+ </body>
60
+
61
+ </html>
40
62
 
41
63
  ```
42
-
43
-
44
-
45
- ### 補足
46
-
47
- そもそも何を想定したhtmlなんだ、という実装そのもののツッコミもあるかと思いますが、
48
-
49
- あくまで事象理解のためのサンプルですので、挙動について理解できればと思っています。
50
64
 
51
65
 
52
66
 
@@ -60,6 +74,22 @@
60
74
 
61
75
 
62
76
 
77
+ ※リロードしても変わりませんでした。
78
+
79
+
80
+
63
81
  Safariだけ挙動が違いますが、この結果からフレーム禁止だけでなく、
64
82
 
65
83
  iframeから別タブで開いた際にsandboxの制約が引き継がれている模様です。
84
+
85
+
86
+
87
+
88
+
89
+
90
+
91
+ ### 補足
92
+
93
+ そもそも何を想定したhtmlなんだ、という実装そのもののツッコミもあるかと思いますが、
94
+
95
+ あくまで事象理解のためのサンプルですので、挙動について理解できればと思っています。

1

補足追加

2021/06/05 03:48

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -1,3 +1,5 @@
1
+ ### 解決したいこと
2
+
1
3
  下記のBにおいて、なぜ別窓表示にも関わらずiframe内で開いている扱いにされてしまうのでしょうか？
2
4
 
3
5
  sandbox属性を維持したままAと同じ挙動にする方法はありますか？
@@ -6,7 +8,7 @@
6
8
 
7
9
  ```html
8
10
 
9
- <p>A. sandboxなし・リンク先：がX-Frame-Options: DENY（正しく表示できる）</p>
11
+ <p>A. sandboxなし・リンク先：X-Frame-Options: DENY（正しく表示できる）</p>
10
12
 
11
13
  <iframe srcdoc="&lt;a href=&quot;https://example.com&quot; target=&quot;_blank&quot;&gt;twitter.com&lt;/a&gt;"></iframe>
12
14
 
@@ -40,6 +42,24 @@
40
42
 
41
43
 
42
44
 
45
+ ### 補足
46
+
43
47
  そもそも何を想定したhtmlなんだ、という実装そのもののツッコミもあるかと思いますが、
44
48
 
45
49
  あくまで事象理解のためのサンプルですので、挙動について理解できればと思っています。
50
+
51
+
52
+
53
+ ### 各ブラウザの挙動
54
+
55
+ Chrome → ブラウザのエラー画面（ブロック）
56
+
57
+ Firefox → ブラウザのエラー画面（ブロック）
58
+
59
+ Safari → Twitter画面（JavaScriptを使用できません。このブラウザではJavaScriptが無効に...）
60
+
61
+
62
+
63
+ Safariだけ挙動が違いますが、この結果からフレーム禁止だけでなく、
64
+
65
+ iframeから別タブで開いた際にsandboxの制約が引き継がれている模様です。