一、XSS （Cross-Site Scripting）跨站脚本攻击
通常指通过“HTML注入”篡改了网页，插入了恶意的脚本，从而在用户浏览网页时，获取用户信息、控制用户浏览器等的一种攻击
分类：持久性（存储型xss）
指攻击者通过漏洞将恶意内容写在数据库中，然后当其他用户访问含有这些恶意数据的网页时，就遭受了攻击。攻击位置常常在留言板，阅读列表等。
非持久性（ 反射型xss）
把用户输入的数据或者url携带的数据“反射”给浏览器，往往是黑客通过诱使用户点击一个恶意链接从而达到攻击目的
非持久性（ Dom型xss）
客户端脚本使用来自用户请求的恶意内容将HTML写入自己的页面 基于DOM的XSS是基于反射XSS的另一种形式。 DOM和'传统'反射XSS之间的区别在于有没有和服务器进行交互。
二、CSRF (Cross-site request forgery) 跨站请求伪造
本质：攻击者利用用户身份操作用户账户的一种攻击方式
原理：
参考上图，完成一次CSRF攻击，必须满足两个条件：
1、用户登录受信任网站A，并且在本地生成Cookie
2、用户在不退出网站A的情况下，访问危险网站B
示例：
1、银行网站A，它以GET请求来完成银行转账的操作，如： http://www.mybank.com/Transfer.php?toBankId=123&money=1000
2、危险网站B，它里面有一段HTML的代码如下：<img src=http://www.mybank.com/Transfer.php?toBankId=123&money=1000>
3、你登录了银行网站A，然后访问危险网站B，你会发现你的银行账户少了1000块
三、点击劫持（clickJacking）
点击劫持是一种视觉上的欺骗手段。攻击者使用一个透明的、不可见的iframe，覆盖在一个网页上，然后诱使用户在网页上进行操作，此时用户将在不知情的情况下点击透明的iframe页面。通过调整iframe页面的位置，可以诱使用户恰好点击在iframe页面的一些功能性按钮上。
常见方式：flash劫持，图片覆盖攻击，拖拽劫持，触屏劫持
劫持防御：
1、frame busting :通过js来禁止iframe嵌套，缺点：容易被绕过
2、使用 X-Frame-Options HTTP 头部 ，有三个值：
DENY :浏览器拒绝当前页加载任何frame页面
SAMEORIGIN:只允许加载同源域名下的页面
ALLOW-FROM:可定义允许frame加载的页面地址
iframe问题所在：
如果iframe中的域名因为过期而被恶意攻击者抢注，或者第三方被黑客攻破，iframe中的内容被替换掉了，从而利用用户浏览器中的安全漏洞下载安装木马、恶意勒索软件等等
防御：
添加 sanbox属性，最小权限原则 <iframe sandbox src="..."> ... </iframe>
sandbox 提供配置参数
1、allow-forms：允许iframe中提交form表单
2、allow-popups：允许iframe中弹出新的窗口或者标签页（例如，window.open()， showModalDialog()，target=”_blank”等等）
3、allow-scripts：允许iframe中执行JavaScript
4、allow-same-origin：允许iframe中的网页开启同源策略
四、错误内容推断
产生原因：
假设通过http请求一个资源，后端通过Content-Type Header建议浏览器按照图片来渲染这次的HTTP响应，但是浏览器过于“智能”，强大的容错能力，发现响应中内容其实是JavaScript，于是就擅自做主把这段响应当做JS脚本来解释执行，安全问题也就产生了。
防御：
通过设置X-Content-Type-Options这个HTTP Header明确禁止浏览器去推断响应类型， 后端服务器返回的Content-Type建议浏览器按照图片进行内容渲染，浏览器发现有X-Content-Type-OptionsHTTP Header的存在，并且其参数值是nosniff，因此不会再去推断内容类型
五、本地存储数据泄露
产生原因：现在很多数据，包括一些敏感信息都存储在前端，如果发生xss等漏洞，这些信息就好被获取
防御：加密，不要存储在前端本地
六、不安全的第三方依赖包
第三方组件、依赖类库等存在安全漏洞 例如：jQuery就存在多个已知安全漏洞，例如jQuery issue 2432，使得应用存在被XSS攻击的可能。而Node.js也有一些已知的安全漏洞，比如CVE-2017-11499，可能导致前端应用受到DoS攻击。 防御：NSP(Node Security Platform)，Snyk 工具扫描
七、缺失静态资源完整性校验
产生原因：静态资源存放到CDN，如果CDN被劫持了或者CDN中的资源被污染，那我们的前端应用拿到的就是有问题的JS脚本或者Stylesheet文件。
防御：用浏览器提供的SRI（Subresource Integrity） <script src=“https://example.js” integrity=“sha384-eivAQsRgJIi2KsTdSnfoEGIRTo25NCAqjNJNZalV63WKX3Y51adIzLT4So1pk5tX”></script>
八、防范措施
1、谨慎用户输入信息，进行输入检查（客户端和服务端同时检查）
2、在变量输出到HTML页面时，都应该进行编码或转义来预防XSS攻击
3、该用验证码的时候一定要添上
4、尽量在重要请求上添加Token参数，注意Token要足够随机，用足够安全的随机数生成算法
5、当有<frame><iframe><object>时，合理设置X-Frame-Options HTTP响应头，添加sanbox属性等
6、检查验证请求来源，对每一个重要的操作都进行重新验证
7、不要将重要文件、备份文件存放在公众可以访问到的地方
8、安全防御的体系是相辅相成、缺一不可的
