Web 前端安全

• XSS 跨站脚本攻击
  • DOM 型 XSS（前端关注）
• CSRF 跨站请求伪造
• 点击劫持（ClickJacking）
• HTTP 劫持
• 混合内容（http + https）
• cookie 相关
• Crypto
• 中间人攻击

crypto, TSL/SSL HTTPS XSS

XSS 跨站脚本攻击

在网页中植入恶意脚本，输入源有脚本参数、表单提交

危害：获取用户 cookie

解决方式：

• HttpOnly，无法通过 JS 读、改、删 Cookie
• CSP 内容安全策略

设置 header，做哈希验证

content-security-policy: script-src 'sha256-wxWy1+9LmiuOeDwtQyZNmWpT0jqCUikqaqVlJdtdh/0='

避免使用eval

Self-XSS 欺骗用户在控制台运行恶意代码

谷歌翻译的做法，在控制台显示信息警告用户

转义为实体字符，正则替换

DOM 型 XSS（前端关注）

使用 Vue 强转成字符串，不会有问题.

Vue中是如何防御XSS（注入攻击）的 - SegmentFault 思否

通用的规则是只要允许执行未过滤的用户提供的内容 (不论作为 HTML、JavaScript 甚至 CSS)，你就可能令自己处于被攻击的境地。这些建议实际上不论使用 Vue 还是别的框架甚至不使用框架，都是成立的。- 安全 — Vue.js

WEB前端安全自查和加固 - Thoughtworks洞见

XSS payload DEMO

CSRF 跨站请求伪造

伪造请求

第三方域名页面，发起合法请求，服务器没有做来源过滤。举例，合法调用接口设置 Gmail 转发，获取隐私邮件

解决：

• 同源检查 origin/referer
• CSRF Token，如表单提交必须带上 token。原理是攻击者只带 cookie 无法请求成功
• 交互验证码（短信炸弹）

前端安全系列（二）：如何防止CSRF攻击？ - 美团技术团队

点击劫持（ClickJacking）

X-Frame-Options 防止页面被嵌入恶意利用

前端安全编码规范 - SegmentFault 思否

HTTP 劫持

内容未加密，页面被插入内容，如弹窗

应对：升级 HTTPS 内容加密

混合内容（http + https）

• 被动 image/media 威胁性低，可访问，但锁、控制台会提示
• 主动 script style iframe flash 拦截

什么是混合内容？  |  Web  |  Google Developers

cookie 相关

• HttpOnly 限制 cookie 只能发请求携带，禁用 JS 读取。服务端设置Set-Cookie，减轻 XSS 攻击
• SameSite 减轻 CSRF 攻击
• 会话 cookie（默认），页面关闭时移除
• 常驻 cookie

Crypto

敏感数据加密保存

中间人攻击

中间人攻击 - 维基百科，自由的百科全书

证书校验

web-develop/大话WEB安全.md at master · SFLAQiu/web-develop

2022 Frontend security in 1 tweet:

1. Use HTTPs
2. Server render
3. Store JWT/token in 'secure', 'samesite', 'httponly' cookie (prevent XSS).
4. Declare content security policy (prevent XSS)
5. Regen cookies when user auths (prevent session fixation)
6. Set short cookie lifetime