回答編集履歴

3

XSS

2020/11/03 12:46

投稿

think49
think49

スコア18189

test CHANGED
@@ -1,3 +1,7 @@
1
+ ### HTMLパース前の文字列
2
+
3
+
4
+
1
5
  DOMになった時点でHTML文字実体参照などの**HTMLエスケープのパース処理は既に終わっています**。
2
6
 
3
7
  HTMLパース前の文字列を得るには、Fetch APIで `location.href` のbodyを取得して下さい。
@@ -10,4 +14,64 @@
10
14
 
11
15
 
12
16
 
17
+ ### XSS
18
+
19
+
20
+
21
+ > 質問のきっかけはXSS対応に必要なエスケープのことを調べていて、
22
+
23
+
24
+
25
+ それは質問文に書くべきだったと思います。
26
+
27
+ 私を含めて皆さん、XSSの観点で回答していません。
28
+
29
+
30
+
31
+ ---
32
+
33
+
34
+
35
+ JavaScriptに限定するなら、`innerHTML, outerHTML, insertAdjacentHTML` でHTML断片文字列をドキュメントに挿入する際、「任意の文字列」がエスケープされていない事でXSSが発生します。
36
+
37
+
38
+
39
+ - `<p>&lt;foo&gt; "bar"</p>` のように「<p>の内容」が「任意の文字列」なら、<> のエスケープが必要ですが、" はエスケープ不要です
40
+
41
+ - `<p title="<foo> &quot;bar&quot;">` のように、「"で括られた属性値」に「任意の文字列」を挿入する場合は " もエスケープしなければなりません
42
+
43
+
44
+
45
+ 質問文のHTMLは前者なので、" のエスケープは本来不要です。
46
+
47
+
48
+
49
+ また、次のようにHTML断片を挿入するAPIを使わずにDOMを変更した場合には**エスケープ処理そのものが不要**な事も分かります、
50
+
51
+
52
+
53
+ ```JavaScript
54
+
55
+ function sample (value) {
56
+
57
+ var p = document.createElement('p');
58
+
59
+ p.title = p.textContent = value;
60
+
61
+
62
+
63
+ return p;
64
+
65
+ }
66
+
67
+
68
+
69
+ var p = sample('<foo> "bar"'); // 任意の文字列を渡す
70
+
71
+ console.log(p.outerHTML); // <p title="<foo> &quot;bar&quot;">&lt;foo&gt; "bar"</p>
72
+
73
+ ```
74
+
75
+
76
+
13
77
  Re: webiroha さん

2

MDN

2020/11/03 12:46

投稿

think49
think49

スコア18189

test CHANGED
@@ -4,4 +4,10 @@
4
4
 
5
5
 
6
6
 
7
+ - [Fetch API - Web API | MDN](https://developer.mozilla.org/ja/docs/Web/API/Fetch_API)
8
+
9
+ - [Window.location - Web API | MDN](https://developer.mozilla.org/ja/docs/Web/API/Window/location)
10
+
11
+
12
+
7
13
  Re: webiroha さん

1

HTML文字実体参照

2020/11/01 02:44

投稿

think49
think49

スコア18189

test CHANGED
@@ -1,4 +1,4 @@
1
- DOMになった時点で**エスケープ処理は既に終わっています**。
1
+ DOMになった時点でHTML文字実体参照などの**HTMLエスケープのパース処理は既に終わっています**。
2
2
 
3
3
  HTMLパース前の文字列を得るには、Fetch APIで `location.href` のbodyを取得して下さい。
4
4