如何防范 XSS 和 CSRF 攻击？

探讨防范跨站脚本（XSS）和跨站请求伪造（CSRF）攻击的具体措施，涉及输入验证、输出编码、安全头配置及使用 Anti-CSRF Tokens。

前端安全困难 XSS CSRF 安全

防范XSS和CSRF攻击包括以下措施，确保前后端结合的安全实践。

XSS（跨站脚本攻击）攻击通过在网页注入恶意脚本盗取用户数据或破坏页面结构。防御措施如下：

输入验证和过滤：针对用户提交的数据（如表单输入）移除或转义潜在恶意字符，如 <, >, " 等。例如，使用正则表达式或白名单技术过滤非法字符。

输出编码：渲染用户数据前进行HTML实体编码，以避免其被解析为脚本代码。例如:

HTML输出:

// JavaScript示例: 转义显示用户输入
const safeOutput = document.createElement('div');
safeOutput.textContent = userInput; // 安全方式代替innerHTML

或使用库如 DOMPurify 净化。

设置Content Security Policy (CSP)：在HTTP头部定义安全策略，限制脚本执行来源:
- 示例指令:
```
Content-Security-Policy: default-src 'self'; script-src 'self';
```
  CSP阻止未知源脚本加载，有效缓解XSS风险。
启用HTTPOnly和 Secure属性：设置cookie时标记 HttpOnly，阻止客户端脚本访问会话信息；Secure确保cookie仅通过HTTPS传输。
安全框架和实践：利用现代框架（如React或Vue），它们内建XSS防护机制，并通过安全的DOM API进行数据处理。

CSRF（跨站请求伪造）利用用户会话授权进行非法操作。防御措施如下：

使用Anti-CSRF Tokens：所有涉及认证的请求必须包含token:
- 服务端生成并随表单或响应返回token；客户端提交后server验证 token与session匹配:
- 示例代码 (PHP伪代码):
```
if ($_SESSION['csrf_token'] !== $postedToken) {
  die("Invalid token");
}
```
配置SameSite Attribute in Cookies：为session cookies设置 SameSite=Strict 或 Lax，限制其仅在同源请求中发送。
检查Referer和Origin头部: 服务器端验证请求来源是否合法，如核对Referer header为当前域名域名，但需结合其他措施确保可靠性。

实际应用中，应将XSS和CSRF防护结合使用，例如后端实施认证和token机制的同时，前端确保数据渲染的安全性，并开启现代浏览器的安全策略。