记一笔前端需要关注的安全知识

很多时候我们只是关注我们如何去页面，完成需求，怎么使用框架，样式兼容。很多时候我们忽略前端的安全问题。我以前觉得前端所谓的安全防范，其实都是没有用的，毕竟在浏览器，任何东西都暴露给用户，所以安全更多是后端去关注即可。但随着做前端的时间久了，会去深入研究一下曾经忽略的细节。才发现前端的安全其实是非常有必要的。

什么是同源策略？

同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。

同源相当于同域名+同端口号

当涉及到同源策略时，Internet Explorer 有两个主要的不同点

• 授信范围（Trust Zones）：两个相互之间高度互信的域名，如公司域名（corporate domains），不遵守同源策略的限制。
• 端口：IE 未将端口号加入到同源策略的组成部分之中，因此 http://company.com:81/index.html 和http://company.com/index.html 属于同源并且不受任何限制。

万恶的IE，就是那么奇葩！

更详细的同源策略解析可以参考以下链接：

浏览器的同源策略

三大前端安全问题

1. 跨站脚本攻击（XSS）
2. CSRF（跨站点请求伪造）
3. 点击劫持（ClickJacking）

跨站脚本攻击（XSS）

跨站脚本攻击其实说白了就是通过一些方式把JavaScript代码注入到用户的dom中并执行，从而实现一些盗取用户cookies获取监听用户输入的一些行为。

反射型XSS

其实说白了就是用户输入的内容通过url发送带有xss攻击的代码到后端，后端把请求的内容解析后返回给前端触发xss攻击。这种攻击的前提是后端需要返回前端请求的内容到浏览器，否则攻击不成立。感觉有点没用，自己攻击自己吗？感觉要实现这种攻击，公司内部就有内鬼了。哈哈！

如何反射型XSS防御？

前端提交任何内容前，先将内容转义即可。后端不要直接返回前端提交的任何内容，返回前同样进行转义。这样就能很好的防御此类攻击。

存储型XSS

通常这种xss攻击都在博客类网站中常见，攻击者通过提交一篇带有攻击代码的文章到服务器。服务器在其他用户浏览这篇文章的时候，把攻击代码运行在浏览器中，从而实现攻击。这类攻击是持久性的，只要一天没有发现，就会一直攻击用户，盗取用户信息等。

如何存储型XSS防御？

其实和反射性xss的防御方式一样，前后端对提交的任何内容都进行转义，并且在后端可以通过过滤的方式过滤script标签或者一些敏刚的符号，前端在展示文章的时候也可以通过直接以字符串显示，而并非通过DOM去进行显示。当然如果业务需要以HTML展示的情况下，也可以过滤一些标签后再进行展示。

其实还有一些文章说到的一些攻击手法，例如：DOM Based XSS：通过修改页面的DOM节点形成的XSS，XSS Payload攻击等，其实原理都一样。通过用户无意中执行了一些xss代码去实现的。

总结XSS的防御

转义转义转义，重要的事情说三遍！基本上将字符串转义后提交就能很好的防住大部分的XSS攻击了。敏感的cookies信息通过httpOnly属性，让JavaScript无法获取。

CSRF（跨站点请求伪造）

原理：

1. 用户登录了受信的网站，生成了对应的cookie
2. 用户不退出登录受信网站的情况下，访问了钓鱼网站
3. 钓鱼网站调用通过image或其他方式访问了受信网站的url，然后浏览器就会带上受信网站的cookie发出请求，模拟真实用户访问。

CSRF攻击是攻击者利用用户身份操作用户账户的一种攻击方式

防御CSRF攻击

1. 对于一些敏感接口添加验证码（用户体验不好）
2. 使用post方式提交数据（但是还是可以用form来模拟）
3. referer检测（有可能获取不到）
4. 敏感接口需要提交token（最有效，但也是最麻烦）

点击劫持（ClickJacking）

点击劫持其实就是在一个页面中通过一些视觉的效果例如诱人的图片，或者一个透明的遮罩层盖在内容之上，引诱用户点击，触发对应的一些攻击行为。

防御点击劫持

X-Frame-Options HTTP响应头是用来给浏览器指示允许一个页面能否在<frame>、<iframe>、<object>中展现的标记。有三个可选的值。

1. DENY：浏览器会拒绝当前页面加载任何frame页面（即使是相同域名的页面也不允许）
2. SAMEORIGIN：允许加载frame页面，但是frame页面的地址只能为同源域名下的页面
3. ALLOW-FROM：可以加载指定来源的frame页面（可以定义frame页面的地址）

另外一种会出现点击劫持的就是文章网站，例如攻击者提交了一个带有一些特殊布局的html标签和点击事件的文章，如果没有XSS防御的话，就很容易被点击劫持了。还是那个方法，转义或者过滤敏感属性。

总结

• XSS攻击：转义和过滤用户提交的任何内容。
• CSRF攻击：敏感接口添加token参数进行验证是最好的方法。
• 劫持攻击：使用X-Frame-Options加上用户提交内容过滤和转义。

不看不知道，一看吓一跳。前端安全是应该重视的一环，特别是做文章内容的网站，一定要留意这几类攻击，能让网站安全不少。如果有黑客利用这些漏洞，套取用户账号密码等信息，很容易造成经济或其他损失。当然日常的开发中，更多安全的问题都是交给后端处理，但是如果前端也进行一波处理，那不是更好吗？