--- theme: fancy --- # Web前端安全策略xss和csrf的攻击和防御这是我参与更文挑战的第12天，活动详情查看：[更文挑战](https://juejin.cn/post/6967194882926444557) 随着前端技术的不断革新，前端早已不再是简简单单的做页面了。现在的前端网站上会涉及到大量用户的数据和隐私，那这些用户数据安全吗？答案并不是肯定的。因此，这个时候前端安全就显得尤为重要。如果网站没有做安全策略，那么就会很容易被攻击者通过某些不为人知的操作，获取到用户的隐私信息。在下面的这篇文章中，将讲解前端安全策略 `xss` 和 `csrf` ！一起来一探究竟吧~ # 一、XSS跨站请求攻击 ## 1、什么是XSS 跨站脚本攻击，缩写为XSS(Cross Site Scripting)，是利用网页的漏洞，通过某种方式给网页注入恶意代码，使用户加载网页时执行注入的恶意代码。 ## 2、场景模拟假设有一个博客网站，这个博客网站的安全做的很差。那么我现在准备在这个网站上发布一篇博客，在发布的这篇博客中，我嵌入了一段 ``` 访问该页面后，表单会自动提交，相当于模拟用户完成了一次 `POST` 操作。 `POST` 类型的攻击通常比 `GET` 要求更加严格一点，但仍并不复杂。任何个人网站、博客，被黑客上传页面的网站都有可能是发起攻击的来源，后端接口不能将安全寄托在仅允许 `POST` 上面。 **3）链接类型的CSRF** 比起其他两种用户打开页面就中招的情况，链接类型的 `CSRF` 比较不常见，因为这种攻击方式**需要用户点击链接**才会触发。这种类型通常是在论坛等平台发布的图片中嵌入恶意链接，或者**以广告的形式**诱导用户中招，攻击者通常会以**比较夸张的词语**诱骗用户点击，**例如：** ```js 重磅消息！！ ``` ## 6、如何防御csrf **1）验证码** 增加验证，例如密码、短信验证码、指纹等等，强制用户必须与应用进行交互，才能完成最终请求。这种方式能很好的遏制 `csrf` ，但是用户体验相对会比较差。 **2）Referer check** `referer` 代表**请求的来源**，不可以伪造。后端可以通过写一个过滤器来检查请求的 `headers` 中的 `referer` ，检验是不是本网站的请求。但缺点是浏览器可以关闭 `referer` ，且低版本的浏览器会存在伪造 `Referer` 的风险。 `referer` 和 `origin` 的区别，只有 `post` 请求会携带 `origin` 请求头，而 `referer` 不论何种情况下都带。 **3）token** `token` 是最普遍的一种防御方法，后端先生成一个 `token` ，之后将此放在**数据库**中并发送给前端，那么前端发送请求时就会携带这个 `token` ，后端通过校验这个 `token` 和**数据库**中的 `token` 是否一致，以此来判断是否是本网站的请求。 **示例：** 用户登录输入账号密码，请求登录接口，后端在用户登录信息正确的情况下将 `token` 放到**数据库**中，并返回 `token` 给前端，前端把 `token` 存放在 `localstorage` 中，之后再发送请求都会将 `token` 放到 `header` 中。后端写一个过滤器，拦截 `POST` 请求，注意忽略掉不需要 `token` 的请求，比如登录接口，获取 `token` 的接口，以免还没有获取 `token` 就开始检验 `token` 。校验原则：**数据库**中的 `token` 和前端 `header` 中的 `token` 一致的 `post` 请求，则说明校验成功，给客户端放行。 # 三、CSRF与 XSS 区别 **CSRF 与 XSS 区别有以下两点：** - 通常来说 `CSRF` 是由 `XSS` 实现的，`CSRF` 时常也被称为 `XSRF`（`CSRF` 实现的方式还可以是直接通过命令行发起请求等）。 - 本质上讲，`XSS` 是**代码注入问题**，`CSRF` 是 **HTTP 问题**。 `XSS` 是内容没有过滤导致浏览器将攻击者的输入当代码执行，`CSRF` 则是浏览器在发送 `HTTP` 请求时候进行。 # 四、结束语对于前端来说，防范攻击还是很重要的，因为谁也预测不了我们写的网站何时会受到攻击。本文很浅很浅的谈论了关于Web前端安全中的两种攻击模式，希望对大家有帮助！ > - 关注公众号 **星期一研究室** ，第一时间关注学习干货，更多有趣的专栏待你解锁~ > - 如果这篇文章对你有用，记得**点个赞加个关注**再走哦~