浅谈前端安全领域的XSS攻击

前言

大家好，我是喵喵侠。我们在做前端开发项目时候，大部分情况专注于业务功能的实现，却很少关注前端安全这方面的内容。XSS 是一种常见的攻击方式，攻击者可以通过网页端实施攻击行为，可以劫持用户会话、修改网页内容、窃取用户数据等，危害极大。因此，了解 XSS很有必要。接下来我会先介绍 XSS的概念，以一个实战小案例，让你明白 XSS 攻击到底是怎么一回事。

XSS 的基本概念

XSS全称是跨站脚本攻击（Cross-Site Scripting，XSS）。XSS攻击的基本思路是攻击者在网页中注入恶意脚本，当用户访问该网页时，这些脚本会在用户的浏览器中执行，进而执行攻击者预期的操作。XSS主要分为三种类型：

反射型XSS（Reflected XSS）：攻击代码通过URL参数传递，并在响应中直接反射回浏览器执行。
存储型XSS（Stored XSS）：恶意脚本被存储在服务器端，用户访问时被加载执行。
DOM型XSS（DOM-based XSS）：攻击代码在客户端运行，直接操纵DOM节点，修改网页内容。

简单理解就是，DOM 操作、提交数据给后端、URL 拼接恶意参数，都是 XSS 的实施方式，掌握了攻击方式，后面也就知道如何防御了。

XSS攻击示例 - 简单的留言板应用

这里我将构建一个简单的留言板网页，用于展示XSS攻击如何发生及其影响。

为了展示 XSS 攻击对多个用户的影响，我们可以将留言存储在数据库中（这里用静态页面模拟），并在用户访问时加载这些留言。下面是一个简单的 HTML 版本的案例：

代码语言：html复制

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>XSS Demo</title>
</head>

<body>
  <h1>XSS 演示</h1>
  <form id="xssForm">
    <input type="text" id="username" placeholder="用户名" required>
    <textarea id="message" placeholder="留言内容" required></textarea>
    <button type="submit">提交</button>
  </form>
  <div id="messages"></div>
  <script>
    const form = document.getElementById('xssForm');
    const messagesDiv = document.getElementById('messages');

    form.addEventListener('submit', (e) => {
      e.preventDefault();
      const username = document.getElementById('username').value;
      const message = document.getElementById('message').value;

      displayMessage(username, message);
    });

    function displayMessage(username, message) {
      const msg = `<div><strong>${username}:</strong> ${message}</div>`
      messagesDiv.textContent  = msg;
    }
  </script>
</body>

</html>

如果你在输入框输入<script>alert('XSS Attack!');</script>提交，后台接受存储后，页面评论区刷新后，这段脚本就会被执行。

这也就意味着，每个访问该网页的用户，只要页面上显示了这个评论，就会执行这个脚本，这是多么可怕的事啊！

好在现在的浏览器安全机制已经十分完善，常见的 XSS 攻击都会被屏蔽掉，所以在大多数情况下，不用特别担心。

如果你还是不放心的话，可以借助第三方库来处理字符串中的脚本，比方说DOMPurify，可以很好的过滤XSS 脚本。

针对 XSS 攻击，我个人有两个小建议：

尽量不要用 innerHTML，而是使用 innerText 或者 textContent，这样可以有效过滤 html 代码。
Vue 项目中，对 v-html 的内容，可以用DOMPurify进行过滤处理。

总结

XSS 攻击有点像「鬼」一样，很多人都听说过，但都没有遇到过。但并不代表XSS 攻击不存在，只不过现代框架和浏览器安全机制，已经规避了大多数 XSS 攻击。只要技术在不断更新迭代，网络攻防就是一个持久不变的话题，值得网络安全人员持续关注。

希望通过本篇文章的介绍，让你能对 XSS 攻击有个基本的了解，在日常的开发工作中，也可以试试哪些地方可以注入脚本，进行测试，看看是否会攻击成功。

安全 xss 前端前端工程师 SQL注入攻击前端安全

0 人点赞

浅谈前端安全领域的XSS攻击

目录

前言

XSS 的基本概念

XSS攻击示例 - 简单的留言板应用

总结