跨站脚本攻击（XSS）的演示与防范

跨站脚本攻击（XSS）的演示与防范

XSS攻击的危害

XSS攻击可以给用户和网站带来严重的安全风险，包括但不限于：

1. 身份盗用：攻击者可以盗取用户的登录凭据，如cookie。
2. 会话劫持：攻击者可以控制用户的会话，进行未授权的操作。
3. 数据泄露：攻击者可以访问或窃取存储在用户浏览器中的敏感信息。
4. 恶意软件分发：攻击者可以利用XSS漏洞来分发恶意软件。
5. 钓鱼攻击：攻击者可以模拟登录表单，诱导用户输入敏感信息。

XSS防范措施

1. 输入验证：对所有用户输入进行严格的验证，拒绝不合法的输入。

2. 输出编码：在显示用户输入的数据时，对特殊字符进行编码，如HTML实体。

3. 使用安全框架：使用提供XSS防护的框架，如React的JSX、Spring Security。

4. 内容安全策略（CSP）：通过设置HTTP头Content-Security-Policy，限制可以执行脚本的来源。

5. 避免直接插入DOM：避免使用innerHTML，使用textContent或安全的DOM操作。

防范XSS的代码示例

前端JavaScript:

// search.js 防御XSS的版本
const query = new URLSearchParams(window.location.search).get('query');
// 使用DOMPurify库对查询参数进行净化
const sanitizedQuery = DOMPurify.sanitize(query);
document.getElementById('search-results').textContent = `Search results for: ${sanitizedQuery}`;

Spring MVC Controller:

// SearchController.java
@PostMapping("/search")
public String search(@ModelAttribute("query") String query, Model model) {
    // 验证输入，拒绝非法字符
    if (query.contains("<script>")) {
        throw new IllegalArgumentException("Invalid query parameter");
    }
    model.addAttribute("query", query);
    return "search-results";
}

Thymeleaf模板:

<!-- search-results.html -->
<div th:utext="'Search results for: ' + ${query}"></div>

Thymeleaf的th:utext会自动转义内容，防止XSS攻击。