質問編集履歴
2
エスケープ前の値を記載し流れを分かりやすく修正しました
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
|
|
14
14
|
|
|
15
15
|
### タイミング
|
|
16
|
-
##### ➀ データベースに保存する際にエスケープした値にしておく
|
|
16
|
+
##### ➀ データベースに保存する際にエスケープした値にしておく
|
|
17
17
|
```PHP
|
|
18
18
|
<?php
|
|
19
19
|
$data = ["comment" => "<p>hello</p>"];
|
|
@@ -26,16 +26,16 @@
|
|
|
26
26
|
##### ➁ データベースには素のまま保存し、PHP から `echo` する際にエスケープする
|
|
27
27
|
```PHP
|
|
28
28
|
$stmt = $pdo->query("SELECT * FROM comment_table WHERE id = 1");
|
|
29
|
-
$data = $stmt->fetch(PDO::FETCH_ASSOC);
|
|
29
|
+
$data = $stmt->fetch(PDO::FETCH_ASSOC); // この data は ["id" => 1, "comment" => "<p>hello</p>"] のような値
|
|
30
30
|
$data["comment"] = htmlspecialchars($data["comment"], ENT_QUOTES, "UTF-8"); // ➁はここでエスケープ
|
|
31
31
|
echo json_encode($data);
|
|
32
32
|
```
|
|
33
33
|
|
|
34
|
-
##### ③ データベースには素のまま保存し、PHP から `echo` する際も素のまま `echo` し、JSON を HTML として描画する際に JavaScript でエスケープする
|
|
34
|
+
##### ③ データベースには素のまま保存し、PHP から `echo` する際も素のまま `echo` し、JSON を HTML として描画する際に JavaScript でエスケープする
|
|
35
35
|
```JavaScript
|
|
36
36
|
fetch('getComment.php')
|
|
37
37
|
.then(response => response.json())
|
|
38
|
-
.then(data => {
|
|
38
|
+
.then(data => { // この data は {"id": 1, "comment": "<p>hello</p>"} のような値
|
|
39
39
|
addNewComment(data);
|
|
40
40
|
})
|
|
41
41
|
.catch(error => {
|
1
③を➂に修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
const ulElement = document.querySelector('.comment-list');
|
|
46
46
|
const liElement = document.createElement('li');
|
|
47
47
|
liElement.className = 'comment';
|
|
48
|
-
liElement.textContent = escapeHtml(data); //
|
|
48
|
+
liElement.textContent = escapeHtml(data); // ➂はここでエスケープ
|
|
49
49
|
ulElement.appendChild(liElement);
|
|
50
50
|
}
|
|
51
51
|
|