Javascript 安全性：innerHTML与带API的textContent

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

我一直在使用

innerHTML

将内容添加到我的页面。 我的老师在上课时使用

createElement

textContent

和

appendChild

将内容添加到他的页面中。 当被问及时，他解释说innerHTML比textContent更不安全，例如，如果API不可靠或注入了恶意代码，innerHTML可以编辑整个HTML，而不仅仅是包含textContent的内容。那么ChaseMoskal是否在这篇评论中试图解释

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

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);

var container=document.querySelector（“容器”）；
var json1=“链接到我家的图像”；
var json2=“链接到我的船的图像”；
var jsonMaliciousCode=“恶意代码3000”
//使用innerHTML创建p元素
container.innerHTML+=“”；
//使用textContent、href和appendChild创建p元素
var innerExample=document.createElement（'a'）；
innerExample.textContent=json2；
innerExample.href=恶意代码；
appendChild（innerExample）；

工作示例：

---

什么是我没有得到或遗漏的？

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

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);

var container=document.querySelector（“容器”）；
var json1=“链接到我家的图像”；
var json2=“链接到我的船的图像”；
var maliciousCode=“javascript:alert（'test'）；\“xxx=\“maliciousCode3000”
//使用innerHTML创建p元素
container.innerHTML+=“”；
//使用textContent、href和appendChild创建p元素
var innerExample=document.createElement（'a'）；
innerExample.textContent=json2；
innerExample.href=恶意代码；
appendChild（innerExample）；

这是小提琴：

---

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

当您使用

innerHTML

时，任何东西都可以在其中呈现，而您无法控制它

检查以下示例

var codeSnippet=”“；
document.getElementById（“不安全”）.innerHTML=codeSnippet；
document.getElementById（'safe'）。textContent=codeSnippet；

如果你想让用户设置元素的href，你可能需要至少验证协议，它不仅不安全，而且速度慢，破坏了你的DOM。在你的例子中，你以同样的方式使用textContent和innerHTML，这与人们使用textContent编写的方式不同，这使你很难理解理解您的答案。（请参考我的示例，因为这两个示例都以适合函数的不同方式使用相同的内容）很好的例子！我可以从视觉上看到两者之间的差异，但是，从逻辑上看，当我看到生成的HTML时，我正在努力。两个锚定标记都有相同的href，但行为不同。为什么呢？

它们没有相同的href，尽管：第一个是：

javascript:alert（'test'））第二个是：
javascript:alert（'test'）；“xxx=”maliciousCode3000“
第二个是不正确的javascript，并且会抛出错误。我现在可以看到区别了——使用inspector工具查看代码，两个锚看起来很相似。通过复制粘贴到这里，它显示了真正的差异。现在我想知道你是否可以告诉我为什么.href显示\“as”？这将非常有用！因为当你使用.href时，你基本上是在告诉浏览器：我在那里输入的任何内容都会进入“href”“属性。因此，浏览器对变量中的所有文本进行编码，以适合属性内部。在属性中安全显示双引号的唯一方法是使用编码字符，即“。您可以尝试其中的任何html代码，它将使用&version进行编码。这实际上就是你最初提出的为什么这样更安全的问题的答案：其中的任何代码都不会被解释，而是显示为纯文本。非常感谢！我现在尝试将maliciousCode中的引号更改为“但是href没有显示双引号，如您所述？”？