2025前端安全面试常考

2026-01-12 69 阅读2分钟

1.XSS

定义：攻击者向页面注入恶意脚本，在用户浏览器中执行
常见的攻击方式：

存储型	反射型	DOM型
恶意脚本存进数据库	URL参数直接返回页面	JS操作DOM导致执行

常见的防御方式
1. Cookie防护：HttpOnly，只能防止JS读取Cookie。
1. CSP（Content-Security-Policy）：禁止内联脚本

2.CSRF

攻击者诱导用户在已经登录的状态下，向目标网站发送非本意的请求
跨站请求伪造 HttpOnly只能防止XSS，但是无法防CSRF

场景：登录银行网站A：

Cookie: sessionId=abc123; HttpOnly

恶意注入攻击者页面：

<img src="https://bank.com/transfer?to=hacker&#x26;money=10000">

浏览器将自动发送请求到bank.com，并且自动携带cookie发送请求

防御方式

结合后端生成的CSRF Token；

 Cookie（HttpOnly, SameSite）
   └── Session / JWT Access Token（身份）
 请求头
   └── X-CSRF-Token（请求合法性）

samesite Cookie；
辅助校验

3.SQL注入

定义：用户拼接SQL，导致数据库被操控；

方式：

  SELECT * FROM users WHERE username = 'admin' -- ' AND password='xxx'

绕过登录，窃取、删除数据等

防御方式： 1.后端：参数化查询 2.前端：永远不能相信任何输入

4.身份认证

JWT

JWT是一种无状态的身份认证Token，服务端不会保存会话状态；
- 双Token的好处：
  - AccessToken：短期有效
  - RefreshToken：长期有效，仅用于刷新
  - 好处：降低token泄露的风险，可以做单点登录控制，后台适合做分布式
- HttpOnly的Cookie也不等于安全
  - 原因：浏览器自动携带，会被CSRF攻击利用，前端无法控制刷新时机和频率（刷新逻辑暴露在前端 == 攻击面扩大）
```
  Browser
    └── Session Cookie（HttpOnly）
          ↓
        BFF
          └── Access Token（短）
          └── Refresh Token（长）
                ↓
          Resource Server
```

现代前端安全和BFF架构的最佳实践是：前端只保留HttpOnly Session。 RefreshToken在BFF层可以存Redis（支持失效，踢下线），DB（审计，安全）；内存（小规模）

SessionId在服务端的角色和在BFF中的角色不同，流程是一样的，流程可以参考下图

Session

SessionID在BFF中的角色：

不是业务凭证，只是前端会话标识
Session里面通常只存用户标识（userId）、绑定的token引用，风控信息（设备、IP），过期时间
401的前端策略：
- 清理本地状态
- 跳转登录页
- 弹登录过期提示
403的前端策略
- 不跳登录
- 提示“无权限”
- 隐藏按钮