跳到主要内容

跨域与前端安全

同源策略是什么​

浏览器默认要求协议、域名、端口都一致，才认为两个地址同源。这个限制主要是为了隔离不同站点之间的权限边界。

常见跨域解决方案​

  • CORS：最主流，服务端通过响应头明确放行
  • 反向代理：开发环境或网关层统一转发
  • postMessage：窗口间通信
  • JSONP：历史方案，只适用于 GET，现代项目很少再用

预检请求要点​

下面这些情况更容易触发浏览器的预检请求：

  • 使用 PUT、DELETE、PATCH
  • 自定义请求头
  • content-type 不是简单类型

所以排查跨域时，不能只看业务请求本身，也要看前面的 OPTIONS 是否被正确响应。

XSS 与 CSRF​

XSS​

本质是把不可信内容当成代码执行。

常见防护：

  • 对输入和输出做转义或净化
  • 避免直接拼接 HTML
  • 开启 Content-Security-Policy
  • 敏感 Cookie 设置 HttpOnly

CSRF​

本质是借用户已登录状态，诱导浏览器替用户发请求。

常见防护：

  • SameSite Cookie
  • CSRF Token
  • 服务端校验 Origin / Referer
  • 对关键操作做二次确认
  • HttpOnly：前端 JS 不能直接读取
  • Secure：只在 HTTPS 下发送
  • SameSite：限制跨站请求携带 Cookie 的策略