安全

常见 web 安全问题

答案

核心概念与分类

Web 安全问题主要指攻击者利用浏览器、网络协议或前端实现的漏洞，威胁用户数据和系统安全。常见类型包括：

详细解释

XSS（跨站脚本）：攻击者注入脚本，窃取 Cookie、会话等。常见于未转义的用户输入。
CSRF（跨站请求伪造）：利用用户已登录状态，诱导其发起恶意请求。
同源策略绕过：如通过 JSONP、postMessage、CORS 配置不当等方式获取敏感数据。
中间人攻击（MITM）：拦截并篡改数据，常见于未加密的 HTTP 通信。
点击劫持：通过隐藏的 iframe 诱导用户点击，执行未授权操作。
敏感信息泄露：如日志、前端源码、接口响应中暴露敏感数据。

代码示例：XSS 防护

// 输出前对特殊字符转义
function escapeHTML (str) {
  return str.replace(/[<>"'&]/g, c => ({
    '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;', '&': '&amp;'
  }[c]))
}

常见误区与开发建议

仅依赖前端校验，忽视后端安全。
CORS 配置过宽，允许任意来源访问。
Cookie 未设置 HttpOnly/Secure，易被窃取。
忽视 HTTPS，导致数据明文传输。

提示

敏感操作建议双重校验（如验证码+Token），并定期审查依赖库安全。

延伸阅读

OWASP Top 10 - Web 安全十大风险
MDN: Web 安全 - 浏览器安全基础
XSS 攻击与防御

同源策略

答案

浏览器同源策略，用来限制不同源之间的交互，防止恶意脚本窃取用户数据。所谓同源，指协议、域名和端口三者相同。

延伸阅读

"Same-site" and "same-origin" 对同源和同站做了详细解释
Same-origin policy

csrf

答案

核心概念

CSRF（跨站请求伪造）是指攻击者诱导已登录用户在不知情的情况下，向受信任网站发起非本意的请求，利用用户的身份执行敏感操作。攻击常见于 Cookie 自动携带身份凭证的场景。

攻击流程

用户登录受信任站点，浏览器保存 Cookie。
用户访问恶意网站，恶意页面发起针对受信任站点的请求（如表单提交、图片加载等）。
浏览器自动携带 Cookie，服务器误以为是用户本人操作，执行敏感操作。

防御措施

代码示例：Token 防御

前端表单：

<form method="POST">
  <input type="hidden" name="csrf_token" value="xxxxxx">
  <!-- 其他表单项 -->
</form>

后端校验伪代码（Node.js）：

if (req.body.csrf_token !== req.session.csrf_token) {
  return res.status(403).send('CSRF detected')
}

常见误区与建议

仅依赖 Referer 校验，易被绕过（如部分浏览器不发送 Referer）。
Token 应与用户会话绑定，且每次请求都校验。
建议配合 SameSite=Strict/SameSite=Lax 的 Cookie 策略。

提示

敏感操作（如转账、修改密码）务必加 Token 校验，并定期更新 Token。

延伸阅读

xsrf

答案

核心概念

XSRF（Cross-Site Request Forgery）与 CSRF（Cross-Site Request Forgery）本质上是同一类攻击，均指跨站请求伪造。XSRF 只是 CSRF 的另一种缩写写法，部分文档或社区习惯用 XSRF 表示，但两者没有本质区别。

原理说明

攻击者诱导已登录用户在不知情的情况下，向受信任网站发起伪造请求，利用浏览器自动携带的 Cookie 或认证信息，冒用用户身份执行敏感操作。常见于表单提交、图片加载等隐式请求。

常见误区

误以为 XSRF 和 CSRF 是不同攻击，实际完全等价。
仅依赖 Referer 校验，忽视 Token 或 SameSite Cookie 等更安全的防护手段。

开发建议

推荐统一使用“CSRF”术语，避免混淆。
防御措施同 CSRF：Token 校验、SameSite Cookie、Referer 校验、验证码等。

| 术语 | 全称 | 是否同义 | 推荐用法 | |XSRF|Cross-Site Request Forgery|是|不推荐（用 CSRF）| |CSRF|Cross-Site Request Forgery|是|推荐|

备注

部分框架（如 Angular）文档中使用 XSRF，但主流安全社区和标准文档均以 CSRF 为主。

延伸阅读

OWASP: CSRF - 官方安全说明
MDN: CSRF - 术语与防护
Angular XSRF 文档 - XSRF 命名来源

xss

答案

核心概念

XSS（跨站脚本攻击）是指攻击者在网页中注入恶意脚本，诱导用户浏览时执行，进而窃取 Cookie、会话、敏感数据或劫持页面行为。常见于未对用户输入做充分过滤和转义的场景。

防护措施

输入校验与过滤：对所有用户输入进行白名单校验，拒绝或转义危险字符。
输出转义：输出到 HTML 时对 < > " ' & 等字符进行转义，防止脚本执行。
启用 CSP（Content Security Policy）：限制页面可执行的脚本来源，阻止内联脚本和未授权资源。
设置 HttpOnly Cookie：防止 JS 读取 Cookie，降低被窃取风险。
框架安全特性：优先使用 React、Vue 等现代框架自带的自动转义机制。

代码示例：输出转义

function escapeHTML (str) {
  return str.replace(/[<>"'&]/g, c => ({
    '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;', '&': '&amp;'
  }[c]))
}

常见误区与开发建议

仅前端转义，忽视后端校

前端如何防止加载外域脚本？

答案

核心思路

前端防止加载外域脚本，主要依赖浏览器安全策略和标准机制，降低 XSS、供应链攻击等风险。

代码示例

CSP 响应头示例（Node.js Express）：

res.setHeader('Content-Security-Policy', "default-src 'self'; script-src 'self'")

SRI 用法：

<script src="https://cdn.example.com/lib.js"
  integrity="sha384-abc123..." crossorigin="anonymous"></script>

常见误区与开发建议

仅依赖 SRI，忽视 CSP，仍可能被注入恶意脚本。
CSP 配置过宽（如 script-src *），形同虚设。
忽略 HTTPS，资源易被劫持。
动态拼接 script 标签、使用 eval 等，易被绕过安全策略。

提示

生产环境建议同时启用 CSP 和 SRI，并定期审查依赖库来源和完整性。

延伸阅读

常见 web 安全问题​

同源策略​

csrf​

xsrf​

xss​

前端如何防止加载外域脚本？​

常见 web 安全问题

同源策略

csrf

xsrf

xss

前端如何防止加载外域脚本？