目录
前言
大家好，我是喵喵侠。我们在做前端开发项目时候，大部分情况专注于业务功能的实现，却很少关注前端安全这方面的内容。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 版本的案例：
<!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 攻击有个基本的了解，在日常的开发工作中，也可以试试哪些地方可以注入脚本，进行测试，看看是否会攻击成功。
