关于前端:URL-的黑魔法还能用机制数表示

转载文章，原文起源：https://juejin.cn/post/695413…

目录

1. 链接的形成
2. 浏览器如何对 URL 进行解析
3. 测试的例子
4. 链接只能固定格局吗？
5. 链接真的只是你看到的那样吗

1. 链接的形成

• 第一局部：协定名 (以单个冒号完结)，如 http、https、ftp(少见) 等等
• 第二局部：用户信息 也就是账号密码！(登陆 ftp 时罕用)
• 第三局部：主机名(也就是域名)
• 第四局部：端口
• 第五局部：查问，? 号后的内容是查问！
• 第六局部：片段 ID(是不会发送到服务器的！)

ftp 链接：我最罕用的一个，ftp://ftp.ncbi.nlm.nih.gov/genomes/refseq/ 关上访达

片段 ID：假使有个名为 example.html 的文档中蕴含一个 id 属性值为 myelement 的元素，那么应用 example.html#myelement 这个 URL 即可间接导航至该元素，该 URL 中的 #myelement 即称为 URL 片段标志符。简略来说就是锚点。

2. 浏览器对 URL 的解析

1. 提取协定名称

查找第一个：，：在哪里，那：后面的就是协定名，如果在协定中获取了不该获取的字符，那么将认为这是一个绝对的 URL，并不是一个协定名。

2. 去除层级 url 标记符

字符串 // 应该算跟在协定名前面的，如果发现有该字符 则会跳过该字符 如果没有找到便不论了！所以 http:baidu.com 也是能够拜访的！浏览器中还能够用反斜杠 \ 来代替正斜杆，firefox 除外！

3. 获取受权信息局部

顺次扫描 url，如果这三个符号中 哪个先呈现便以哪个为准来截取
/(正斜杠)、?(问号)、#(井号)
从 url 里提取进去的信息，就算受权局部信息！
除了 IE 跟 safari 其余浏览器还承受 ;(分号)也算受权信息局部中可承受的分隔符！

1. 定位登陆信息，如果有的话：受权局部信息提取进去后，在截取进去的信息里再来查找 @ 如果找到了 那么他后面的局部便是登陆信息！登陆信息再查找 : (冒号) 冒号后面的便是账号 前面便是明码！
2. 提取指标地址，受权信息局部剩下的便是指标地址了 第一个冒号离开的就算主机名跟端口！用方括号括起来的就是 ipv6 地址，这也是个特例！

联合以上信息 咱们剖析下以下链接：

ftp://admin:admin@192.168.1.100:21

这样的链接我常常用来登陆 ftp！这样便会以 admin 的身份 明码为:admin
ftp 协定去登陆主机 192.168.1.100，端口号是 21 端口!

4. 确定门路

如果受权局部的结尾跟着一个正斜杆, 某些场景里，跟着一个反斜杠或者分号，就像之前提到的，顺次扫描下一个? #或字符串结尾符，那个先呈现便以哪个为准！截取进去的局部就是门路信息！最初依据 unix 门路语义进行规范化整顿！

5. 提取查问字符串

如果在上一条解析里，前面跟着的是一个问号，便持续扫描下一个 # 或到字符串结尾，哪个先呈现便以哪个为准！两头的局部便是查问字符串。

6. 提取片段 ID

如果胜利解析完上一条信息，它最初还跟着 #号 那么从这个符号到字符串的结尾便算片段 ID 了，片段 ID 是不会发送到服务器的！个别用来跳到 A 标签的锚链接 或者用来 js 的 location.hash 取值 等等!

3. 测试的例子

例子 1

http://xss1.com&action=test@w…
这个链接会跳转到哪里了，咱们依照下面的思路来模仿一下浏览器的解析过程。

1. 解析：，解析到的后面就是协定
2. 解析 //，跳过
3. 解析受权信息，找 /，?，#，；发现都没有，那直到结尾都是受权信息
4. 受权新信息查找 @，后面是登录信息，xss1.com&action=test 为登录信息
5. 前面的就被当做主机名解析，所以跳转到了 www.baidu.com

例子 2

http://xss1.com\@www.baidu.com
依照 URL 的解析思路，大胆想一想这个 URL 会去哪里了？

1. 解析：，解析到的后面就是协定
2. 解析 //，跳过
3. 解析受权信息，找 /，?，#，；这里就有点不一样了，个别浏览器会把 \ 转换成 /，http://xss1.com\@www.baidu.com 也就是 http://xss1.com/@www.baidu.com 这个失常的解析也就拜访搭配 http://xss1.com 了。然而在 fire…
4. 在 firefox 下，找 /，?，#，；发现都没有，那直到结尾都是受权信息
5. 受权新信息查找 @，后面是登录信息，http://xss1.com\ 为登录信息。

例子 3

http://xss1.com;.baidu.com/
在不同的浏览器对; 的解决不太一样。
一些浏览器会主动的把 url 纠正成 http://xss1.com/;.baidu.com/
，谷歌浏览器认为这不是一个 url，唤起查问引擎，safari 会认为这是一个谬误。

4. 链接真的只能是这样固定的格局么？

通过对浏览器对 URL 解析的一个剖析，我想大家都晓得了，答案是：不是。

这样的

• \/www.baidu.com
• \@www.baidu.com
• \/@www.baidu.com
• \\\\www.baidu.com

• ///////www.baidu.com
  这些链接都能失常的拜访到百度。

  这样的

• ⅅʳºℙˢ.ʷººʸⓊⁿ.ºʳℊ
  再看看这个链接也是能失常解析的（尽管这个网站不存在的，然而解析是没有问题的），然而你会发现如果把下面这个链接插入到语雀、掘金、有道云笔记插入链接会呈现不一样的状况。有趣味能够尝试一下

  还是这样的

• http://ⅅʳºℙˢ.ʷººʸⓊⁿ.ºʳℊ
  下面这些奇奇怪怪的链接都能失常拜访，为什么了？

  为什么？

  这里须要提到的是针对域名的编码：Punycode。通过 Punycode 编码后的域名是会被 DNS 服务器所辨认的！
  举个🌰拿中文域名来说，因为操作系统的外围都是英文组成，DNS 服务器的解析也是由英文代码替换，所以 DNS 服务器上并不反对间接的中文域名解析。所有中文域名的解析都须要转成 punycode 码，而后由 DNS 解析 punycode 码。最初咱们胜利的拜访到了咱们要去网站！只不过明天咱们这里 punycode 编码的解析过程并不是由 dns 服务器来解析的 而是在浏览器拜访时就给解码回来！

5. 链接真的是你看到的那样么？

先看一个例子：http://www.baidu.com@qq.com，大家认为这个链接为跳转到哪里去，装置第二大节的解析规定很简略，跳转到 qq.com。因为 @后面的信息被解析成了受权信息。所以咱们这段链接为什么去 qq.com 而不是去 baidu.com 算因为一个 @符 让浏览器认为 www.baidu.com 算一段用户信息 而前面的才算主机名 他要去拜访的地址。所以咱们有时候如果你想假装找不到跳转破绽也能够如此实现！并且在谷歌、firefox 你还能够这样写 http:www.baidu.com@qq.com。

url 地址是能够用进制来代替

在《web 之困》中讲了其实 url 地址是能够用进制来代替的！只不过算把 ip 地址给转换成进制来拜访！
十进制 —||||||> 十六进制 —||||||> 八进制 而后在拜访时 指定协定而后加个 0
http://0[八进制] 比方 115.239.210.26，首先用. 宰割数字 115 239 210 26，而后抉择 10 进制转换 16 进制！(要用 0 来示意前缀，能够是一个 0 也能够是多个 0 跟 XSS 中多加几个 0 来绕过过滤一样！)。首先把这四段数字给 转成 16 进制！后果：73 ef d2 1a 而后把 73efd21a 这十六进制一起转换成 8 进制！，后果就是 16373751032，而后指定协定 http:// 用 0 示意前缀 加上后果 链接：http://0016373751032。

以百度为例

百度首页 IP 14.215.177.38

1. 先用 . 宰割 14 215 177 38
2. 将数字转换为 16 进制，后果是 e d7 b1 26
3. 将四个转换后的进制数 () 链接起来，转换为 8 进制，后果是 1665730446
4. 而后指定协定 http:// 用 0 示意前缀 加上后果，http://01665730446
5. 是不是胜利了？

结束语

如果文章中什么不对或者写的不好的中央，请大家多多斧正，谢谢！码字不易，点个赞加个关注吧！

参考

• http://www.hackdig.com/?12/ha…