《Web前端黑客技术解密》读书笔记-第二章 URL、URL编码等相关知识点记

整本书的笔记参考

详细

https://blog.csdn.net/qq_40676758/article/details/80081697（第二章读书笔记）

https://www.cnblogs.com/r00tgrok/articles/Web-Hacking.html

粗略

https://segmentfault.com/a/1190000016499073

 

2.2 URL

一、URL格式定义及详解

http://attacker.com/path/info.html?id=1&type=cool#new

协议名://服务器位置/网页文件在服务器中的位置路径?键值对1&键值对2#锚

二、location.hash简介及用法：

Location 对象的 hash 属性用于设置或取得 URL 中的锚部分（包括 # 标记），语法如下：

location.hash = anchor_name

假设当前页面的 URL 是：http://www.5idev.com/p-javascript_history.shtml#back

<script type="text/javascript">

document.write(location.hash);

</script>

运行该例子，输出：

#back

一般情况下为URL后 "#" 及其后面一部分组成，如http://www.test.com/#/something，

其中http://www.test.com为真实的路径，而#/something则为网页中的位置，称之为锚点

在访问锚点时会自动跳到锚点所在的网页位置，通常有两种方式作为锚点

<a name="something"></a>

<element id="something"></element>

以上两种均可通过http://www.test.com/#/something使页面滚动到该元素的位置

location.hash可读可写的

    //当前URL为http://www.test.com/#/something
    location.hash;                //输出 #/something
     
    location.hash = '#/test1';    //http://www.test.com/#/test1,并且会新增一条历史记录

在对hash写时有个需要注意的地方，如下所示

    //当前URL为http://www.test.com/
    location.hash = "#/test"    //http://www.test.com/#/test
    locationl.hash = "/#/test"    //http://www.test.com/#/#/test

当写入第一个字符不为为 "#" 时会自动生成一个 "#" 在字符串之前，再把字符串追加到生成的#后面

这样会造成有两个#,此时location.hash输出 "#/#/test"

location.hash与HTML5 history类似，都能够在改变页面的URL而不会引起浏览器的重载

但是location.hash支持比较早的浏览器，而history是在HTML5的新API，可能某些较早的浏览器不支持

三、不同浏览器的默认编码方式（参考自https://blog.csdn.net/u014785687/article/details/74078512）：

IE9 中的编码方式默认utf-8编码

火狐浏览器默认utf-8编码（浏览器版本可能会有差异）

Chrome浏览器默认utf-8编码（浏览器版本可能会有差异）

1、页面编码是GBK,提交是GET 的情况下：

2、页面编码是UTF-8,提交是GET的情况下：

3、页面编码是GBK，提交是POST 的情况下：

4、页面编码是UTF-8，提交是POST 的情况下：

四、浏览器自动编码（原文：https://blog.csdn.net/SELECT_BIN/article/details/80525562 ）

在前后台交互，尤其是发url请求的时候，最好在发送请求的时候加上编码：

个人推荐用：encodeURI()或者encodeURIComponent()

encodeURI()是Javascript中真正用来对URL编码的函数。

编码整个url地址，但对特殊含义的符号"; / ? : @ & = + $ , #"，也不进行编码。对应的解码函数是：decodeURI()。

 

encodeURIComponent()

能编码"; / ? : @ & = + $ , #"这些特殊字符。对应的解码函数是decodeURIComponent()。如果想要传递带&符号的网址，用encodeURIComponent()

 

推荐一个在线 解码编码的：http://tool.chinaz.com/Tools/urlencode.aspx