🧨 Javascript 过滤特殊字符串
在 JavaScript 中，防止 XSS（跨站脚本攻击），需要过滤或转义某些特殊字符，以防止用户输入的恶意代码被解析并执行。通常需要处理的字符包括：
1. 需要过滤或转义的特殊字符
2. 防止 XSS 的方法
（1）转义 HTML 特殊字符
可以使用正则表达式替换 HTML 关键字符：
javascriptCopy
function escapeHTML(str) {
return str.replace(/[<>"'&]/g, match => ({
'<': '<',
'>': '>',
'"': '"',
"'": ''',
'&': '&'
}[match]));
}
// 示例
const userInput = `<script>alert('XSS')</script>`;
console.log(escapeHTML(userInput));
// 输出：<script>alert('XSS')</script>
（2）使用 textContent 防止 HTML 解析
如果要在前端显示用户输入的内容，而不解析 HTML，可以使用 textContent：
javascriptCopy
const userInput = "<script>alert('XSS');</script>";
const div = document.createElement("div");
div.textContent = userInput;
document.body.appendChild(div);
这样，<script> 只会被当作普通文本显示，而不会执行。
（3）对 URL 进行过滤
如果用户可以输入 URL（如 href 或 src），需要避免 javascript: 伪协议：
javascriptCopy
function sanitizeURL(url) {
if (!/^https?:\/\//i.test(url)) {
return "about:blank"; // 不安全的 URL 直接替换为空白页
}
return url;
}
// 示例
const safeURL = sanitizeURL("javascript:alert('XSS')");
console.log(safeURL); // "about:blank"
（4）避免 innerHTML（高危 API）
永远 不要 使用 innerHTML 直接插入用户输入：
javascriptCopy
element.innerHTML = userInput; // ❌ 高风险，可能导致 XSS
改用 textContent 或 createElement。
（5）使用 CSP（内容安全策略）
服务器端可以使用 CSP（Content Security Policy） 让浏览器拒绝执行内联脚本：
plain textCopy
Content-Security-Policy: default-src 'self'; script-src 'self'
这样，即使 XSS 代码被插入，浏览器也不会执行。
3. 其他防御策略
4. 总结
✅ 需要过滤或转义的字符：
htmlCopy
< > " ' & / ( ) { } ; \
✅ 防御 XSS 方法：
如果你有具体的场景需要 XSS 防御，欢迎进一步讨论！🚀