JavaScript的网络安全：如何防范常见的XSS与CSRF攻击？

在前后端分离的Web应用里，JavaScript承担了大部分交互逻辑，但也让XSS与CSRF成为最常见的安全威胁。理解它们的原理并掌握对应的防御手段，是每一个前端开发者必须具备的能力。

什么是XSS攻击

XSS全称跨站脚本攻击，攻击者往页面里注入恶意JavaScript代码，当其他用户浏览该页面时，脚本会在其浏览器中执行，从而窃取Cookie、篡改页面或发起非法请求。

常见XSS类型

• 存储型XSS：恶意脚本被保存到服务器，如评论区。
• 反射型XSS：脚本通过URL参数反射到页面。
• DOM型XSS：纯前端DOM操作导致漏洞。

JavaScript中如何防范XSS

最核心的思路是对所有不可信数据进行转义，并限制脚本执行能力。

1. 输出编码

把用户输入作为文本插入而非HTML，使用textContent而不是innerHTML。

// 不安全写法
// element.innerHTML = userInput;

// 安全写法
element.textContent = userInput;

2. 使用内容安全策略CSP

通过响应头限制脚本来源，阻止内联脚本执行。

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">

什么是CSRF攻击

CSRF全称跨站请求伪造，攻击者诱导用户点击链接或加载图片，利用用户已登录的身份向目标站点发送非本意请求，比如转账或改密码。

JavaScript中如何防范CSRF

1. 使用SameSite Cookie

设置Cookie的SameSite属性，使浏览器不在跨站请求中携带认证信息。

// 服务端设置示例（Node.js Express）
res.cookie('session', token, { sameSite: 'strict', httpOnly: true });

2. 添加CSRF Token

前端在发起敏感请求时，从页面或接口获取Token并放到请求头中，服务端校验。

// 使用fetch发送带Token的请求
fetch('/api/transfer', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'X-CSRF-Token': getTokenFromMeta()
  },
  body: JSON.stringify({ amount: 100 })
});
</script>

总结

防范XSS重点在于不信任任何用户输入并做好编码与CSP，防范CSRF则需结合Cookie策略与Token校验。在JavaScript开发中养成良好的安全习惯，能大幅降低网站被攻破的风险。

JavaScriptXSSCSRF修改时间：2026-07-28 07:27:15