HTML中防止XSS攻击的方法与用户输入过滤策略
XSS（跨站脚本攻击）是Web开发中常见的安全威胁，攻击者通过在网页中注入恶意脚本，窃取用户信息、篡改页面内容或执行其他恶意操作。在HTML相关的开发中，做好用户输入过滤和防御措施是关键环节。
XSS攻击的基本原理
XSS攻击的核心在于攻击者将恶意脚本注入到正常网页中，当其他用户访问该页面时，恶意脚本会在用户的浏览器中执行。常见的注入场景包括用户提交的评论、表单输入、URL参数等未被正确处理的场景。
例如，如果直接将用户输入的内容插入到HTML页面中，攻击者可能输入类似下面的内容：
<script>alert('你的Cookie是：' + document.cookie)</script>如果后端没有做任何处理就将该内容输出到页面，这段脚本就会被执行，导致用户Cookie泄露。
用户输入过滤的核心策略
1. 输入验证与白名单过滤
对用户输入的内容进行严格的验证，只允许符合预期格式的内容通过。对于已知格式的输入（如手机号、邮箱、数字等），可以使用正则表达式匹配，不符合规则的直接拒绝。
对于需要允许部分HTML内容的场景（如用户评论支持简单的格式标签），不要使用黑名单过滤（因为黑名单很难覆盖所有恶意标签和属性），而是使用白名单机制，只允许指定的标签和属性存在。
以下是一个简单的白名单过滤示例，只允许<b>、<i>、<p>标签，并且不允许任何属性：
function filterInputByWhitelist(input) {
// 定义允许的标签白名单
const allowedTags = ['b', 'i', 'p'];
// 替换所有不在白名单中的HTML标签
let result = input.replace(/<(/?)(w+)([^>]*)>/g, (match, slash, tag, attrs) => {
if (allowedTags.includes(tag.toLowerCase())) {
// 如果有属性，直接移除所有属性
return `<${slash}${tag}>`;
}
return '';
});
return result;
}
// 测试
const maliciousInput = '<b>正常加粗</b><script>alert(1)</script><i>正常斜体</i>';
console.log(filterInputByWhitelist(maliciousInput));
// 输出：<b>正常加粗</b>alert(1)<i>正常斜体</i>2. 输出编码
输出编码是防止XSS的核心手段之一，根据内容插入到HTML的不同位置，使用对应的编码方式：
插入到HTML文本内容中：使用HTML实体编码，将<、>、&、"、'等字符转义为对应的实体，例如<转义为<，>转义为>
插入到HTML属性值中：除了HTML实体编码外，还需要确保属性值用引号包裹，避免属性值被截断注入
插入到JavaScript代码中：使用JavaScript字符串转义，转义单引号、双引号、反斜杠等特殊字符
插入到URL中：使用URL编码，对特殊字符进行百分号编码
以下是一个HTML实体编码的示例函数：
function encodeHTML(text) {
const div = document.createElement('div');
div.appendChild(document.createTextNode(text));
return div.innerHTML;
}
// 测试
const maliciousScript = '<script>alert(1)</script>';
const encoded = encodeHTML(maliciousScript);
console.log(encoded);
// 输出：<script>alert(1)</script>
// 此时将该内容插入到页面中，会被解析为文本，不会执行脚本3. 避免使用不安全的DOM操作
在JavaScript操作DOM时，避免使用innerHTML、outerHTML等会解析HTML的属性直接插入用户输入的内容，优先使用textContent属性，该属性会将内容作为纯文本处理，不会解析其中的HTML标签。
错误示例：
// 危险操作，会执行用户输入的脚本
document.getElementById('content').innerHTML = userInput;正确示例：
// 安全操作，只插入文本内容
document.getElementById('content').textContent = userInput;其他辅助防御措施
1. 设置Content Security Policy（CSP）
CSP是一种额外的安全层，通过HTTP响应头指定页面可以加载的资源来源，限制内联脚本的执行，从根源上减少XSS攻击的影响。例如设置只允许加载同源的脚本，禁止内联脚本：
Content-Security-Policy: default-src 'self'; script-src 'self';
如果需要允许从指定外部域名加载脚本，可以添加对应的域名，例如允许从https://www.ipipp.com加载脚本：
Content-Security-Policy: script-src 'self' https://www.ipipp.com;
2. 设置HttpOnly属性的Cookie
对于存储用户登录状态等敏感信息的Cookie，设置HttpOnly属性，这样客户端的JavaScript就无法读取该Cookie，即使发生XSS攻击，攻击者也无法窃取这类Cookie。
设置HttpOnly的Cookie示例（以Node.js的Express框架为例）：
res.cookie('sessionId', 'xxxxxx', {
httpOnly: true,
secure: true, // 仅在HTTPS下传输
sameSite: 'strict' // 限制跨站请求携带Cookie
});3. 避免使用eval等危险函数
在JavaScript中，避免使用eval()、new Function()、setTimeout传入字符串等会执行字符串作为脚本的函数，这些函数如果传入用户输入的内容，很容易导致XSS攻击。
总结
防范XSS攻击需要从输入过滤、输出编码、安全配置等多个层面共同入手，没有单一的防御手段可以完全杜绝XSS。开发中需要遵循“永远不信任用户输入”的原则，结合白名单过滤、输出编码、CSP、HttpOnly Cookie等多种措施，才能最大程度降低XSS攻击的风险。