进行 XSS 攻击和如何防御

跨站脚本攻击（XSS 攻击）是 Web 开发中最危险的攻击之一。以下是它们的工作原理以及防御方法。

XSS 攻击

跨站脚本攻击就是在另一个用户的计算机上运行带有恶意的 JS 代码。假如我们的程序没有对这些恶意的脚本进行防御的话，他们就会由我们的页面注入到我们的服务器数据库中，从而其他用户在访问我们的网站是就会收到这些脚本的攻击。接下来我们来看看这些恶意代码是何时注入的。

XSS 攻击的例子

首先我们先看一下如下的代码：

<section id="user-input"><form><div class="form-control"><label for="user-message">Your Message</label><textarea id="user-message" name="user-message"></textarea></div><div class="form-control"><label for="message-image">Message Image</label><input type="text" id="message-image" name="message-image" /></div><button type="submit">Send Message</button></form>
</section>
<section id="user-messages"><ul></ul>
</section>

// 提交表单数据后渲染对应的数据
function renderMessages() {let messageItems = "";for (const message of userMessages) {messageItems = `${messageItems}<li class="message-item"><div class="message-image"><img src="${message.image}" alt="${message.text}"></div><p>${message.text}</p></li>`;}userMessagesList.innerHTML = messageItems;
}

上述例子中我们只是采用了静态页面来呈现XSS攻击，即没有服务器的支持，所以我们只能自己攻击自己。

上述的例子中我们可以看到用户当表单添加消息后最终使用innerHtml进行页面元素的渲染。这样我们的页面最后渲染出的<li></li>元素里面会包含图片和其他一些文本数据。

现在我们设想一下，假如我们在textarea中输入如下的代码：

在这里插入图片描述
并且提交表单数据后，我们提交表单数据后，我们可以查看一下页面的列表元素：

我们可以看到页面没有报错和任何任何报警，所以注入的脚本代码实际上并没有执行。因为现代浏览器可以保护您免受这种非常基本形式的 XSS 攻击。通过 innerHTML“注入”的<script>元素不会被浏览器执行！

所以上述的注入攻击只是针对于低版本的浏览器。

我们还可以滥用 <img>的src属性设置为某些用户输入的注入攻击。因为上述的图片渲染是通过简单的字符串进行渲染的。

<img src="${message.image}" alt="${message.text}">

如果我们操纵 message.image 使其实际上完全改变要渲染的元素会怎么样？不仅仅是它的 src。

用户可以在表单（图像 URL）中输入以下内容来实现此目的：
在这里插入图片描述

这可能看起来很奇怪，但这最终导致该字符串通过innerHTML输出的值如下：
在这里插入图片描述

这样当表单提交后，我们的注入代码被运行啦，因为整个<img />被称作啦。攻击者将图像 src 设置为无效 URL，这将导致加载失败！通过设置 onerror（<img> 的有效属性！），我们可以定义在图像加载失败时执行的 JavaScript 代码。因此，我们强制图像加载失败，并通过为恶意代码设置 onerror 来提供“补救措施”。

通过上述的例子可以看到，我们只是在本地进行攻击，因为数据库没有提交到服务器中，所以我们模拟的只是攻击自己。假如我们把上述的数据提交到服务器的话，就会形成跨站攻击。并且注入的 JavaScript 代码可以执行任何操作，例如窃取身份验证令牌。