即使用了 https 也不要通过 query strings 传敏感数据

即使用了 https 也不要通过 query strings 传敏感数据

2017/10/16 · 基础技术 ·
HTTPS

本文由 伯乐在线
xiaoheike
翻译,艾凌风
校稿。未经许可,禁止转载!
英文出处:HttpWatch。欢迎加入翻译组

服务器端的 log 将明文记下完整 url;浏览器上的访问历史也会明文记下完整
url;Referrer headers 里也忠实记下完整 url,然后在别人家的 Google
Analytics 上显示。

我们经常听到的一个常见问题是:“URL
中的参数是否可以安全地传递到安全网站?”这个问题常常出现在客户看了
HttpWatch 捕获的 HTTPS 请求后,想知道还有谁可以看到这些数据。

 

例如,假设在一个查询中,使用如下安全的 URL 传递密码字符串:

https://www.httpwatch.com/?password=mypassword

HttpWatch 能够显示安全请求的内容,因为它与浏览器集成,因此它能够在
HTTPS 请求的 SSL
连接对数据加密之前查看数据。网赌平台哪个信誉好 1

如果你使用网络嗅探器查看,例如
Network Monitor,对于同一个请求,你只能够查阅加密之后的数据。在数据包跟踪中没有可见的网址,标题或内容:

网赌平台哪个信誉好 2

您可以信任 HTTPS 请求是安全的,只要:

  • 未忽略任何SSL证书警告
  • Web 服务器用于启动 SSL 连接的私钥在 Web 服务器本身之外不可用。

因此,在网络层面,URL 参数是安全的,但是还有一些其他基于 URL
泄漏数据的方法:

  1. URL 存储在 Web 服务器日志中–通常每个请求的完整 URL
    都被存放在服务器日志中。这意味着 URL
    中的任何敏感数据(例如密码)会以明文形式保存在服务器上。以下是使用查询字符串通过
    HTTPS 发送密码时存储在 httpwatch.com 服务器日志中的条目:
    **2009-02-20 10:18:27 W3SVC4326 WWW 208.101.31.210 GET
    /Default.htm password=mypassword 443 …
    通常认为即使是在服务器上,存储明文密码从来都不是好想法
    2.URLs are stored in the browser history – browsers save URL
    parameters in their history even if the secure pages themselves are
    not cached. Here’s the IE history displaying the URL parameter:
  2. URL 存储在浏览器历史记录中–即使安全网页本身未缓存,浏览器也会将
    URL 参数保存在其历史记录中。以下是 IE 的历史记录,显示了 URL
    的请求参数:网赌平台哪个信誉好 3

如果用户创建书签,查询字符串参数也将被存储。

  1. URLReferrer 请求头中被传递–如果一个安全网页使用资源,例如
    javascript,图片或者分析服务,URL 将通过 Referrer
    请求头传递到每一个嵌入对象。有时,查询字符串参数可能被传递并存放在第三方站点。在
    HttpWatch 中,你可以看到我们的密码字符串正被发送到
    Google Analytics网赌平台哪个信誉好 4

结论

解决这个问题需要两步:

  • 只有在绝对必要的情况下传递敏感数据。一旦用户被认证,最好使用具有有限生命周期的会话
    ID 来标识它们。

使用会话层级的 cookies 传递信息的优点是:

  • 它们不会存储在浏览器历史记录中或磁盘上
  • 它们通常不存储在服务器日志中
  • 它们不会传递到嵌入式资源,例如图片或 JavaScript
  • 它们仅适用于请求它们的域和路径

以下是我们的在线商店中,用于识别用户的 ASP.NET 会话 cookie 示例:

网赌平台哪个信誉好 5

请注意,cookie 被限制在域
store.httpwatch.com,并且在浏览器会话结束时过期(即不会存储到磁盘)。

你当然可以通过 HTTPS
传递查询字符串,但是不要在可能出现安全问题的场景下使用。例如,你可以安全的使用它们显示部分数字或者类型,像
accountview 或者
printpage,但是不要使用它们传递密码,信用卡号码或者其他不应该公开的信息。

1 赞 收藏
评论

h5新特性总览

关于作者:xiaoheike

网赌平台哪个信誉好 6

简介还没来得及写 :)
个人主页
·
我的文章
·
10
·
     

网赌平台哪个信誉好 7

<a name=”t1″></a><a target=”_blank” name=”t1″ style=”color:rgb(12,137,207)”></a>移除的元素

纯表现的元素:

basefont、big、center、font等

对可用性产生负面影响的元素:

frame、frameset、noframes

<a name=”t2″></a><a target=”_blank” name=”t2″ style=”color:rgb(12,137,207)”></a>新增的API

语义:

能够让你更恰当地描述你的内容是什么。

连通性:

能够让你和服务器之间通过创新的新技术方法进行通信(web sockets等)。

离线 & 存储:

能够让网页在客户端本地存储数据以及更高效地离线运行(离线资源、在线和离线事件、DOM存储、IndexDB、自web应用程序中使用文件[FileReader])。

多媒体:

使 video 和 audio 成为了在所有 Web 中的一等公民。

2D/3D 绘图 & 效果:

提供了一个更加分化范围的呈现选择(canvas、webGL)。

性能 & 集成:

提供了非常显著的性能优化和更有效的计算机硬件使用(WebWorkers、XMLHttpRequest2、HistoryAPI、拖放、requestAnimationFrame、全屏API、指针锁定API、在线和离线事件)。

设备访问 Device Access:

能够处理各种输入和输出设备(触控事件touch、使用地理位置定位、检测设备方向)。

<a name=”t3″></a><a target=”_blank” name=”t3″ style=”color:rgb(12,137,207)”></a>部分API详述

由于篇幅较长,可以选择感兴趣的部分阅读
存储机制
File
API

Web
Worker

history对象
2D绘图(canvas和svg)
H5的兼容性

<a name=”t4″></a><a target=”_blank” name=”t4″ style=”color:rgb(12,137,207)”></a>web存储机制

Web
Storage的目的是克服由cookie带来的一些限制,当数据需要被严格控制在客户端上时,无需持续地将数据发回服务器。Web
Storage的两个主要目标是:提供一种在cookie之外存储会话数据的途径;提供一种存储大量可以跨会话存在的数据机制。最初的Web
Storage规范包含了两种对象的定义:sessionStorage和globalStorage。这两个对象在支持的浏览器中都是以windows对象属性的形式存在的。

网赌平台哪个信誉好,<a target=”_blank” name=”t5″ style=”color:rgb(12,137,207)”></a>sessionStorage对象

sessionStorage对象存储特定于某个会话的数据,也就是该数据只保持到浏览器关闭。这个对象就像会话cookie,也会在浏览器关闭后消失。存储在sessionStorage中的数据可以跨越页面刷新而存在,同时如果浏览器支持,浏览器崩溃并重启之后依然可用(FireFox和WebKit都支持,IE不支持)
因为sessionStorage对象绑定于某个服务器会话,所以当文件在本地运行的时候是不可用的,存储在sessionStorage中的数据只能由最初给对象存储数据的野蛮访问到,所以对多页面应用有限制。
sessionStorage对象可以使用setItem()或者直接设置新的属性来存储数据

//使用sessionStorage方法存储数据
sessionStorage.setitem('name','Nicholas');
//使用属性存储数据
sessionStorage.book = 'Profession JavaScript';

不同浏览器写入数据方面略有不同。FireFox和WebKit实现了同步写入,所以添加到存储空间中的数据时立刻被提交的。而IE的实现则是异步写入数据,所以在设置数据和将数据实际写入磁盘之间可能有一些延迟。对于少量数据而言,这个差异是可以忽略的。对于大量数据,IE要比其他浏览器更快的恢复执行,因为它会跳过实际的磁盘写入过程
在IE8中可以强制把数据写入磁盘:在设置新数据之前使用begin()方法,并且在所有设置完成后调用commit()方法

sessionStorage.begin();//确保在这段代码执行的时候不会发生其他磁盘写入操作
sessionStorage.setitem('name','Nicholas');
sessionStorage.book = 'Profession JavaScript';
sessionStorage.commit();

sessionStorage中有数据时,可以使用getItem()或者通过直接访问属性名来获取数据。

//使用方法读取数据
var name = sessionStorage.getItem('name');
//使用属性读取数据
var book = sessionStorage.book;

还可以通过结合length属性和key()方法来迭代sessionStorage的值。

for(var i = 0,len = sessionStorage.length; i < len; i++){
    var key = sessionStorage.key(i);
    var value = sessionStorage.getItem(key);
    alert(key + "=" + value);
}

要从sessionStorage中删除数据可以使用delete操作符删除对象属性,也可以调用removeItem()方法。

delete sessionStorage.name;
sessionStorge.removeItem('book');

<a target=”_blank” name=”t6″ style=”color:rgb(12,137,207)”></a>globalStorage对象

sessionStorage对象应该主要用于针对会话的小段数据的存储。如果需要跨越花花存储数据,那么globalStorage或者localStorage更为合适
要使用globalStorage,首先要制定哪些域可以访问该数据。可以通过方括号标记使用属性来实现。

//保存数据
globalStorage['wrox.com'].name = 'Nicholas';
//获取数据
var name = globalStorage['wrox.com].name;

在这里,访问的是针对域名wrox.com的存储空间。这个存储空间对于wrox.com及其所有子域都是可以访问的。
对globalStorage空间的访问,是依据发起请求的页面的域名、协议和端口来限制的(类似于ajax请求的同源策略)。如果实现不能确定域名,那么使用location.host作为属性名比较安全

globalStorage[location.host].name = 'Nicholas';
var book = globalStorage[location.host].getItem('book');

如果不使用removeItem()或者delete删除,或者用户为清除浏览器缓存,存储在globalStorage属性中的数据会一直保留在磁盘上。这让globalStorage非常适合在客户端存储文档或者长期保存用户偏好设置

<a target=”_blank” name=”t7″ style=”color:rgb(12,137,207)”></a>localStorage对象

localStorage对象在修订过的HTML5规范中作为持久保存客户端数据的方案取代了globalStorage。与globalStorage不同,不能给localStorage指定任何访问规则;规则实现就设定好了。要访问同一个localStorage对象,页面必须来自同一个域名,使用同一种协议,在同一个端口上。这相当于globalStorage[location.host]
由于localStorage是Storage的实例,所以可以像使用sessionStorage一样来使用它。

//使用方法存储数据
localStorage.setItem('name','Nichoalas');
//使用属性存储数据
localStorage.book = 'Professional JavaScript';
//使用方法读取数据
var name = localStorage.getItem('name')
//使用属性读取数据
var book = localStorage.book;

存储在localStorage中的数据和存储在globalStorage中的数据一样,都遵循相同的规则:数据保留到通过JavaScript
删除或者是用户清除浏览器缓存

<a name=”t5″></a><a target=”_blank” name=”t8″ style=”color:rgb(12,137,207)”></a>File API

File
API在表单中的文件输入字段的基础上,又添加了一些直接访问文件信息的接口。H5在DOM中为文件输入元素添加了一个files集合,在通过文本输入字段选择了一或多个文件时,files集合中将包含一组File对象,每个File对象对应着一个文件。每个File对象都有下列只读属性

  • name: 本地文件系统的文件名
  • size: 文件的字节大小
  • type:字符串,文件的MIME类型。
  • lastModifiedDate:字符串,文件上一次被修改的事件(只有chrome实现了这个属性)

现在我们获取id为‘files-list’的input为file的元素,将该元素中上传的文件输出到控制台

var filesList = document.getElementById('files-list');
        EventUtil.addHandler(filesList,'change',funciton(e){
            var files = EventUtil.getTarget(e).files,
                i = 0,
                len = files.length;
            while(i<len){
                console.log(files[i].name + '('+files[i].type+','+files[i].size +'bytes)');
                i++;

            }
        })

<a target=”_blank” name=”t9″ style=”color:rgb(12,137,207)”></a>FileReader类型

FlieReader类型实现的是一种异步文件读取机制。可以把FileReader想象成XMLHttpRequest,区别只是它读取的是文件心痛,而不是远程服务器。为了读取文件中的数据,FileReader提供了如下几个方法:

  • readAsText(file,
    encoding):以纯文本的形式读取文件,将读取到的文本保存在result属性中。
  • readAsDataURL(file):读取文件并将文件一数据URI的形式保存在result属性中
  • readAsBinaryString(file)(已废弃):读取文件并将一个字符串保存在result属性中,字符串中的每一个字符表示一字节
  • readAsArrayBuffer(file):读取文件并将一个包含文件内容的ArrayBuffer保存在result属性中。

由于读取过程是异步的,因此FileReader也提供了几个事件。其中最有用的三个事件是progress、error和load,分别表示是否又读取了新数据,是否发生了错误以及是否读完了整个文件。

var filesList = document.getElementById("files-list");
EventUtil.addHandler(filesList, "change", function(event){
    var info = "",
        output = document.getElementById("output"),
        progress = document.getElementById("progress"),
        files = EventUtil.getTarget(event).files,
        type = "default",
        reader = new FileReader();

    if (/image/.test(files[0].type)){
        reader.readAsDataURL(files[0]);
        type = "image";
    } else {
        reader.readAsText(files[0]);
        type = "text";
    }

    reader.onerror = function(){
        output.innerHTML = "Could not read file, error code is " + reader.error.code;
    };

    reader.onprogress = function(event){
        if (event.lengthComputable){
            progress.innerHTML = event.loaded + "/" + event.total;
        }
    };

    reader.onload = function(){

        var html = "";

        switch(type){
            case "image":
                html = "<img src=\"" + reader.result + "\">";
                break;
            case "text":
                html = reader.result;
                break;

        }
        output.innerHTML = html;
    };
});

<a target=”_blank” name=”t10″ style=”color:rgb(12,137,207)”></a>读取部分内容

File对象支持一个slice()方法以实现读取文件的一部分而不是全部内容,这个方法在FireFox中的实现叫mozSlice(),在chrome中的实现是webkitSlice(),Safiri的5.1及之前的版本不支持这个方法。Slice()方法接收两个参数:起始字节及要读取的字节数。这个方法返回一个Blob实例,Blob是File类型的父类型。下面是一个通用的函数,可以在不同实践中使用slice()方法:

function blobSlice(blob,startByte,length){
    if(blob.slice){
        return blob.slice(startByte,length);
    } else if(blob.webkitSlice){
        return blob.webkitSlice(startByte,length);
    } else if(blob.webkitSlice){
        return blob.webkitSlice(startByte,length);
    } else {
     return null;
    }
}

blob类型有一个size属性和一个type属性,而且它也支持slice()方法,以便进一步切割数据。通过FileReader也可以从Blob中读取数据。下面这个例子只读取文件的32B内容

var filesList = document.getElementById('files-list');
EventUtil.addHandler(filesList, "change", function(event){
         var info = "",
              output = document.getElementById("output"),
              progress = document.getElementById("progress"),
              files = EventUtil.getTarget(event).files,
              type = "default",
              reader = new FileReader();
              blob = blobSlice(files[0],0,32);

          if (blob){
              reader.readAsText(blob);
              reader.onerror = function(){
               outpit.innerHTML = 'could not read file,error code is' + reader.error.code;
           }
           reader.onload = function(){
            output.innerHTML = reader.result;
        };
     } else {
         alert('your browser does not support slice()');

          }

          reader.onerror = function(){
              output.innerHTML = "Could not read file, error code is " + reader.error.code;
          };

只读取文件的一部分可以节省时间,非常适合只关注数据中某个特定部分(如请求头部)的情况

<a target=”_blank” name=”t11″ style=”color:rgb(12,137,207)”></a>对象URL

对象URL也被称为blob
URL,指的是引用保存在File或Blob中数据的URL。使用对象URL的好处是可以不必把文件内容读取到JavaScript中而直接使用文件内容。为此,只要在需要文件内容的地方提供对象URL即可。要创建对象URL,可以使用window.URL.createObjectURL()方法,并传入File或Blob对象。这个方法在Chrome中的实现叫window.webkitURL.createObjectURL(),因此可以通过如下函数来消除命名的差异:

function createObjectURL(blob){
    if(window.URL){
        return window.URL.createObjectURL(blob);
    } else if (window.webkitURL) {
        return window.webkitURL.createObjectURL(blob);
    } else {
        return null;
    }
}

这个函数的返回值是一个字符串,指向一块内存的地址。因为这个字符串是URL,所以在DOM中也能使用。例如,以下代码可以在页面中显示一个图像文件:

var filesList = document.getElementById("files-list");
EventUtil.addHandler(filesList, "change", function(event){
      var info = "",
          output = document.getElementById("output"),
          progress = document.getElementById("progress"),
          files = EventUtil.getTarget(event).files,
          type = "default",
          reader = new FileReader();
          url = createObjectURL(files[0]);
      if(url) {

       if (/image/.test(files[0].type)){
           output.innerHTML="<img src =\"" + url + "\">"
       } else {
           output.innerHTML = 'not an image';
       }
    } else {
     output.innerHTML = "your browser doesn't support object URLs";
 }
});

      reader.onerror = function(){
          output.innerHTML = "Could not read file, error code is " + reader.error.code;
      };

      reader.onprogress = function(event){
          if (event.lengthComputable){
              progress.innerHTML = event.loaded + "/" + event.total;
          }
      };
You can leave a response, or trackback from your own site.

Leave a Reply

网站地图xml地图