摘要：安全问题的分类按照所发生的区域分类后端安全问题所有发生在后端服务器应用服务当中的安全问题前端安全问题所有发生在浏览器单页面应用页面当中的安全问题按照团队中哪个角色最适合来修复安全问题分类后端安全问题针对这个安全问题，后端最适合来修复前端安全
安全问题的分类 按照所发生的区域分类
后端安全问题：所有发生在后端服务器、应用、服务当中的安全问题
前端安全问题：所有发生在浏览器、单页面应用、Web页面当中的安全问题
按照团队中哪个角色最适合来修复安全问题分类后端安全问题：针对这个安全问题，后端最适合来修复
前端安全问题：针对这个安全问题，前端最适合来修复
综合以上前端安全问题：发生在浏览器、前端应用当中或者通常由前端开发工程师来对其进行修复的安全问题
浏览器安全 同源策略是一种约定，是浏览器最核心也最基本的安全功能，限制了来自不同源的document或者脚本，对当前document读取或设置某些属性
影响“源”的因素有：host（域名或者IP地址）、子域名、端口、协议
对浏览器来说，DOM、Cookie、XMLHttpRequest会受到同源策略的限制
不受同源策略的标签
参考上图，我们可以总结，完成一次CSRF攻击，必须满足两个条件
用户登录受信任网站A，并且在本地生成Cookie
在不登出网站A的情况下，访问危险网站B
CSRF本质CSRF攻击是攻击者利用用户身份操作用户账户的一种攻击方式CSRF的防御
CSRF能攻击成功的本质原因：重要操作的所有参数都是可以被攻击者猜测到的
解决方案 1、验证码CSRF攻击过程中，用户在不知情的情况下构造了网络请求，添加验证码后，强制用户必须与应用进行交互
优点：简洁而有效
缺点：网站不能给所有的操作都加上验证码
2、Referer Check利用HTTP头中的Referer判断请求来源是否合法
Referer首部包含了当前请求页面的来源页面的地址
优点：简单易操作（只需要在最后给所有安全敏感的请求统一添加一个拦截器来检查Referer的值就行）
缺点：服务器并非什么时候都能取到Referer
很多出于保护用户隐私的考虑，限制了Referer的发送。
比如从HTTPS跳转到HTTP，出于安全的考虑，浏览器不会发送Referer
浏览器兼容性
关于Referer的更多详细资料：https://75team.com/post/everything-you-could-ever-want-to-know-and-more-about-controlling-the-referer-header-fastmail-blog.html
比如一个删除操作的URL是：http://host/path/delete?uesrname=abc&item=123
保持原参数不变，新增一个参数Token，Token值是随机的，不可预测
http://host/path/delete?username=abc&item=123&token=[random(seed)]
由于Token的存在，攻击者无法再构造出一个完整的URL实施CSRF攻击
优点：比检查Referer方法更安全，并且不涉及用户隐私
缺点：对所有的请求都添加Token比较困难
更多关于CSRF详细可参考：
CSRF 攻击的应对之道：https://www.ibm.com/developerworks/cn/web/1102_niugang_csrf/
CSRF原理剖析：http://netsecurity.51cto.com/art/200812/102951.htm
维基百科CSRF：https://en.wikipedia.org/wiki/Cross-site_request_forgery
CSRF实例：http://netsecurity.51cto.com/art/200812/102925.htm
需要注意的点：Token需要足够随机，必须用足够安全的随机数生成算法
Token应该为用户和服务器所共同持有，不能被第三方知晓
Token可以放在用户的Session或者浏览器的Cookie中
尽量把Token放在表单中，把敏感操作由GET改为POST，以form表单的形式提交，可以避免Token泄露（比如一个页面：http://host/path/manage?username=abc&token=[random]，在此页面用户需要在这个页面提交表单或者单击“删除”按钮，才能完成删除操作，在这种场景下，如果这个页面包含了一张攻击者能指定地址的图片，则这个页面地址会作为HTTP请求的Refer发送到evil.com的服务器上，从而导致Token泄露）
XSRF当网站同时存在XSS和CSRF漏洞时，XSS可以模拟客户端浏览器执行任意操作，在XSS攻击下，攻击者完全可以请求页面后，读取页面内容中的Token值，然后再构造出一个合法的请求结论
安全防御的体系应该是相辅相成、缺一不可的
3、点击劫持（ClickJacking） 什么是点击劫持点击劫持是一种视觉上的欺骗手段。攻击者使用一个透明的、不可见的iframe，覆盖在一个网页上，然后诱使用户在网页上进行操作，此时用户将在不知情的情况下点击透明的iframe页面。通过调整iframe页面的位置，可以诱使用户恰好点击在iframe页面的一些功能性按钮上。防御点击劫持：X-Frame-Options
X-Frame-Options HTTP响应头是用来给浏览器指示允许一个页面能否在、