大家好！作为一名技术顾问，我经常遇到企业开发团队询问前端安全的问题——尤其是XSS和CSRF这两个“老朋友”。不管是小程序开发、网站开发还是系统开发，这两种攻击都可能给应用带来严重损失。今天我就用教程的方式，一步步教你如何用JavaScript做好防护，让你的应用更安全。
一、先搞懂：XSS与CSRF到底是什么？
在开始实操前，我们得先明确目标。XSS（跨站脚本攻击）是攻击者通过注入恶意脚本，让用户浏览器执行非预期代码；CSRF（跨站请求伪造）则是利用用户已登录的身份，诱导用户执行非自愿的操作。这两种攻击在小程序和网站开发中都很常见，所以防护措施必须到位。
1.1 XSS的常见场景
比如在小程序开发中，用户输入的评论如果没有过滤，攻击者可能注入<script>标签，导致其他用户打开页面时执行恶意代码。或者网站开发中的搜索框，输入特殊字符可能触发XSS。
1.2 CSRF的常见场景
假设用户登录了某网站，攻击者诱导用户点击一个链接，这个链接会向该网站发送转账请求——因为用户已登录，网站会认为是用户自己的操作，从而完成转账。这就是CSRF的危害。
二、实操步骤：XSS防护的5个关键动作
接下来，我们一步步来防护XSS攻击。这些方法适用于小程序开发、网站开发等多种场景，赶紧记下来！
2.1 输入验证与过滤
首先，对所有用户输入进行验证。比如用户名只能包含字母和数字，评论不能有HTML标签。你可以用正则表达式或者现成的库（如DOMPurify）来过滤危险内容。
示例代码：
const cleanInput = (input) => {
return input.replace(/&/g, '&').replace(//g, '>');
};
这样可以把特殊字符转义，避免脚本执行。
2.2 输出编码
在将用户输入显示到页面时，一定要进行编码。比如在小程序开发中，使用wx.setData时，不要直接插入HTML，而是用文本形式展示。对于网站开发，可以用innerText代替innerHTML，或者使用框架自带的安全机制（如React的JSX自动转义）。
2.3 启用内容安全策略（CSP）
CSP是一种HTTP头，它可以限制页面加载的资源来源。比如设置只允许加载本域名的脚本，禁止内联脚本和eval函数。示例配置：
Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted.cdn.com;
这样可以有效防止XSS攻击，专业的开发公司通常会在项目中配置CSP。
2.4 避免危险API
尽量不要使用eval()、setTimeout()（带字符串参数）、innerHTML等危险API。如果必须使用，一定要严格验证输入内容。比如用textContent代替innerHTML，用Function构造函数时要确保参数安全。
2.5 会话管理与Cookie安全
设置Cookie的HttpOnly属性，这样JavaScript无法访问Cookie，防止XSS窃取Cookie。同时设置Secure属性，确保Cookie只在HTTPS下传输。示例：
document.cookie =