Question

目前，我正在学习API以及如何在动态网站中使用它们。我编写了一些示例网站，在那里我从API获取数据。

我一直在使用innerHTML将内容添加到我的页面。我的老师使用createElement textContent和appendChild在课程期间将内容添加到他的页面。当被问到时，他解释说innerHTML比textContent更加不安全，例如如果API不可靠或者注入了恶意代码，innerHTML可以编辑整个HTML，而不仅仅是带有textContent的内容。 ChaseMoskal也尝试在此评论中解释innerText vs innerHtml vs label vs text vs textContent vs outerText

我得到了基本的想法，但是，通过以下代码示例解释，我觉得两者都存在相同的安全问题。

var container = document.querySelector("#container");
var json1 = "Link to an image of my house";
var json2 = "Link to an image of my boat";
var jsonMaliciousCode = "maliciousCode3000"

// Create p element with innerHTML
container.innerHTML += "<a href=\""+maliciousCode+"\">" + json1 + "</a>";

// Create p element with textContent, href and appendChild
var innerExample = document.createElement('a');
innerExample.textContent = json2;
innerExample.href = maliciousCode;
container.appendChild(innerExample);

工作示例：https://jsfiddle.net/vh8hLhbj/4/

我没有得到或错过了什么？

Answer 1

当您使用innerHTML时，任何内容都可以在其中呈现，而您无法控制它。

检查以下示例。

＆＃13;

var codeSnippet = "<div style='height:100px;width:100px;background-color:red' onclick='window.console.log(\"Anything!!!\");'><a href='#'>Click Here</a></div>";

document.getElementById('unsafe').innerHTML = codeSnippet;
document.getElementById('safe').textContent = codeSnippet;

＆＃13;

<div id="unsafe">
</div>
<br>
<div id="safe">
</div>

＆＃13;

Answer 2

区别在于恶意代码的使用方式。使用以下代码可能会显示差异：

var container = document.querySelector("#container");
var json1 = "Link to an image of my house";
var json2 = "Link to an image of my boat";
var maliciousCode = "javascript:alert('test');\" xxx=\"maliciousCode3000\""

// Create p element with innerHTML
container.innerHTML += "<a href=\""+maliciousCode+"\">" + json1 + "</a>";

// Create p element with textContent, href and appendChild
var innerExample = document.createElement('a');
innerExample.textContent = json2;
innerExample.href = maliciousCode;
container.appendChild(innerExample);

这里是小提琴：https://jsfiddle.net/vh8hLhbj/6/

您将看到第一个示例显示弹出窗口，而第二个示例没有。想象一下，例如，是否有一些javascript访问cookie，或者观看键盘输入。

安全性：innerHTML与带有API的textContent

2 个答案: