你是否遇到过小程序或网站突然弹出恶意广告？或者用户反馈账户被异常操作？这些很可能是XSS或CSRF攻击在作祟。对于企业来说，前端安全直接关系到用户信任和业务存亡，尤其是在小程序开发、网站开发等高频交互场景中。今天我们就用教程式的方法，结合真实案例，聊聊如何用JavaScript做好这两种攻击的防护。
1. 前端安全威胁：XSS与CSRF的危害（结合行业案例）
1.1 XSS攻击：隐形的用户数据窃取者
XSS（跨站脚本攻击）是通过注入恶意脚本到网页中，窃取用户Cookie、个人信息等。比如某电商小程序的评论区，攻击者输入含脚本的评论，其他用户查看时脚本自动执行，导致账户信息泄露。数据显示，约60%的前端安全漏洞来自XSS攻击，给企业带来平均50万元的直接损失。
1.2 CSRF攻击：伪装用户的恶意操作
CSRF（跨站请求伪造）是攻击者诱导用户点击恶意链接，以用户身份执行非法操作。比如某金融网站的转账功能，用户在登录状态下点击钓鱼链接，资金被转走。某银行曾因CSRF漏洞导致300多用户受损，损失超200万元。
1.3 真实案例：某金融网站的CSRF攻击事件
某城商行的网上银行系统，因未做CSRF防护，攻击者利用用户登录状态，通过钓鱼邮件诱导用户点击链接，完成非法转账。事件发生后，银行紧急修复漏洞，但用户信任度下降20%，直接影响业务量。
2. JavaScript防护XSS攻击的3个关键步骤
2.1 输入验证与过滤：从源头阻断恶意代码
对用户输入的内容进行严格验证，比如限制长度、过滤特殊字符。使用JavaScript正则表达式，比如过滤<script>、onclick等危险标签。例如：input.replace(/<script.*?>.*?</script>/gi, '')，可拦截80%以上的XSS攻击。
2.2 输出编码：防止恶意脚本执行
将用户输入的内容编码后再输出到页面，比如使用encodeURIComponent()或专门的库如DOMPurify。DOMPurify能过滤99.5%的XSS payload，是小程序开发和网站开发中常用的安全工具。
2.3 使用安全的DOM操作方法
避免使用innerHTML等直接插入HTML的方法，改用innerText或textContent。比如在小程序开发中，更新页面内容时用setData({ content: userInput })，确保内容以纯文本显示，防止脚本执行。
3. JavaScript防护CSRF攻击的实战方法
3.1 同源策略与Token验证
后端生成随机Token，存储在session或localStorage中，前端请求时带上Token。后端验证Token是否有效，有效则处理请求。某电商平台采用此方法后，CSRF攻击成功率降为0.1%以下。
3.2 双重Cookie验证
将Token同时存储在Cookie和请求头中，后端验证两者是否一致。这种方法在网站开发中效果显著，能有效防止CSRF攻击，因为攻击者无法同时获取Cookie和请求头中的Token。
3.3 自定义HTTP头
添加自定义HTTP头如X-Requested-With: XMLHttpRequest，后端只处理带该头的请求。这种方法简单有效，适合小程序开发和移动开发场景，因为攻击者难以伪造自定义头。
4. 行业案例：某电商小程序的安全防护实践
4.1 问题发现：用户评论区的XSS漏洞
某生鲜电商小程序的评论区，用户可输入HTML内容，导致攻击者注入脚本，窃取用户地址和电话。平台接到用户投诉后，立即展开安全排查。