前端安全(CSRF and XSS)

Cross-site request forgery（CSRF） 跨站请求伪造

CSRF 是什么

诱导用户进入第三方网站，在第三方网站冒用用户的登录状态进行操作。

特点

• CSRF（通常）发生在第三方域名。

• CSRF 攻击者不能获取到 Cookie 等信息，只是使用。

  预防策略

• 同源检测：origin header/ referer header

• sameSite Cookie：参数有 strict（无论如何都不允许作为第三方 cookie）、lax（改变当前页面或者在当前页面打开新页面可以作为第三方 cookie）、none

• Token：保存在服务端。1、每次加载页面，用 js 遍历 dom 树，把 a 标签、form 标签打上 token（value=token）。缺点就是页面加载后动态生成的 html 无效，且容易遗漏。2、在 url 中带上 token。ps：验证码和密码其实也可以起到 CSRF Token 的作用

• 双重 cookie：在 url 中传参?csrfcookie=xxx

Cross-Site Scripting（XSS） 跨站脚本攻击

XSS 是什么

页面被注入了恶意的代码

特点

• 攻击者提交恶意代码。
• 浏览器执行恶意代码。

预防策略

• 纯前端渲染：把代码和数据分隔开

1. 浏览器先加载一个静态 HTML，此 HTML 中不包含任何跟业务相关的数据。
2. 然后浏览器执行 HTML 中的 JavaScript。
3. JavaScript 通过 Ajax 加载业务数据，调用 DOM API 更新到页面上。

• 充分转译
• 输入内容长度控制
• Httponly cookie 只允许在 http 通信的时候读取，其他时候不能通过 js 读取
• 验证码