XSS攻击防护

XSS攻击防护

1. 简介

XSS（跨站脚本攻击） 是一种常见的Web安全漏洞，攻击者通过注入恶意脚本到网页中，使其在用户浏览器中执行，从而窃取数据、劫持会话或进行其他恶意操作。XSS攻击主要分为三类：

• 存储型XSS（恶意脚本存储在服务器上）

• 反射型XSS（恶意脚本通过URL参数注入）

• DOM型XSS（前端JavaScript动态修改DOM导致执行恶意代码）

防护目标：防止恶意脚本注入，确保用户输入数据在输出时被安全处理。

2. 功能说明

XSS防护的核心方法包括：

3. 操作示例

（1）输入过滤（PHP示例）

// 过滤HTML标签
$user_input = strip_tags($_POST['comment']);  

// 仅允许特定字符（白名单）
$filtered_input = preg_replace('/[^a-zA-Z0-9\s]/', '', $_POST['username']);

（2）输出编码（JavaScript示例）

// 使用textContent防止XSS（避免innerHTML）
document.getElementById("output").textContent = userInput;  

// 手动HTML编码
function escapeHtml(unsafe) {
    return unsafe
        .replace(/&/g, "&")
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")
        .replace(/"/g, "&quot;")
        .replace(/'/g, "&#039;");
}

（3）CSP（HTTP头示例）

Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted.cdn.com; style-src 'self' 'unsafe-inline';

• default-src 'self'：默认只加载同源资源

• script-src：限制JavaScript来源

• style-src：限制CSS来源

（4）HttpOnly Cookie（PHP示例）

setcookie("sessionID", "123abc", [
    "httponly" => true,  // 禁止JS访问
    "secure" => true,    // 仅HTTPS传输
    "samesite" => "Strict" // 防止CSRF
]);

（5）前端框架防护（React示例）

React默认转义变量，防止XSS：

const userInput = "<script>alert('XSS')</script>";
return <div>{userInput}</div>;  // 自动转义，不会执行脚本

4. 总结

• 关键防护：输入过滤 + 输出编码 + CSP

• 辅助措施：HttpOnly Cookie、安全框架、定期安全测试

• 避免：直接使用innerHTML、eval()、未经验证的document.write()

通过综合应用上述方法，可有效降低XSS攻击风险。