一、什么是XSS攻击？
想象一下，你正在浏览一个论坛网站，突然发现某个帖子里出现了奇怪的弹窗，或者自动跳转到其他网站。这种情况很可能就是XSS攻击在作怪。简单来说，XSS（跨站脚本攻击）就是黑客把恶意代码偷偷塞进网页里，当其他用户访问这个页面时，这些代码就会自动执行。
这种攻击之所以危险，是因为它可以窃取用户的登录信息、篡改网页内容，甚至控制用户的浏览器。更可怕的是，这些恶意代码看起来就像是网站正常的一部分，普通用户根本察觉不到异常。
二、XSS攻击的三种常见形式
1. 存储型XSS
这种攻击最阴险，恶意代码会被永久存储在目标服务器上。比如黑客在评论区插入一段脚本，所有查看这个评论的用户都会中招。
2. 反射型XSS
这种攻击需要诱骗用户点击一个特殊构造的链接。比如伪装成"查看你的年度账单"的链接，点击后恶意代码就会在用户浏览器执行。
3. DOM型XSS
这种攻击完全发生在浏览器端，不经过服务器。比如网页JavaScript代码直接从URL参数获取内容并显示，黑客就可以构造特殊URL来注入恶意代码。
三、用JavaScript防御XSS的五大招数
技术栈：纯JavaScript（不依赖任何框架）
1. 输入过滤：把危险挡在门外
// 示例1：简单的HTML标签过滤函数
function sanitizeInput(input) {
// 用正则表达式匹配并替换危险标签
return input.replace(/<script[^>]*>([\S\s]*?)<\/script>/gim, '')
.replace(/<\/?\w(?:[^"'>]|"[^"]*"|'[^']*')*>/gim, '');
}
// 使用示例
const userInput = '<script>alert("攻击代码")</script>你好啊';
const safeOutput = sanitizeInput(userInput); // 输出: 你好啊
这个例子展示了最基本的过滤方法，但要注意，仅靠这个还不够完善，因为黑客总能找到新的绕过方式。
2. 输出编码：给数据穿上防护衣
// 示例2：HTML实体编码函数
function htmlEncode(text) {
// 创建临时div元素来利用浏览器内置的编码功能
const div = document.createElement('div');
div.appendChild(document.createTextNode(text));
return div.innerHTML;
}
// 使用示例
const userComment = '<img src="x" onerror="alert(1)">';
document.getElementById('comment-area').innerHTML =
'用户评论：' + htmlEncode(userComment);
// 实际显示的是文本内容，而不是可执行的HTML
这种方法确保所有特殊字符都被转义，浏览器会将其视为普通文本而非代码。
3. 使用textContent代替innerHTML
// 示例3：安全的DOM操作方式
// 危险做法：
// document.getElementById('output').innerHTML = userInput;
// 安全做法：
document.getElementById('output').textContent = userInput;
// 这样即使用户输入包含HTML标签，也会被当作纯文本显示
4. 设置Content Security Policy (CSP)
虽然这不是纯JavaScript方案，但非常值得介绍：
// 示例4：通过meta标签设置CSP策略
const meta = document.createElement('meta');
meta.httpEquiv = 'Content-Security-Policy';
meta.content = "default-src 'self'; script-src 'self' https://trusted.cdn.com";
document.head.appendChild(meta);
这个策略告诉浏览器只执行来自特定来源的脚本，从根本上阻止内联脚本执行。
5. 使用专门的消毒库
// 示例5：使用DOMPurify库进行专业消毒
// 首先引入库：<script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.3.3/purify.min.js"></script>
const dirtyInput = '<div><script>恶意代码</script><p onclick="alert(1)">点击我</p></div>';
const cleanHTML = DOMPurify.sanitize(dirtyInput);
// cleanHTML只保留安全的HTML标签，去除了所有脚本和事件处理器
四、实战演练：构建一个安全的评论系统
让我们把这些防御措施综合运用到一个实际场景中：
// 示例6：安全的评论系统实现
class SafeCommentSystem {
constructor() {
this.commentForm = document.getElementById('comment-form');
this.commentList = document.getElementById('comment-list');
this.setupEvents();
}
setupEvents() {
this.commentForm.addEventListener('submit', (e) => {
e.preventDefault();
const commentInput = document.getElementById('comment-text');
this.addComment(commentInput.value);
commentInput.value = '';
});
}
addComment(rawComment) {
// 1. 输入过滤
const filtered = this.filterInput(rawComment);
// 2. 输出编码
const encoded = this.encodeOutput(filtered);
// 3. 安全插入DOM
const commentElement = document.createElement('div');
commentElement.className = 'comment';
commentElement.textContent = encoded; // 使用textContent而不是innerHTML
this.commentList.appendChild(commentElement);
}
filterInput(input) {
// 简单过滤危险标签
return input.replace(/<[^>]*>?/gm, '');
}
encodeOutput(output) {
// 对特殊字符进行编码
return output.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">")
.replace(/"/g, """)
.replace(/'/g, "'");
}
}
// 初始化系统
new SafeCommentSystem();
五、进阶防护技巧
1. 处理富文本内容
如果需要允许用户使用一些基本HTML格式（如加粗、斜体），可以这样做：
// 示例7：有限制的富文本处理
function safeRichText(input) {
// 只允许b, i, u, p, br等简单标签
const allowedTags = {
'b': true,
'i': true,
'u': true,
'p': true,
'br': true
};
return input.replace(/<\/?([a-z][a-z0-9]*)\b[^>]*>?/gi, (match, tag) => {
return allowedTags[tag.toLowerCase()] ? match : '';
});
}
2. 防范DOM型XSS
// 示例8：安全处理URL参数
function getSafeQueryParam(name) {
const urlParams = new URLSearchParams(window.location.search);
const param = urlParams.get(name);
// 对获取的参数进行编码
return param ? encodeURIComponent(param) : null;
}
// 安全使用示例
const searchTerm = getSafeQueryParam('q');
document.getElementById('search-term').textContent = searchTerm || '';
六、常见误区与注意事项
不要依赖客户端验证：前端防护只是第一道防线，服务端必须进行同样的检查。
不要过度过滤：可能会误伤正常内容，比如数学公式中的"<"和">"符号。
注意第三方库：使用jQuery等库时，也要遵循相同的安全原则，比如用text()代替html()。
保持更新：安全措施需要与时俱进，定期检查更新你的防护策略。
测试你的防御：可以尝试自己构造一些XSS攻击代码，看看能否突破你的防护。
七、总结与最佳实践
防御XSS攻击就像给网站打疫苗，需要多管齐下才能确保安全。记住这几个关键点：
所有用户输入都不可信：无论是表单、URL参数还是Cookie数据。
根据上下文选择防护方式：显示纯文本用textContent，需要HTML则严格消毒。
善用现代浏览器的安全特性：如CSP、HttpOnly Cookie等。
持续学习：安全威胁不断演变，防御措施也要随之更新。
不要重复造轮子：对于复杂场景，使用成熟的消毒库更可靠。
把这些措施应用到你的项目中，就能大大降低XSS攻击的风险。安全防护没有一劳永逸的方案，保持警惕和持续改进才是关键。
评论