跨站脚本攻击（XSS）是一种常见的Web安全漏洞，攻击者通过在用户浏览器中注入恶意脚本，可以窃取用户数据、劫持用户会话等。为了防止XSS攻击，开发者需要采取一系列的安全措施。本文将介绍几种实用的防止XSS攻击的技巧，并提供相应的代码示例。
输入验证是防止XSS攻击的第一道防线。开发者应该对用户输入的数据进行严格的验证，确保数据符合预期格式，并过滤掉潜在的恶意字符。
function validateInput(input) {
const regex = /^[a-zA-Z0-9_]*$/; // 只允许字母、数字和下划线
return regex.test(input);
}
// 使用示例
const userInput = "";
if (validateInput(userInput)) {
console.log("输入有效");
} else {
console.log("输入无效，包含非法字符");
}
输出编码是将用户输入的数据在输出到浏览器之前进行转义，以防止恶意脚本的执行。开发者应该根据数据的上下文（如HTML、JavaScript、CSS等）选择合适的编码方式。
function encodeHTML(input) {
const map = {
'&': '&',
'<': '<',
'>': '>',
'"': '"',
"'": '''
};
return input.replace(/[&<>"']/g, function(m) { return map[m]; });
}
// 使用示例
const userInput = "";
const safeOutput = encodeHTML(userInput);
document.body.innerHTML = `${safeOutput}
`; // 输出：<script>alert('XSS');</script>
现代Web开发框架和库通常提供了内置的安全功能，可以帮助开发者更容易地防止XSS攻击。例如，使用模板引擎时，可以启用自动输出编码功能。
// 假设使用的是一个支持自动输出编码的模板引擎，如Handlebars.js
const Handlebars = require('handlebars');
const template = Handlebars.compile('{{message}}
');
const context = { message: "" };
const safeHTML = template(context); // 输出：<script>alert('XSS');</script>
document.body.innerHTML = safeHTML;
通过设置Cookie的HTTPOnly和Secure标记，可以防止JavaScript访问敏感Cookie，以及确保Cookie仅在HTTPS连接上传输，从而减少XSS攻击的风险。
// 在服务器端设置Cookie（以Node.js为例）
const http = require('http');
http.createServer((req, res) => {
res.setHeader('Set-Cookie', 'session_id=12345; HttpOnly; Secure');
res.end('Cookie已设置');
}).listen(3000);
防止XSS攻击需要开发者在多个层面进行安全加固，包括输入验证、输出编码、使用安全库以及设置安全的Cookie标记。通过综合运用这些技巧，可以显著降低Web应用遭受XSS攻击的风险。