XSS攻击全称跨站脚本攻击，指攻击者在网页中注入恶意脚本，当用户访问页面时脚本执行，从而窃取用户cookie、篡改页面内容或执行其他恶意操作。在JavaScript开发中，我们可以通过多种手段有效防范这类攻击。
XSS攻击的常见类型
了解攻击类型是做好防护的前提，常见的XSS攻击分为三类：
- 反射型XSS：恶意脚本作为请求参数发送到服务器，服务器未处理直接返回到页面执行，通常出现在搜索、跳转等场景。
- 存储型XSS：恶意脚本被存储到服务器数据库，所有访问对应页面的用户都会触发脚本执行，常见于评论、留言功能。
- DOM型XSS：完全在客户端发生，攻击者通过修改页面DOM结构注入脚本，不需要和服务器交互。
JavaScript中防范XSS的核心方法
1. 输入过滤
对用户输入的内容进行校验，过滤掉可能包含恶意脚本的字符或标签，避免危险内容进入系统。注意输入过滤不能完全依赖，需要配合输出转义使用。
// 简单的输入过滤函数，过滤掉script标签和危险属性
function filterInput(inputStr) {
if (typeof inputStr !== 'string') return '';
// 替换script标签
let result = inputStr.replace(/<script[^>]*>.*?<\/script>/gi, '');
// 过滤on开头的事件属性，如onclick、onload等
result = result.replace(/\s+on\w+\s*=\s*["'][^"']*["']/gi, '');
return result;
}
// 使用示例
const userInput = '<script>alert("xss")</script><div onclick="steal()">内容</div>';
const safeInput = filterInput(userInput);
console.log(safeInput); // 输出：<div >内容</div>2. 输出转义
当把数据输出到页面不同位置时，根据上下文进行对应的转义处理，避免被浏览器解析为可执行脚本。
如果是输出到HTML文本内容中，需要转义以下特殊字符：
| 原字符 | 转义后字符 |
|---|---|
| < | < |
| > | > |
| & | & |
| " | " |
| ' | ' |
// HTML文本转义函数
function escapeHtml(str) {
if (typeof str !== 'string') return '';
const map = {
'&': '&',
'<': '<',
'>': '>',
'"': '"',
"'": '''
};
return str.replace(/[&<>"']/g, function(match) {
return map[match];
});
}
// 使用示例，将转义后的内容插入到DOM中
const unsafeContent = '<img src="x" onerror="alert(1)">';
const safeContent = escapeHtml(unsafeContent);
document.getElementById('content').innerHTML = safeContent; // 页面会显示文本而不是执行脚本如果是输出到JavaScript上下文中，需要对特殊字符进行转义，避免闭合引号或注入代码：
// JS上下文转义函数
function escapeJs(str) {
if (typeof str !== 'string') return '';
return str.replace(/\\/g, '\\\\')
.replace(/"/g, '\\"')
.replace(/'/g, "\\'")
.replace(/\n/g, '\\n')
.replace(/\r/g, '\\r');
}
// 错误示例：直接拼接用户输入到JS代码中
// const userData = '" + alert(1) + "';
// eval('var name = "' + userData + '";'); // 会执行恶意脚本
// 正确示例：使用转义后的内容
const userData = '<script>alert(1)</script>';
const safeData = escapeJs(userData);
eval('var name = "' + safeData + '";'); // 不会执行恶意脚本3. 使用内容安全策略CSP
CSP是通过HTTP响应头或meta标签设置的安全策略，限制页面可以加载的资源来源和可执行的脚本规则，从根源上减少XSS攻击的影响。
可以在HTML的<head>中添加meta标签设置基础CSP规则：
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:">
这段规则表示：默认资源只能从当前域名加载，脚本只能从当前域名加载，样式可以从当前域名和内联样式加载，图片可以从当前域名和数据URI加载，禁止执行内联脚本和eval等危险操作。
4. 避免使用危险API
尽量减少使用innerHTML、eval、setTimeout接收字符串参数等危险API，这些API很容易导致未转义的内容被执行。如果必须使用，一定要先对内容做转义处理。
优先使用textContent代替innerHTML插入文本内容，textContent会自动将内容作为纯文本处理，不会解析HTML标签：
// 不安全的方式
document.getElementById('box').innerHTML = userInput; // 如果userInput包含恶意脚本会执行
// 安全的方式
document.getElementById('box').textContent = userInput; // 只会显示文本，不会执行脚本防护注意事项
没有单一的防护手段可以完全杜绝XSS攻击，实际开发中需要结合多种方法：输入时做基础过滤，输出时根据上下文做对应转义，同时配置合理的CSP策略，避免使用危险API。另外需要定期做安全测试，及时修复发现的安全漏洞，才能最大程度保障应用安全。
XSS攻击JavaScript安全输入过滤输出转义CSP策略修改时间：2026-06-05 02:18:05