“如果有足够的眼球，所有的虫子都很浅。” 

— Linus Torvalds

1：跨站脚本攻击（XSS攻击：Cross Site Script）

概述：

攻击者向目标网站注意恶意脚本，在浏览器上运行。通过这种方式可以窃取用户隐私信息、钓鱼欺骗、传播恶意代码等。

分类：

①：DOM-Based型（不持久）

利用dom本身的缺陷，注入脚本进行攻击。

②：反射型（不持久）

攻击者先将含有XSS代码的恶意链接邮件发送给目标用户，用户打开后，会访问链接对应的服务器，服务器收到链接请求时，会将带有的XSS代码的数据再次发送给用户，此时用户浏览器就会默认执行带有XSS代码的脚本，此时会触发XSS漏洞。

③：存储型（持久）

前端用户通过表单输入将带有恶意脚本的信息传递后端服务器保存，这种攻击具有稳定持续性。

防御措施：

①：过滤

过滤用户输入的script、iframe，style节点。

②：编码

Html Entity编码

③：将cookie设置成http-only，这样js就无法获取了。

2：跨站请求伪造（CSRF：Cross site request forgery)

概述：

也被称为 one-click attack 或者 session riding，通常缩写为 CSRF 或者 XSRF， 是一种挟制用户在当前已登录的Web应用程序上执行非本意的操作的攻击方法。

防御措施：

①：referer字段

HTTP Referer是header的一部分，当浏览器向服务器发送请求的时候，一般会带上Referer，告诉服务器该网页是从哪个页面链接过来的，后端通过该字段验证用户请求是否来自于本网站，如果是就响应，否则就拦截。

缺点：无法保证浏览器是否存在漏洞已经影响了该字段的准确性，也不能保证攻击者篡改该字段。

②：添加token校验

由于CSRF的本质在于攻击者欺骗用户去访问自己设置的地址，所以如果要求在访问敏感数据请求时，要求用户浏览器提供不保存在cookie中，并且攻击者无法伪造的数据作为校验，那么攻击者就无法再运行CSRF攻击。这种数据通常是窗体中的一个数据项。服务器将其生成并附加在窗体中，其内容是一个伪随机数。当客户端通过窗体提交请求时，这个伪随机数也一并提交上去以供校验。正常的访问时，客户端浏览器能够正确得到并传回这个伪随机数，而通过CSRF传来的欺骗性攻击中，攻击者无从事先得知这个伪随机数的值，服务端就会因为校验token的值为空或者错误，拒绝这个可疑请求。

③：将cookie设置成http-only，这样js就无法获取了。

3：点击劫持

概述：

视觉欺骗，通过给网站上覆盖一个透明的按钮，诱使用户点击进行攻击。

防御措施：

①：X-Content-Security-Policy（CSP）

内容安全警察，可对网站页面内容中的图片、字体、脚本等来源做限制。

②：X-Frame-Options(存在响应头中)

Frame框选项条件，可以限制响应的内容是否可以在<iframe>，<Object>中展示。

可以选值为：

● DENY 拒绝，不允许在框架中展示。

● SAMEORIGIN 可以展示，必须同源。

● ALLOW-FROM uri 在指定来源的框架中展示。

4：HTTP劫持

概述：

攻击者通过劫持HTTP，给目标网站插入小广告，弹窗。

防御措施：

设置iframe的sandbox属性，这是H5新增属性。可选值为：

①："" 空值将会启用一系列对行内框架中内容的额外限制。

②：allow-same-origin 允许同源展示。

③：allow-top-navigation 允许展示内容包含导航条。

④：allow-form 允许表单提交。

⑤：allow-script 允许脚本执行。

5：不安全的第三方包

概述：

项目中使用的三方依赖包不安全，存在安全漏洞。

防御措施：

使用三方依赖检查工具。

①：NSP (Node Security Platform)

扫描检查node依赖包的安全漏洞。

● npm i nsp -g // 安装包

● nsp check // 检查漏洞

● nsp check --filter 4  // 检查CVSS分数高于4的漏洞

● nsp check --threshold 4 // 检查CVSS分数高于4的漏洞

②：npm6.0+

npm从6.0开始会基于nsp数据库自动检查安装请求，如果代码包含安全漏洞的话，将会返回警告。

● npm set audit true // 开启检查

● npm aduit fix // 检查并修复

③：Snyk

Snyk是一个专注于JavaScript npm依赖项的商业服务。它不仅提供了检测JavaScript项目中已知漏洞的工具，还帮助用户使用Snyk创建的引导式升级和开源补丁来解决这些问题。

Snyk有自己的漏洞数据库，它从NIST NVD和NSP获取数据。Snyk的重点是通过更好的协作工具和更严格的GitHub集成，扩展整个组织及其团队的已知漏洞处理。

仅对开源项目免费, 闭源项目受限次数的扫描(每月200次)。相比于官方的npm audit拥有更大的漏洞库，支持语言更多，拥有更好的整合。

④：OWASP（Open Web Application Security Project）

Web应用程序安全项目，它是个非盈利性组织，至于保护Web应用程序的安全。

OWASP开发的依赖扫描工具，除了node，还支持Ruby，Python, C/C++。

6：本地存储数据泄露

概述：

前端存储了敏感信息，造成数据泄露。

防御措施：

不要在前端保存敏感信息，如果需要请使用加密数据。

7：流量劫持（CDN劫持）

概述：

在我们访问网站时，会进行三个步骤，首先访问DNS服务器，将域名解析为IP地址，然后根据P地址访问目标网站。如果目标网站有CDN服务，就会访问CDN节点上的静态资源。而流量攻击就是对访问过程中的数据进行篡改、转发流量。

防御措施：

使用https

8：文件上传漏洞

概述：

攻击者上传了一个可执行的文件到服务器执行。

防御措施：

前后端对上传文件进行校验过滤，如文件后缀白名单等。

9：文件下载漏洞

概述：

目标网站对用户下载内容未做限制，造成攻击者下载敏感文件信息。

防御措施：

对用户下载的文件类型，目录做限制。