追境的笔记

# 前端安全

# xss Cross-Site-Scripting

XSS (Cross-Site Scripting)，是一个我觉得耳熟能详的前端安全问题。通过构造特殊数据，在用户浏览器上执行特定脚本，从而造成危害（如以用户身份发帖、转账等）。

攻击类型

  • 反射型
  • 注入型

# 攻击案例一

页面中的数据是这样展示的

<a href="/user/1"></a> 如果用户名是<script>alert(1)</script>

最后会成为 <a href="/user/1"><script>alert(1)</script></a>,如果加载到页面中就会进行攻击

# 攻击案例二

页面中的数据是这样展示的

<img src=""> 如果图片地址为" onerror="alert(1)

最后会成为 <img src="" onerror="alert(1)"> 进行攻击

# 攻击案例三

页面中的js有这样展示

<script>var user_data = ;</script>,如果user_data为{"exploit": "</script><script>alert(1);//"}

最后执行的结果为

<script>var user_data = {"exploit": "</script><script>alert(1);//"};</script>

# xss 防御

  1. 在不同上下文中，使用合适的 escape 方式
  2. 不要相信 任何 来自用户的输入（不仅限于 POST Body，还包括 QueryString，甚至是 Headers）

# CSRF Cross-Site-Request-Forgery 跨站请求伪造

攻击者制作一个诱导页面，发送给受害者，页面内部嵌入form表单，form表单action指向目前网站。受害者访问诱导页面就会向目标网站发送请求， 请求会携带受害者cookie。

在受害者不知情的情况下，向目标网站发送请求。

为啥跨域不能阻止CSRF攻击？

跨域请求，前端会将请求发出后端也会做应答。只是响应被浏览器阻止了。

<form action="https://www.baidu.com" method="get" target="csrf">
    <input type="submit" value="点击拿钱">
</form>

<iframe frameborder="0" name="csrf"></iframe>
1
2
3
4
5

# CSRF 防御

  • samesite
  • token
  • 验证码/ csrf_token
  • referer判断

# 点击劫持

攻击者制作一个诱导页面，在诱导页面制作诱导按钮，将目标页的操作按钮覆盖。用户点击诱导按钮，此时会触发目标页面的操作按钮。从而形成点击劫持。

# 点击劫持防御

  1. 前端处理
if(top.location != window.location) {
    top.location = window.location
}
网站内嵌时，它的top和window不一样
1
2
3
4
  1. 服务端设置X-Frame-Options

← HTTP跨域 →