tags: 2019年鐵人賽 、 JS

摘自MDN
It is not uncommon to see innerHTML used to insert text into a web page. There is potential for this to become an attack vector on a site, creating a potential security risk.

For that reason, it is recommended you not use innerHTML when inserting plain text; instead, use Node.textContent. This doesn't parse the passed content as HTML, but instead inserts it as raw text.

簡單來說使用 innerHTML 會使放入的內容解析為 HTML，帶有 HTML 屬性作用，如果用 <script> 寫一段攻擊是會有作用的。

而 textContent 是解析為純文字，比較安全。

來實驗一下

範例
HTML

<div id="test"></div>

JS

let test = document.querySelector("#test");
let linkText = "Link to page";
let maliciousCode = " style=\"color:red;\" ";

//直接放入帶有 HTML Tag 的字串
test.innerHTML = " <a "+ maliciousCode + ">" + linkText + "</a><br>";

//創建節點後，再放入字串
let linkTag = document.createElement('a');
linkTag.textContent = linkText;
linkTag.href = maliciousCode;
test.appendChild(linkTag);

innerHTML 的方式會讓瀏覽器將字串解析為 HTML 的屬性

再來試試放入一段 JS 程式碼
JS

let test = document.querySelector("#test");
let linkText = "Link to page";
let maliciousCode = "javascript:alert('test');\" style=\"color:red;\"";

test.innerHTML = " <a href=\" " + maliciousCode + " \"> " + linkText + "</a><br>";

let linkTag = document.createElement('a');
linkTag.textContent = linkText;
linkTag.href = maliciousCode;
test.appendChild(linkTag);

點擊第一個連結會執行跳出視窗動作，而點擊第二個連結不會執行

參考資料

stackoverflow