前端安全，常见的攻击类型以及如何防御

1、CSRF攻击

1.1、什么是CSRF攻击

CSRF即Cross-site request forgery(跨站请求伪造)，简单来说，攻击者诱导用户进入一个第三方网站，然后该网站向被攻击网站发送跨站请求。如果用户在被攻击网站中保存了登录状态，那么攻击者就可以利用这个登录状态，绕过后台的用户验证，冒充用户向服务器执行一些操作。
比如说：发消息、转账等，而对服务器来说这些请求又是合法的，所以说可能会造成个人信息的泄露、财产的损失等。

1.2、CSRF攻击的过程

第一步，用户C打开浏览器，访问受信任网站A，输入用户名和密码请求登录网站A；

第二步，在用户信息通过验证后，网站A产生Cookie信息并返回给浏览器，此时用户登录网站A成功，可以正常发送请求到网站A；

第三步， 用户未退出网站A之前，在同一浏览器中，打开一个新的tab页访问网站B；

第四步， 网站B接收到用户请求后，返回一些攻击性代码，通过这个代码，在用户不知情的情况下携带Cookie信息，向网站A发出请求，比如说这个请求是获取用户信息的。

第五步，网站A根据cookie，会认为是用户C发送的该请求，从而导致该请求被执行，进行给用户C造成个人信息或财产的损失。

原理：
在浏览器中，所有的cookie，可以在任意一个标签页中被访问(没有设置http-only为true的情况下)（不论是否跨域）

CSRF 攻击的本质是利用 cookie 会在同源请求中主动携带发送给服务器的特点，以此来实现用户的冒充。

1.3、如何防御CSRF攻击

1. 服务器进行同源检测，验证 HTTP的 origin、Referer 字段：服务器根据 http 请求头中 origin 或者 referer信息来判断请求是否为允许访问的站点发送的。当origin 或者 referer 信息都不存在的时候，直接阻止请求。
2. 设置http-only：true,禁止cookie被浏览器通过js访问到
3. 验证Token：浏览器发送请求时，携带token，因为token存放在sessionStorage中，不会被其它网站所窃取到。

2、XSS攻击

2.1、XSS攻击是什么

XSS即Cross Site Scripting（跨站脚本攻击），攻击者通过各种方式将恶意代码注入到用户的页面中，这样就可以通过脚本进行一些操作。

例如：

• 在评论区植入JS代码，使得页面被植入广告

2.2、XSS攻击有哪些类型

1. 存储型XSS攻击：也叫持久型XSS，主要将恶意代码提交存储在服务器端，当目标用户访问该页面获取数据时，恶意代码会从服务器返回到浏览器做正常的HTML和JS解析执行，这样XSS攻击就发生了。
   存储型 XSS 一般出现在网站留言、评论等交互处。

攻击步骤：
1.攻击者将恶意代码提交到⽬标⽹站的数据库中。
2.⽤户打开⽬标⽹站时，⽹站服务端将恶意代码从数据库取出，拼接在 HTML 中返回给浏览器。
3.⽤户浏览器接收到响应后解析执⾏，混在其中的恶意代码也被执⾏。
4.恶意代码窃取⽤户数据并发送到攻击者的⽹站，或者冒充⽤户的⾏为，调⽤⽬标⽹站接⼝执⾏攻击者指定的操作。
这种攻击常⻅于带有⽤户保存数据的⽹站功能，如论坛发帖、商品评论、⽤户私信等。

1. 反射型XSS攻击：一般是攻击者通过特定手法（如电子邮件），诱使用户去访问一个包含恶意代码的 URL，当用户点击后，恶意代码会直接在用户的浏览器执行。
   反射型XSS通常出现在网站的搜索栏、用户登录口等地方，常用来窃取客户端 Cookies 。

攻击步骤：
1.攻击者构造出特殊的 URL，其中包含恶意代码。
2.⽤户打开带有恶意代码的 URL 时，⽹站服务端将恶意代码从 URL中取出，拼接在 HTML 中返回给浏览器。
3.⽤户浏览器接收到响应后解析执⾏，混在其中的恶意代码也被执⾏。
4.恶意代码窃取⽤户数据并发送到攻击者的⽹站，或者冒充⽤户的⾏为，调⽤⽬标⽹站接⼝执⾏攻击者指定的操作

反射型 XSS 跟存储型 XSS 的区别是：存储型 XSS 的恶意代码存在数据库⾥，反射型 XSS 的恶意代码存在 URL ⾥。

1. DOM型XSS攻击：指通过恶意脚本修改页面的 DOM 结构，是纯粹发生在客户端的攻击。
   DOM 型 XSS 攻击中，取出和执行恶意代码由浏览器端完成，属于前端 JavaScript 自身的安全漏洞。⽽其他两种 XSS 都属于服务端的安全漏洞。

攻击步骤：
1.攻击者构造出特殊的 URL，其中包含恶意代码。
2.⽤户打开带有恶意代码的 URL 时
3.⽤户浏览器接收到响应后解析执⾏，前端 JavaScript 取出 URL中的恶意代码并执⾏。
4.恶意代码窃取⽤户数据并发送到攻击者的⽹站，或者冒充⽤户的⾏为，调⽤⽬标⽹站接⼝执⾏攻击者指定的操作。

2.3、XSS攻击可以进行以下操作

• 获取页面的数据，如 DOM、cookie、localStorage；
• 破坏页面结构；
• DOS 攻击，发送合理请求，占用服务器资源，从而使用户无法访问服务器；
• 流量劫持（将链接指向某网站）

2.4、如何防御XSS攻击

1. 针对存储型XSS攻击，对需要插入到HTML 中的代码做好充分的转义
   例如对表示 html标记的 < > 等符号进行编码
2. 针对反射型XSS攻击，在 cookie中设置 http-only,防止客户端通过脚本(document.cookie)读取 cookie
3. 针对反射型XSS攻击，在输出 URL参数之前，要先对URL进行 URLEncode操作
4. 开启白名单，阻止白名单以外的资源的加载和运行，主要有两种方式：

• 一种是在HTTP 的header中设置Content-Security-Policy
• 一种是设置 meta 标签的方式 <meta http-equiv="Content-Security-Policy">

1. 后端接口也需要对关键字符进行过滤。

3、token为什么就比cookie安全

不论是cookie，还是token，都是提供给服务端进行用户身份的认证的。

• 发送请求时，是否会自动携带
  • 在同源请求中，浏览器会自动携带cookie，
  • 而token则需要开发者手动放入到header中

• 是否可以在其它窗口中被访问到
  • cookie，在没有设置http-only为true的情况下，可以在任意一个标签页中被访问（不论是否跨域）
  • token，存放在sessionStorage中，仅在浏览器的当前窗口中可以被访问到

4、cookie 、token是什么

• cookie是什么
  登陆后，后端生成一个sessionid放在cookie中返回给客户端，并且服务端一直记录着这个sessionid，客户端以后每次请求都会自动带上这个sessionid，服务端通过这个sessionid来验证身份之类的操作。所以别人拿到了cookie等于拿到了sessionid，就可以完全替代你。
• token是什么
  登陆后，后端会返回一个token给客户端，客户端将这个token存储起来，然后每次客户端请求都需要开发者手动将token放在header中带过去，服务端每次只需要对这个token进行验证就能使用token中的信息来进行下一步操作了。
• 对于xss攻击来说，cookie和token没有什么区别。但是对于csrf来说就有区别
  1、对于xss攻击，不管是token还是cookie，都能被拿到，没有什么区别。
  2、对于csrf来说就有区别，例子如下：
  • cookie：在浏览器中，所有的cookie，可以在任意一个标签页中被访问(没有设置http-only为true的情况下)（不论是否跨域）
  • token：存放在sessionStorage中，仅在浏览器的当前窗口中可以被访问到

5、有哪些可能引起前端安全的问题?

• 跨站脚本 (XSS)
  ⼀种代码注⼊⽅式, 为了与 CSS 区分所以被称作 XSS。由于⽹站没有对⽤户的输⼊进⾏严格的限制, 使得攻击者可以将脚本上传到服务端，再让其他⼈浏览到有恶意脚本的⻚⾯。
• 跨站点请求伪造(CSRF)
  攻击者诱导用户进入一个第三方网站，然后该网站向被攻击网站发送跨站请求。如果用户在被攻击网站中保存了登录状态，那么攻击者就可以利用这个登录状态，绕过后台的用户验证，冒充用户向服务器执行一些操作。
• iframe 的滥⽤
  iframe 中的内容是由第三⽅来提供的，页面不受控制，他们可以在 iframe 中运JavaScirpt 脚本、Flash插件、弹出对话框等等，这可能会破坏前端⽤户体验；
• 恶意第三⽅库
  ⽆论是后端还是前端应⽤开发，绝⼤多数时候都是在借助开发框架和各种类库进⾏快速开发，⼀旦第三⽅库被植⼊恶意代码很容易引起安全问题。

6、网络劫持有哪几种，如何防范？

• DNS 劫持 (输⼊京东被强制跳转到淘宝这就属于 DNS 劫持)
  由于涉嫌违法，已经被监管起来，现在很少会有 DNS劫持
• HTTP 劫持: (访问⾕歌但是⼀直有贪玩蓝⽉的⼴告)，由于 http明⽂传输,运营商会修改你的 http 响应内容(即加⼴告)
  http 劫持依然⾮常盛⾏，最有效的办法就是全站 HTTPS，将HTTP 加密，这使得运营商⽆法获取明⽂，就⽆法劫持你的响应内容。

7、浏览器渲染进程的线程有哪些

浏览器的渲染进程的线程总共有五种：

1、GUI 渲染线程

负责渲染浏览器页面，解析 HTML、CSS，构建 DOM 树、渲染树、绘制页面；
当界面重绘、回流时，该线程就会执行。

注意：GUI 渲染线程和 JS 引擎线程是互斥的，当 JS 引擎执行时 GUI 线程会被挂起，GUI 更新会被保存在一个队列中等到 JS 引擎空闲时立即被执行。

2、JS 引擎线程（JS 内核）

JS 引擎线程也称为 JS 内核，负责处理 Javascript 脚本程序，运行代码；
JS 引擎线程一直等待着任务队列中任务的到来，然后加以处理，一个标签页(一个页面)中无论什么时候都只有一个JS 引擎线程在运行JS程序 ；

注意：GUI 渲染线程与 JS 引擎线程的互斥关系，所以如果 JS 执行的时间过长，会造成页面的渲染不连贯，导致页面渲染卡顿阻塞。

3、事件触发线程

事件触发线程属于浏览器而不是 JS 引擎，用来控制事件循环；

当 JS 引擎执行代码块如 setTimeOut 时（也可能是：鼠标点击、AJAX 异步请求等），会将对应任务添加到事件触发线程中；

当对应的事件符合触发条件被触发时，该线程会把事件添加到任务队列中，等待 JS 引擎的处理；

注意：由于 JS 的单线程关系，所以这些待处理队列中的事件都得排队等待 JS 引擎处理（当 JS 引擎空闲时才会去执行）

4、定时器触发线程

定时器触发进程即 setInterval 与 setTimeout 所在线程；

通过定时器触发线程来计时，并触发定时器，计时完毕后，添加到任务队列中，等待 JS 引擎空闲后执行；

所以定时器中的任务在设定的时间点不一定能够准时执行，它只是在指定时间点将任务添加到事件队列中；

注意：根据W3C 标准的规定，定时器的定时时间不能小于 4ms，如果是小于 4ms，则默认为 4ms

5、异步 http 请求线程

异步请求建立连接后，即浏览器新开一个线程请求；

检测到连接状态变更时，如果设置有回调函数，将回调函数放入事件队列中，等待 JS 引擎空闲后执行；

8、僵尸进程和孤儿进程是什么？

• 僵尸进程:
  子进程结束了，而父进程又没有释放子进程占用的资源，这种进程称之为僵尸进程。
• 孤儿进程：
  父进程退出了，而它的一个或多个子进程还在运行，那这些子进程都会成为孤儿进程。

9、如何实现浏览器内多个标签页之间的通信?

• 1、使用websocket，由服务端作转发
  通过websocket ，由服务器做这个中介者。标签页通过向服务器发送数据，然后由服务器向其他标签页推送转发。
• 2、使用localStorage ,通过监听事件来获取数据
  使用localStorage 的方式，我们可以在一个标签页对 localStorage的变化事件进行监听，然后当另一个标签页修改数据的时候，我们就可以通过这个监听事件来获取到数据。
  这个时候 localStorage 对象就是充当的中介者的角色。
• 3、iframe中通过使用 postMessage 方法通信
  使用 postMessage 方法，如果我们能够获得对应标签页的引用，就可以使用 postMessage 方法，进行通信。
• 4、使用 ShareWorker，由共享线程作转发
  使用 ShareWorker 的方式，shareWorker 会在页面存在的生命周期内创建一个唯一的线程，并且开启多个页面也只会使用同一个线程。
  这个时候共享线程就可以充当中介者的角色。标签页间通过共享一个线程，来实现数据的交换。

10、浏览器的缓存过程，强缓存、协商缓存过程

11、点击刷新按钮或者按 F5、按 Ctrl+F5 （强制刷新）、地址栏回车有什么区别？

• 点击刷新按钮或者按 F5
  浏览器直接认为本地的缓存文件过期，但是请求时会带上 If-Modifed-Since，If-None-Match，这就意味着服务器会对文件检查新鲜度，返回结果可能是 304，也有可能是 200。
• 用户按 Ctrl+F5（强制刷新）
  浏览器不仅会对本地文件过期，而且不会带上 If-Modifed-Since，If-None-Match，相当于之前从来没有请求过，返回结果是 200
• 地址栏回车
  浏览器发起请求，按照正常流程，本地检查是否过期，然后服务器检查新鲜度，最后返回内容

参考:

CSRF概念：CSRF跨站点请求伪造(Cross—Site Request Forgery)，跟XSS攻击一样，存在巨大的危害性，你可以这样来理解：
       攻击者盗用了你的身份，以你的名义发送恶意请求，对服务器来说这个请求是完全合法的，但是却完成了攻击者所期望的一个操作，比如以你的名义发送邮件、发消息，盗取你的账号，添加系统管理员，甚至于购买商品、虚拟货币转账等。 如下：其中Web A为存在CSRF漏洞的网站，Web B为攻击者构建的恶意网站，User C为Web A网站的合法用户。

        CSRF攻击攻击原理及过程如下：

       1. 用户C打开浏览器，访问受信任网站A，输入用户名和密码请求登录网站A；

       2.在用户信息通过验证后，网站A产生Cookie信息并返回给浏览器，此时用户登录网站A成功，可以正常发送请求到网站A；

       3. 用户未退出网站A之前，在同一浏览器中，打开一个TAB页访问网站B；

       4. 网站B接收到用户请求后，返回一些攻击性代码，并发出一个请求要求访问第三方站点A；
       5. 浏览器在接收到这些攻击性代码后，根据网站B的请求，在用户不知情的情况下携带Cookie信息，向网站A发出请求。网站A并不知道该请求其实是由B发起的，所以会根据用户C的Cookie信息以C的权限处理该请求，导致来自网站B的恶意代码被执行。 

       CSRF攻击实例
       受害者 Bob 在银行有一笔存款，通过对银行的网站发送请求 http://bank.example/withdraw?account=bob&amount=1000000&for=bob2 可以使 Bob 把 1000000 的存款转到 bob2 的账号下。通常情况下，该请求发送到网站后，服务器会先验证该请求是否来自一个合法的 session，并且该 session 的用户 Bob 已经成功登陆。

        黑客 Mallory 自己在该银行也有账户，他知道上文中的 URL 可以把钱进行转帐操作。Mallory 可以自己发送一个请求给银行：http://bank.example/withdraw?account=bob&amount=1000000&for=Mallory。但是这个请求来自 Mallory 而非 Bob，他不能通过安全认证，因此该请求不会起作用。

        这时，Mallory 想到使用 CSRF 的攻击方式，他先自己做一个网站，在网站中放入如下代码： src=”http://bank.example/withdraw?account=bob&amount=1000000&for=Mallory ”，并且通过广告等诱使 Bob 来访问他的网站。当 Bob 访问该网站时，上述 url 就会从 Bob 的浏览器发向银行，而这个请求会附带 Bob 浏览器中的 cookie 一起发向银行服务器。大多数情况下，该请求会失败，因为他要求 Bob 的认证信息。但是，如果 Bob 当时恰巧刚访问他的银行后不久，他的浏览器与银行网站之间的 session 尚未过期，浏览器的 cookie 之中含有 Bob 的认证信息。这时，悲剧发生了，这个 url 请求就会得到响应，钱将从 Bob 的账号转移到 Mallory 的账号，而 Bob 当时毫不知情。等以后 Bob 发现账户钱少了，即使他去银行查询日志，他也只能发现确实有一个来自于他本人的合法请求转移了资金，没有任何被攻击的痕迹。而 Mallory 则可以拿到钱后逍遥法外。 

       CSRF漏洞检测：
       检测CSRF漏洞是一项比较繁琐的工作，最简单的方法就是抓取一个正常请求的数据包，去掉Referer字段后再重新提交，如果该提交还有效，那么基本上可以确定存在CSRF漏洞。

       随着对CSRF漏洞研究的不断深入，不断涌现出一些专门针对CSRF漏洞进行检测的工具，如CSRFTester，CSRF Request Builder等。

       以CSRFTester工具为例，CSRF漏洞检测工具的测试原理如下：使用CSRFTester进行测试时，首先需要抓取我们在浏览器中访问过的所有链接以及所有的表单等信息，然后通过在CSRFTester中修改相应的表单等信息，重新提交，这相当于一次伪造客户端请求。如果修改后的测试请求成功被网站服务器接受，则说明存在CSRF漏洞，当然此款工具也可以被用来进行CSRF攻击。
        防御CSRF攻击：

       目前防御 CSRF 攻击主要有三种策略：验证 HTTP Referer 字段；在请求地址中添加 token 并验证；在 HTTP 头中自定义属性并验证。

      （1）验证 HTTP Referer 字段

        根据 HTTP 协议，在 HTTP 头中有一个字段叫 Referer，它记录了该 HTTP 请求的来源地址。在通常情况下，访问一个安全受限页面的请求来自于同一个网站，比如需要访问 http://bank.example/withdraw?account=bob&amount=1000000&for=Mallory，用户必须先登陆 bank.example，然后通过点击页面上的按钮来触发转账事件。这时，该转帐请求的 Referer 值就会是转账按钮所在的页面的 URL，通常是以 bank.example 域名开头的地址。而如果黑客要对银行网站实施 CSRF 攻击，他只能在他自己的网站构造请求，当用户通过黑客的网站发送请求到银行时，该请求的 Referer 是指向黑客自己的网站。因此，要防御 CSRF 攻击，银行网站只需要对于每一个转账请求验证其 Referer 值，如果是以 bank.example 开头的域名，则说明该请求是来自银行网站自己的请求，是合法的。如果 Referer 是其他网站的话，则有可能是黑客的 CSRF 攻击，拒绝该请求。

        这种方法的显而易见的好处就是简单易行，网站的普通开发人员不需要操心 CSRF 的漏洞，只需要在最后给所有安全敏感的请求统一增加一个拦截器来检查 Referer 的值就可以。特别是对于当前现有的系统，不需要改变当前系统的任何已有代码和逻辑，没有风险，非常便捷。

        然而，这种方法并非万无一失。Referer 的值是由浏览器提供的，虽然 HTTP 协议上有明确的要求，但是每个浏览器对于 Referer 的具体实现可能有差别，并不能保证浏览器自身没有安全漏洞。使用验证 Referer 值的方法，就是把安全性都依赖于第三方（即浏览器）来保障，从理论上来讲，这样并不安全。事实上，对于某些浏览器，比如 IE6 或 FF2，目前已经有一些方法可以篡改 Referer 值。如果 bank.example 网站支持 IE6 浏览器，黑客完全可以把用户浏览器的 Referer 值设为以 bank.example 域名开头的地址，这样就可以通过验证，从而进行 CSRF 攻击。

即便是使用最新的浏览器，黑客无法篡改 Referer 值，这种方法仍然有问题。因为 Referer 值会记录下用户的访问来源，有些用户认为这样会侵犯到他们自己的隐私权，特别是有些组织担心 Referer 值会把组织内网中的某些信息泄露到外网中。因此，用户自己可以设置浏览器使其在发送请求时不再提供 Referer。当他们正常访问银行网站时，网站会因为请求没有 Referer 值而认为是 CSRF 攻击，拒绝合法用户的访问。

       （2）在请求地址中添加 token 并验证

         CSRF 攻击之所以能够成功，是因为黑客可以完全伪造用户的请求，该请求中所有的用户验证信息都是存在于 cookie 中，因此黑客可以在不知道这些验证信息的情况下直接利用用户自己的 cookie 来通过安全验证。要抵御 CSRF，关键在于在请求中放入黑客所不能伪造的信息，并且该信息不存在于 cookie 之中。可以在 HTTP 请求中以参数的形式加入一个随机产生的 token，并在服务器端建立一个拦截器来验证这个 token，如果请求中没有 token 或者 token 内容不正确，则认为可能是 CSRF 攻击而拒绝该请求。

        这种方法要比检查 Referer 要安全一些，token 可以在用户登陆后产生并放于 session 之中，然后在每次请求时把 token 从 session 中拿出，与请求中的 token 进行比对，但这种方法的难点在于如何把 token 以参数的形式加入请求。对于 GET 请求，token 将附在请求地址之后，这样 URL 就变成 http://url?csrftoken=tokenvalue。 而对于 POST 请求来说，要在 form 的最后加上 <input type=”hidden” name=”csrftoken” value=”tokenvalue”/>，这样就把 token 以参数的形式加入请求了。但是，在一个网站中，可以接受请求的地方非常多，要对于每一个请求都加上 token 是很麻烦的，并且很容易漏掉，通常使用的方法就是在每次页面加载时，使用 javascript 遍历整个 dom 树，对于 dom 中所有的 a 和 form 标签后加入 token。这样可以解决大部分的请求，但是对于在页面加载之后动态生成的 html 代码，这种方法就没有作用，还需要程序员在编码时手动添加 token。

         该方法还有一个缺点是难以保证 token 本身的安全。特别是在一些论坛之类支持用户自己发表内容的网站，黑客可以在上面发布自己个人网站的地址。由于系统也会在这个地址后面加上 token，黑客可以在自己的网站上得到这个 token，并马上就可以发动 CSRF 攻击。为了避免这一点，系统可以在添加 token 的时候增加一个判断，如果这个链接是链到自己本站的，就在后面添加 token，如果是通向外网则不加。不过，即使这个 csrftoken 不以参数的形式附加在请求之中，黑客的网站也同样可以通过 Referer 来得到这个 token 值以发动 CSRF 攻击。这也是一些用户喜欢手动关闭浏览器 Referer 功能的原因。

      （3）在 HTTP 头中自定义属性并验证

        这种方法也是使用 token 并进行验证，和上一种方法不同的是，这里并不是把 token 以参数的形式置于 HTTP 请求之中，而是把它放到 HTTP 头中自定义的属性里。通过 XMLHttpRequest 这个类，可以一次性给所有该类请求加上 csrftoken 这个 HTTP 头属性，并把 token 值放入其中。这样解决了上种方法在请求中加入 token 的不便，同时，通过 XMLHttpRequest 请求的地址不会被记录到浏览器的地址栏，也不用担心 token 会透过 Referer 泄露到其他网站中去。
        然而这种方法的局限性非常大。XMLHttpRequest 请求通常用于 Ajax 方法中对于页面局部的异步刷新，并非所有的请求都适合用这个类来发起，而且通过该类请求得到的页面不能被浏览器所记录下，从而进行前进，后退，刷新，收藏等操作，给用户带来不便。另外，对于没有进行 CSRF 防护的遗留系统来说，要采用这种方法来进行防护，要把所有请求都改为 XMLHttpRequest 请求，这样几乎是要重写整个网站，这代价无疑是不能接受的