跨站脚本攻击(XSS 攻击)是 Web 开发中最危险的攻击之一。以下是它们的工作原理以及防御方法。
跨站脚本攻击就是在另一个用户的计算机上运行带有恶意的 JS 代码。假如我们的程序没有对这些恶意的脚本进行防御的话,他们就会由我们的页面注入到我们的服务器数据库中,从而其他用户在访问我们的网站是就会收到这些脚本的攻击。接下来我们来看看这些恶意代码是何时注入的。
首先我们先看一下如下的代码:
<section id="user-input">
<form>
<div class="form-control">
<label for="user-message">Your Messagelabel>
<textarea id="user-message" name="user-message">textarea>
div>
<div class="form-control">
<label for="message-image">Message Imagelabel>
<input type="text" id="message-image" name="message-image" />
div>
<button type="submit">Send Messagebutton>
form>
section>
<section id="user-messages">
<ul>ul>
section>
// 提交表单数据后渲染对应的数据
function renderMessages() {
let messageItems = "";
for (const message of userMessages) {
messageItems = `
${messageItems}
${message.text}
`;
}
userMessagesList.innerHTML = messageItems;
}
上述例子中我们只是采用了静态页面来呈现XSS
攻击,即没有服务器的支持,所以我们只能自己攻击自己。
上述的例子中我们可以看到用户当表单添加消息后最终使用innerHtml
进行页面元素的渲染。这样我们的页面最后渲染出的元素里面会包含图片和其他一些文本数据。
现在我们设想一下,假如我们在textarea
中输入如下的代码:
并且提交表单数据后,我们提交表单数据后,我们可以查看一下页面的列表元素:
我们可以看到页面没有报错和任何任何报警,所以注入的脚本代码实际上并没有执行。因为现代浏览器可以保护您免受这种非常基本形式的 XSS 攻击。通过 innerHTML“注入”的元素不会被浏览器执行!
所以上述的注入攻击只是针对于低版本的浏览器。
我们还可以滥用
的src
属性设置为某些用户输入的注入攻击。因为上述的图片渲染是通过简单的字符串进行渲染的。
<img src="${message.image}" alt="${message.text}">
如果我们操纵 message.image 使其实际上完全改变要渲染的元素会怎么样?不仅仅是它的 src。
这可能看起来很奇怪,但这最终导致该字符串通过innerHTML
输出的值如下:
这样当表单提交后,我们的注入代码被运行啦,因为整个被称作啦。攻击者将图像 src 设置为无效 URL,这将导致加载失败!通过设置
onerror
( 的有效属性!),我们可以定义在图像加载失败时执行的 JavaScript 代码。因此,我们强制图像加载失败,并通过为恶意代码设置 onerror 来提供“补救措施”。
通过上述的例子可以看到,我们只是在本地进行攻击,因为数据库没有提交到服务器中,所以我们模拟的只是攻击自己。假如我们把上述的数据提交到服务器的话,就会形成跨站攻击。并且注入的 JavaScript 代码可以执行任何操作,例如窃取身份验证令牌。
预防跨站攻击,我们有一条简单但重要的原则:在存储和提供用户生成的内容之前始终对齐进行清理。
“清理内容”意味着您想要删除用户生成的内容中可能存在的所有恶意部分。清理不仅有助于防止 XSS,还有助于防止 SQL 和 NoSQL 注入。
我们应该只将清理过的内容存储在数据库中。通过这样做,您将确保只向用户提供安全内容。
此外,您还可以研究客户端 JavaScript 代码中的转义内容。 这意味着除了后端的清理步骤之外,您还需要在前端进行清理步骤。现代的框架(Angular、React、Vue)都带有转义功能。
**说明:**客户端转义只是一个额外的好处 - 您实际上应该只在数据库中存储安全内容!
跨站攻击的另一个来源就是第三方库。因为在现代客户端应用程序中,我们通常会使用大量第三方库。从 Angular 这样的框架到 lodash 这样的实用程序库。这些库中包含的代码也作为客户端代码的一部分运行。假如这些苦收到第三方恶意攻击或者删除核心代,可能都会导致我们的应用程序存在很多风险。
所以我们尽量少使用第三方库或者挑选一些更大、更流行且维护良好的库。
完整实例代码下载