前端如何防范常见的网络攻击（如XSS、CSRF），以及如何处理跨域问题？请说明具体措施和实现方式。
Tencent软件开发-前端开发方向难度：中等
答案
1) 【一句话结论】前端防范XSS、CSRF需从输入验证、输出编码、内容安全策略（CSP）、CSRF token、SameSite cookie等维度综合措施；跨域通过CORS（含预检请求）和JSONP/WebSocket等方案解决。
2) 【原理/概念讲解】
- XSS（跨站脚本攻击）：攻击者将恶意脚本注入网页，用户访问时脚本在浏览器执行，可窃取Cookie、会话或篡改页面。类比：公共论坛用户输入“隐藏病毒”代码，其他用户浏览时病毒自动运行。
- CSRF（跨站请求伪造）：攻击者诱导已登录用户在目标网站下执行非授权操作，利用用户会话令牌发送伪造请求（如POST）。类比：你登录银行后，攻击者给你发链接，点击后银行执行你未授权的转账。
- 跨域：浏览器同源策略限制不同源（协议/域名/端口）的资源访问。例如
http://a.com/js无法访问http://b.com/data，需通过CORS（服务器响应允许头）或JSONP（动态script加载）解决。
3) 【对比与适用场景】
| 攻击类型 | 定义 | 攻击方式 | 主要危害 | 防范重点 | 注意点 |
|---|---|---|---|---|---|
| XSS | 注入恶意脚本到网页 | 用户输入未过滤，脚本在用户浏览器执行 | 窃取Cookie、会话、篡改页面 | 输入验证、输出编码、CSP、HTTPOnly | DOM clobbering等绕过方式，需后端配合输出编码 |
| CSRF | 利用用户会话执行非授权操作 | 伪造请求（如POST），携带会话Cookie | 执行非授权操作（转账、修改数据） | CSRF token、Referer检查、SameSite、验证码 | Referer检查局限性，CSRF token需存储隐藏字段、随机生成+session绑定 |
| 跨域 | 浏览器同源策略限制不同源资源访问 | 浏览器阻止跨域请求 | 功能受限（如API调用失败） | CORS（预检请求+允许头）、JSONP（仅GET）、WebSocket（服务器配置） | CORS预检请求必要性，JSONP仅支持GET，WebSocket需服务器支持或代理 |
4) 【示例】
- XSS示例：用户评论输入
<script>alert('hacked')</script>，前端未过滤，后端未对用户输入做HTML实体编码（如<转<），用户访问时脚本执行。 - CSRF示例：攻击者构造表单，隐藏字段包含伪造的CSRF token（如
token=abc123），用户点击链接后，表单提交POST https://bank.com/transfer，携带用户会话Cookie（JSESSIONID=abc123），银行执行转账。 - 跨域示例：前端请求
https://api.example.com/data，浏览器因同源策略阻止，服务器配置CORS后返回Access-Control-Allow-Origin: https://myapp.com，实际请求通过；若用JSONP，前端动态创建<script src="https://api.example.com/data?callback=handleData">，服务器返回handleData({data: '...'})，前端解析回调函数。
5) 【面试口播版答案】
“面试官您好，关于前端防范网络攻击和跨域问题，核心是针对性措施：
- XSS防范：前端做输入格式校验（如禁止script标签），后端对用户输入做HTML实体编码（如
<转<）；设置CSP HTTP头（如script-src 'self'）限制资源加载；用HTTPOnly cookie防止JavaScript读取。 - CSRF防范：请求中携带CSRF token（后端生成随机token，前端表单添加隐藏字段）；设置cookie的SameSite=Strict/Lax（防止浏览器自动发送cookie到跨域请求）；结合Referer头检查辅助验证。
- 跨域解决：依赖CORS协议，前端发起跨域请求时，浏览器先发OPTIONS预检请求，服务器响应允许头（如
Access-Control-Allow-Origin），实际请求才能通过；也可用JSONP（动态script加载跨域数据，仅支持GET）。
总结来说，前端从输入、输出、请求头、策略层面综合防护，通过CORS解决跨域问题。”
6) 【追问清单】
- CSP如何配置？（回答要点：通过HTTP头
Content-Security-Policy，如default-src 'self'（默认允许本域）、script-src 'self' 'unsafe-inline'（允许本域和内联脚本，需谨慎）、img-src 'self' https://cdn.example.com（允许特定CDN）。） - CSRF token如何防重放？（回答要点：token随机生成，后端验证token与session一致，且token有有效期（如5分钟），过期失效。）
- 跨域预检请求（OPTIONS）的作用？（回答要点：浏览器先发OPTIONS请求询问服务器是否允许跨域请求，服务器返回允许头后，才发送实际请求。）
- JSONP的缺点？（回答要点：仅支持GET请求，无法处理POST等复杂请求，数据为字符串需前端解析。）
- WebSocket跨域如何处理？（回答要点：服务器配置WebSocket跨域支持（如
Access-Control-Allow-Origin），或通过代理服务器转发。）
7) 【常见坑/雷区】
- XSS只做前端过滤：前端过滤可能被绕过（如CSS/内联样式注入），需后端也做输入验证和输出编码。
- CSRF token未验证：若token验证不严格，攻击者可伪造token绕过防护。
- 跨域忽略预检请求：服务器未响应OPTIONS请求，导致前端跨域请求失败。
- CSP配置错误：允许不安全内联脚本（
unsafe-inline）或配置错误源，导致XSS绕过或功能异常。 - SameSite cookie设置错误：如设置为None但未设Secure属性，cookie在HTTP请求中被发送，增加安全风险。