zoukankan      html  css  js  c++  java
  • 新手开车——HTML5安全

    一、HTML5新标签

      html5定义了很多新标签、新事件,这有可能带来新的xss攻击。

      1、<video>

      比如HTML5中新增的<video>标签,这个标签可以在网页中远程加载一段视频。与之类似的还有<audio>标签。

      <video src="http://tinyvid.tv/file/232332.ogg" onloadedtadata="alert(document.cookie);" ondurationchanged="alert("/xss2/");" ontimedate="alert(/xss1/);" tabindex="0">

      </video>

      2、iframe的sandbox

      在HTML5中,专门为iframe定义了一个新的属性,叫做sandbox。

      使用sandbox这个属性后,<iframe>标签加载后的内容将被视为一个独立的“源”,其中的脚本将被禁止执行,表单将被禁止提交,插件被禁止加载,指向其他浏览器对象的连接也会被禁止

      sandbox属性可以通过参数来支持更精确的控制。有以下几个值可以选择:

        (1)allow-same-origin:允许同源访问

        (2)allow-top-navigation:允许访问顶层窗口

        (3)allow-forms:允许提交表单

        (4)allow-scripts:允许执行脚本

      实例:

        <iframe sandbox="allow-same-origin allow-forms allow-scripts" src="http://maps.example.com/embeded.html">

        </iframe>

      3、Link Type :noreferrer

       在HTML5中为<a>标签和<area>标签定义了一个新的Link Type :noreferrer ,指定noreferrer后,浏览器在请求该标签指定的地址时将不再发送referer。

       <a href="xxx" rel="noreferrer"> teat </a>

       这种设计是出于保护敏感信息和隐私的考虑。因为referer,可能会泄露一些敏感的信息。

       这个标签需要开发者手动添加到页面的标签中,对于有需求的标签可以选择使用noreferrer。

      4、Canvas的妙用

        这个标签可以说是HTML5中最大的创新之一。<img>标签只能是远程加载一张图片,而<canvas> 标签让Javascript可以在页面中直接操作图片对象,也可以直接操作像素,构造出图片区域。

        canvas的出现极大的挑战了传统富客户端插件的地位,开发者甚至可以用canvas在浏览器上写一个小游戏。

        <canvas id="mycanvas" width="200" heigth="100" style="border:1px solid #c3c3c3">

          you browser does not support the canvas element;

        </canvas>

        <script>

          var c= document.getElementById("mycanvas");

          var cxt=c.getContext("2d");

          cxt.fileStyle="#FF0000";

          cxt.filleRect(0,0,175,75);

        </script>

      canvas提供的强大的功能,甚至可以用来破解验证码。Shaun Friedle写了一个脚本,通过JS操作Canvas中的每个像素点,成功的自动化识别了验证码。

    二、其他安全问题

     1、Cross-Origin Resource Sharing

      W3C委员会决定制定一个新的标准来解决日益迫切的跨域访问问题。这个新的标准叙述如下:

      假设从http://www.a.com/test.html发起一个跨域的XMLHttpRequest请求,请求的地址为:http://www.b.com/test.php 。

        <script>

          var client = new XMLHttpRequest();

          client.open("GET","http://www.b.com/test.php");

          client.onreadystatechang=function()  { }

          client.send(null);

        </script>

      如果是在IE8中,则需要使用XDomainRequest来跨域请求。

        var request = new XDomainRequest();

        request.open("GET",xdomainurl);

        request.send();

      如果服务器www.b.com返回一个HTTP Header:

        Access-Control-Allow-Origin:http://www.a.com

      代码如下:

        <?php

          header("Access-Control-Allow-Origin: * ");

        ?>

        Cross Domain Request Test !!

      那么这个来自http://www.a.com/test.html 的跨域请求就会被通过。

      在这个过程中,http://www.a.com/test.html 发起的请求还必需带上一个Origin Header:

        Origin :http://www.a.com

      在火狐浏览器中抓包分析(重点部分):

      请求头:

        GET  http://www.b.com/test.php   HTTP/1.1

        host:  www.b.com

        referer:  http://www.a.com/test.html

        origin:   http://www.a.com

      响应头:

        http/1.1   200   ok

        Access-Control-Allow-Origin:  *

       

      Origin Header 用于标记HTTP发起的 “源”,服务器端通过识别浏览器自动带上的这个Origin Header,来判断浏览器的请求是否来自一个合法的  “源”。Origin  Header可以用于防范CSRF,

      它不像Referer那么容易被伪造或清空。

      上面的例子中,服务器返回:

        Access-Control-Allow-Origin:  *

      从而允许客户端的跨域请求通过。在这里使用了通配符  “*” ,这是极其危险的,他将允许来自任意域的开宇请求访问成功。

     2、postMessage——跨窗口传递消息

      postMessage允许没一个window(包括当前窗口、弹出窗口、iframe等)对象网向其他的窗口发送文本消息,从而实心跨窗口的消息传递。这个功能是不受同源策略限制的。

      演示一个postMessage的用法:

      发送窗口:

        <iframe src="http://www.dev.jquery.com/message"  id="iframe"> </iframe>

        <form id="form">

          <input type="text"  id="msg" value="message to send"   />

          <input type="submit"  />

        </form>

        <script>

          window.onload=function() {

            var   win  =document.getElementById("iframe").contentWindow;

            document.getElementById("form").onsubmit=function(e)  {

              win.postMessge(document.getElementById("msg").value);

              e.preventDefault();

            };

          };

        </script>

      接受窗口:

        <b>This iframe is located on dev.jquery.com  </b>

        <div  id= "test" >send me a message ! </div>

        <script>

          document.addEventListener ("message",function(e) {document.getElementById("test").textContent=e.domain + " said: " +e.data;} ,false);

        </script>

      在这个例子中,发送窗口负责发送消息;而在接受窗口中,需要绑定一个message事件,监听其他窗口发送来的消息。这是两个窗口之间的一个  "约定" ,如果没有监听这个事件,则无法接受到消息。

      在使用postMessage()时,有两个安全问题需要注意。

      (1)、在必要时,可以在接收窗口验证Domain,甚至验证URL,以防止来自非法页面的消息。这实际是在代码中实现一次同源策略的验证过程。

      (2)、在本例中,接受的消息写入textContent,但在实际应用中,如果将消息写入innerHTML,甚至直接写入script中,则可能会导致DOM based XSS的产生。根据 “ secure by default”原则,

    在接收窗口不应该信任接收到的消息,而需要对消息进行安全检查。

      在使用postMessage,也会使XSS payload 变得更加灵活。

    3、Web  Storage

      在过去的浏览器中能够存储信息的方法有以下几种:  

        cookie               主要用于保存登录信息和少量信息。

        Flash Shared Object    后面这两个则是Adobe与微软自己的功能,并未成为一个通用化的标准。

        IE UserData

      因此出现 Web  Storage  能在客户端有一个较为强大和方便的本地存储功能.

      Web  Storage分为Session Storage 和 Local Storage。前者关闭浏览器就会消失,后者则会一直存在。Web  Storage就像一个非关系型数据库,由key-value对组成,可以通过JS对其进行操作。

      使用方法如下:

        (1)设置一个值:window.sessionStorage.setItem(key,value);

        (2)读取一个值:window.sessionStorage.getItem(key);

      Web  Storage也受到同源策略的约束,每个域所拥有的信息只会保存在自己的域下,如下例子:

        <script>

          if( document.domain == "www.a.com")

          {

            window.localStorage.setItem("test",123);

          }

          alert(window.localStorage.getItem("test"));

        </script>

      当访问  http://www.a.com/test.html  就会弹出  123

      当访问  http://www.b.com/test.html  弹出null 。

      Web  Storage 的强大功能也为XSS Payload打开方便之门。攻击者有可能将恶意代码保存在  Web  Storage 中,从而实现跨页面攻击。

      当Web  Storage中保存有敏感信息时,也可能会成为攻击的目标,xss攻击完全可以完成这一过程。

        

            

  • 相关阅读:
    书籍推荐:《C#7.0本质论》
    KPI在小型产品团队中的实践
    程序员如何学习英语
    端到端测试实践:Jenkins集成TestCafe
    对产品质量的一点思考
    不断进化的分支和需求管理
    书籍推荐:《More Effective C#》
    带你了解C#每个版本新特性
    不断进化的分支和需求管理
    怎样学习和阅读技术书籍?
  • 原文地址:https://www.cnblogs.com/hdsec/p/8433323.html
Copyright © 2011-2022 走看看