json-chrome的network中的query string paramenters参数是怎么得到的

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

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

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

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

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

奥门威尼斯网址, 

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

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 赞 收藏
评论

How to get the query string by javascript?,querystring

1.html:

<a href="2.html?name=geovindu&sex=woman&age=12">test getQueryString</a>

2.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>javascript获取url参数和script标签中获取url参数</title>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js1.js?a=abc&b=汉字&c=123"></script>
<script type="text/javascript">
//lastest: url paramter: //测试链接:<a href="2.html?name=geovindu&sex=woman&age=12">test getQueryString</a>
var queryStrings=function() {//get url querystring
    var params=document.location.search,reg=/(?:^\?|&)(.*?)=(.*?)(?=&|$)/g,temp,args={};
    while((temp=reg.exec(params))!=null) args[temp[1]]=decodeURIComponent(temp[2]);
    return args;
};
//只取一个:
var queryString=function(key){
    return (document.location.search.match(new RegExp("(?:^\\?|&)"+key+"=(.*?)(?=&|$)"))||['',null])[1];
}




</script>
</head>

<body>
<div id="urlparamter"></div>
<div id="all"></div>
<div id="scriptparamter"></div>
<div id="allscript"></div>
<script type="text/javascript">
var args=queryStrings();
document.getElementById("all").innerHTML=args.name+" | "+args.sex+" | "+args.age+",all";
//alert(args.name+" | "+args.sex+" | "+args.age);
var argsname=queryString("name");
var argssex=queryString("sex");
var argsage=queryString("age");
document.getElementById("urlparamter").innerHTML =argsname+","+argssex+","+argsage;


</script>
</body>

</html>

  js1.js:

/*http://css.dusystem.com/example/index.html
window.location.protocol = "http:"
window.location.host = "css.dusystem.com"
window.location.pathname = "example/index.html"
http://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript
http://www.cnblogs.com/sohighthesky/archive/2010/01/21/1653126.html
http://www.codeproject.com/Tips/574956/How-to-get-URL-and-QueryString-value-in-an-ASP-NET

test: <a href="1.html?id=5&type=1&flag=0" title="d">test</a>
*/

var strget="du";

function getArgs(strParame) 
{
var args = new Object( );
var query = location.search.substring(1); // Get query string
var pairs = query.split("&"); // Break at ampersand
for(var i = 0; i < pairs.length; i++) {
var pos = pairs[i].indexOf('='); // Look for "name=value"
if (pos == -1) continue; // If not found, skip
var argname = pairs[i].substring(0,pos); // Extract the name
var value = pairs[i].substring(pos+1); // Extract the value
value = decodeURIComponent(value); // Decode it, if needed
args[argname] = value; // Store as a property
}
return args[strParame]; // Return the object
}

//script paramter:
var getScriptArgs=function(){
//获取多个参数
    var scripts=document.getElementsByTagName("script"),
    script=scripts[scripts.length-1],//因为当前dom加载时后面的script标签还未加载,所以最后一个就是当前的script
    src=script.src,
    reg=/(?:\?|&)(.*?)=(.*?)(?=&|$)/g,
    temp,res={};
    while((temp=reg.exec(src))!=null) res[temp[1]]=decodeURIComponent(temp[2]);
    return res;
};

//
var argsscript=getScriptArgs();
//document.getElementById("scriptparamter").innerHTML =argsscript.a+" | "+argsscript.b+" | "+argsscript.c;
strget=argsscript.a;
//alert(argsscript.a+" | "+argsscript.b+" | "+argsscript.c+","+strget);
//document.getElementById("txtput").value=strget;
//document.getElementById("scriptparamter").innerHTML ="ge";
//txtput

//假如上面的js是在这个js1.js的脚本中<script type="text/javascript" src="js1.js?a=abc&b=汉字&c=123//"><//script>

var getScriptArg=function(key){//获取单个参数
    var scripts=document.getElementsByTagName("script"),
    script=scripts[scripts.length-1],
    src=script.src;
    return (src.match(new RegExp("(?:^\\?|&)"+key+"=(.*?)(?=&|$)"))||['',null])[1];
};
alert(getScriptArg("c"));


//set value
window.onload = function () {   

    getCommunitys(strget);
}

function getCommunitys(str) {
$("#scriptparamter")[0].innerHTML="ges";
//document.getElementById("scriptparamter").innerHTML =str;
document.getElementById("txtput").value=str;
}

  

to get the query string by
javascript?,querystring 1.html: a
href=”2.html?name=geovindusex=womanage=12″test getQueryString/a 2.html:
!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1…

我们知道,”GET”请求中,通常把参数放在URL后面,比如这样

其中,红色部分便是URL中的参数。

chrome的network中的query string paramenters参数是怎么得到的
初学网页提取数据,在提取雪球网页数据时候,例如输入网址
F12
NetWork中可以从对应json文件中得到数据,例如下图所示,但是这个rb__idchrome是怎么得到了,有没相关方法可以得到呢,新手问题有点小白,大家见谅,不过已经折磨我几天了
奥门威尼斯网址 6

关于作者:xiaoheike

奥门威尼斯网址 7

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

奥门威尼斯网址 8

那么,如何通过Javascript得到它呢?而且怎么从这么一堆字符串中找到我所需要的参数所对应的值呢?

方法一:

function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
    results = regex.exec(location.search);
    return results == null ? "": decodeURIComponent(results[1]);
}

console.log(getParameterByName("param")) //yes

1.html:

先来解释下这段代码吧:

<a href="2.html?name=geovindu&sex=woman&age=12">test getQueryString</a>

1:定义一个 getParameterByName
函数,接收需要查询的参数的key,然后返回这个参数的value

2.html:

2:name = name.replace(/[\[]/, “\\\[“).replace(/[\]]/,
“\\\]”);
这句代码的作用是把 “[”  换成 “\[” , 把 “]” 换成 “\]”
,之所以做这么一个转换,是因为下面需要使用name这个变量去构造一个正则表达式,而
[ 和 ] 在正则中是关键字,所以需要转义。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>javascript获取url参数和script标签中获取url参数</title>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js1.js?a=abc&b=汉字&c=123"></script>
<script type="text/javascript">
//lastest: url paramter: //测试链接:<a href="2.html?name=geovindu&sex=woman&age=12">test getQueryString</a>
var queryStrings=function() {//get url querystring
    var params=document.location.search,reg=/(?:^\?|&)(.*?)=(.*?)(?=&|$)/g,temp,args={};
    while((temp=reg.exec(params))!=null) args[temp[1]]=decodeURIComponent(temp[2]);
    return args;
};
//只取一个:
var queryString=function(key){
    return (document.location.search.match(new RegExp("(?:^\\?|&)"+key+"=(.*?)(?=&|$)"))||['',null])[1];
}




</script>
</head>

<body>
<div id="urlparamter"></div>
<div id="all"></div>
<div id="scriptparamter"></div>
<div id="allscript"></div>
<script type="text/javascript">
var args=queryStrings();
document.getElementById("all").innerHTML=args.name+" | "+args.sex+" | "+args.age+",all";
//alert(args.name+" | "+args.sex+" | "+args.age);
var argsname=queryString("name");
var argssex=queryString("sex");
var argsage=queryString("age");
document.getElementById("urlparamter").innerHTML =argsname+","+argssex+","+argsage;


</script>
</body>

</html>

3 var regex = new RegExp(“[\\?&]” + name + “=([^&#]*)”)

  js1.js:

这句代码比较简单,匹配 ? 或者 & 然后是 name 然后是 = 和 非(&或者#)。

/*http://css.dusystem.com/example/index.html
window.location.protocol = "http:"
window.location.host = "css.dusystem.com"
window.location.pathname = "example/index.html"
http://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript
http://www.cnblogs.com/sohighthesky/archive/2010/01/21/1653126.html
http://www.codeproject.com/Tips/574956/How-to-get-URL-and-QueryString-value-in-an-ASP-NET

test: <a href="1.html?id=5&type=1&flag=0" title="d">test</a>
*/

var strget="du";

function getArgs(strParame) 
{
var args = new Object( );
var query = location.search.substring(1); // Get query string
var pairs = query.split("&"); // Break at ampersand
for(var i = 0; i < pairs.length; i++) {
var pos = pairs[i].indexOf('='); // Look for "name=value"
if (pos == -1) continue; // If not found, skip
var argname = pairs[i].substring(0,pos); // Extract the name
var value = pairs[i].substring(pos+1); // Extract the value
value = decodeURIComponent(value); // Decode it, if needed
args[argname] = value; // Store as a property
}
return args[strParame]; // Return the object
}

//script paramter:
var getScriptArgs=function(){
//获取多个参数
    var scripts=document.getElementsByTagName("script"),
    script=scripts[scripts.length-1],//因为当前dom加载时后面的script标签还未加载,所以最后一个就是当前的script
    src=script.src,
    reg=/(?:\?|&)(.*?)=(.*?)(?=&|$)/g,
    temp,res={};
    while((temp=reg.exec(src))!=null) res[temp[1]]=decodeURIComponent(temp[2]);
    return res;
};

//
var argsscript=getScriptArgs();
//document.getElementById("scriptparamter").innerHTML =argsscript.a+" | "+argsscript.b+" | "+argsscript.c;
strget=argsscript.a;
//alert(argsscript.a+" | "+argsscript.b+" | "+argsscript.c+","+strget);
//document.getElementById("txtput").value=strget;
//document.getElementById("scriptparamter").innerHTML ="ge";
//txtput

//假如上面的js是在这个js1.js的脚本中<script type="text/javascript" src="js1.js?a=abc&b=汉字&c=123//"><//script>

var getScriptArg=function(key){//获取单个参数
    var scripts=document.getElementsByTagName("script"),
    script=scripts[scripts.length-1],
    src=script.src;
    return (src.match(new RegExp("(?:^\\?|&)"+key+"=(.*?)(?=&|$)"))||['',null])[1];
};
alert(getScriptArg("c"));


//set value
window.onload = function () {   

    getCommunitys(strget);
}

function getCommunitys(str) {
$("#scriptparamter")[0].innerHTML="ges";
//document.getElementById("scriptparamter").innerHTML =str;
document.getElementById("txtput").value=str;
}

4 results = regex.exec(location.search); return results == null ? “” :
decodeURIComponent(results[1]);

  

这两句放一起看把,首先 location.search
拿到全部的查询字符串(即文章最开头给的范例URL中红色部分),然后使用正则的exec方法去匹配出结果,这个方法会返回一个数组,在这个例子里面,results这个数组为[“?params=yes”,”yes”]。这里要说明下,因为在正则中,给匹配出yes的部分加了个括号分组,所以结果中数组的第二项(results[1])为yes。

 

这个函数的确写的很优雅,很强大。但是呢,有一个缺点,就是每次我需要查询的一个参数的时候,都需要进行这么一个过程,构造正则,匹配location.search,返回结果。但是很明显,当我们页面载入完成的时候,URL是固定的,不会变得(不考虑html5
history
api),所以每次进行这么一个过程很浪费资源,所以有了下面这个方法。

 

方法二

var urlParams; 
(window.onpopstate = function() {
    var match,
    pl = /\+/g,
    search = /([^&=]+)=?([^&]*)/g,
    decode = function(s) {
        return decodeURIComponent(s.replace(pl, " "));
    },
    query = window.location.search.substring(1);
    urlParams = {};
    while (match = search.exec(query))
       urlParams[decode(match[1])] = decode(match[2]);
})();

  //urlParams的结果
    urlParams = {
      param: "yes",
      article: "1"
    }

    console.log(urlParams["param"]);  // -> "yes"
    console.log("article" in urlParams);  // -> true

这段代码比较简单,唯一要说明的是 pl = /\+/g, s.replace(pl, ” “));
之所以会有这么一句,是因为在URL规范里面,加号(+)会被编码为空格,所有在decode的时候,需要把加号转回空格去。

这个方法里面,当页面加载完成时,会把URL中所有参数放在urlParams这个对象里面。之后只需要查找这个对象的属性就可以找到相应的结果了。

在实际工作中,个人认为,这种方法比第一种可取。

 

方法三

var qs = (function(a) {
    if (a == "") return {};
    var b = {};
    for (var i = 0; i < a.length; ++i)
    {
        var p=a[i].split('=');
        if (p.length != 2) continue;
        b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
    }
    return b;
})(window.location.search.substr(1).split('&'));

  qs[“param”]; // yes
  qs[“article”]; // 1
  qs[“nothere”]; // undefined
(object)

比较简单明了,这里对代码就不做解释了。和方法二一样,把结果存储在qs这个对象里面。

 

方法四

function getParameterByName(name) {
    var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
    return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}

如果是在一个页面里偶尔用一次,并且对代码的字节数有强迫症的人,可以使用这个方法。

 

最后,有一些jQuery插件也实现了这样的功能。不过个人认为这种小方法写成插件形式并不是很有必要的感觉,所以在这里就不列举出来了,可以自行谷歌。

 

本文参考

 

转载本站文章请注明作者和出处 奇葩一朵朵
– http://www.cnblogs.com/season-huang/ ,请勿用于任何商业用途

发表评论

电子邮件地址不会被公开。 必填项已用*标注