首页 > 其他分享 >在浏览器输入网址,Enter之后发生了什么?

在浏览器输入网址,Enter之后发生了什么?

时间:2024-04-24 10:45:50浏览次数:28  
标签:编码 浏览器 url E5% URL uri 网址 Enter encode

很多八股文会给出:

  1. DNS Resolution
  2. Establishing a Connection
  3. Sending an Http Request
  4. Receiving the HTTP Response
  5. Rendering the Web Page

但今天我斗胆插入第0.9步URL Parsing

URL( uniform resource locator)由四部分组成: scheme、domain、path、resource

URL Parsing做了2个事情:

  • prase url:只有解析分离出domain,还有后续的第1步: DNS resolution
  • url_encode

本文我主要想聊一聊url_encode

  1. 为什么会有url_encode?
  2. javascript encodeURI() vs encodeURIComponent()
  3. 我为什么会想到这个问题?
  4. 常见的httpclient默认有做url_encode吗?

在浏览器插入https://www.baidu.com/s?wd=博客园马甲哥,Enter之前童鞋们可尝试拷贝地址栏, 粘贴到任意位置, 内容是:https://www.baidu.com/s?wd=%E5%8D%9A%E5%AE%A2%E5%9B%AD%E9%A9%AC%E7%94%B2%E5%93%A5, 这就是浏览器自动url_encode的结果, 浏览器会拿这个网址去做 dns、request行为。

1. 为什么会有url_encode?

url_encode 又叫百分号编码,为什么要有url_encode,看知乎。

总结下来:uri地址最初要求是以可显示、可写的 ascii 字符集, 非英文字符和其他特殊字符需要被编码。

默认按照UTF-8转化为字节流,每个字节按16进制表示,并添加%组成一个percent编码。

UTF-8 到底是什么意思?

例如:汉字 “你好”

  • UTF-8字节流打印为:-28 -67 -96 -27 -91 -67
  • 对应的16进制表示为:E4 BD A0 E5 A5 BD
  • URLEncode编译后为:%E4%BD%A0%E5%A5%BD

当然服务端会对应的url_decode函数,编码/解码的次数需要对应。

2. js 中的encodeURI() vs encodeURIComponent()

encodeURI是js 中内置的全局函数,用于url_encode,不会对以下特殊字符编码,这也是为了确保url中原生字符的正确表达:
A–Z a–z 0–9 - _ . ! ~ * ' ( ) ; / ? : @ & = + $ , #

const uri = 'https://mozilla.org/?x=шеллы';
const encoded = encodeURI(uri);
console.log(encoded);
// Expected output: "https://mozilla.org/?x=%D1%88%D0%B5%D0%BB%D0%BB%D1%8B"

encodeURIComponent 也是全局函数,但他的用途是对字符串做完整的url_encode, 这个函数会对上面排除的字符做编码,这个函数一般用于已知是特殊字符需要做url编码。

// Encodes characters such as ?,=,/,&,:
console.log(`?x=${encodeURIComponent('test?')}`);
// Expected output: "?x=test%3F"

3.我为什么会关注这个问题?

一般web框架会为我们自动解码,所以我们在直接处理http请求时可以忽略该问题。

但是在自行使用 httpclient反代时就要注意这个问题。

nginx内置变量并提供了自定义变量的能力

  • $request_uri
    full original request URI (with arguments)
  • $uri
    current URI in request, normalized,
    The value of $uri may change during request processing, e.g. when doing internal redirects, or when using index files.

我在使用lua-resty-http客户端做反向代理请求时遇到了这个问题, 一开始lua_resty_http 将 $uri(解码值)送到应用,不符合应用的预期, 应恢复成原始编码uri

4. 常见的httpclient是否指出自动url_encode?

.NET、go、lua的HttpClient(包括curl)都不会自动对 URL 进行编码。 如果你的 URL 包含特殊字符或需要编码的字符,你需要自己手动进行 URL 编码。

  • [C#] System.Net.WebUtility.UrlEncode
  • [golang] url.QueryEscape(rawURL)
  • [lua] ngx.escape_uri(str, 0)

标签:编码,浏览器,url,E5%,URL,uri,网址,Enter,encode
From: https://www.cnblogs.com/JulianHuang/p/18154545

相关文章

  • 【转】[C#][WPF] ContentControl 和 ContentPresenter 的区别
    转自:阿里的通义灵码在 https://blog.csdn.net/yao_hou/article/details/134431366需要付费阅读,所以从阿里的通义灵码来寻找答案:WPF中的 ContentControl 和 ContentPresenter 虽然都涉及内容展示,但它们扮演着不同的角色,具有各自的特性和用途。以下是两者之间的主要区......
  • 在缩小浏览器宽度的时候,图片会超出li的宽度
    要确保在缩小浏览器宽度时,图片不会超出<li>元素的宽度,您可以为描述文本添加一些样式,以便让图片适应于<li>元素。一种常见的方法是使用CSS中的max-width属性。下面是一个可能的解决方案:<liclass="list-group-item"><strong>问题描述:</strong><divclass="desc......
  • ECMAScript(简称 ES)是一种由 Ecma 国际组织制定的脚本语言标准,用于定义脚本语言的语法
    ECMAScript(简称ES)是一种由Ecma国际组织制定的脚本语言标准,用于定义脚本语言的语法、类型、语义和其他核心特性。它的设计初衷是为了使不同的浏览器和开发者能够使用一致的语法和特性开发Web应用程序,从而提高跨平台和跨浏览器的互操作性。ECMAScript标准的制定由Ecma......
  • 浏览器插件安装
    1、elasticsearch-headchrome插件安装插件获取网址,下载整个项目压缩包,解压后将内容放入自定义命名为elasticsearch-head文件夹。接着点击Chrome右上角选项->工具->管理扩展(或则地址栏输入chrome://extensions/),选择打开“开发者模式”,让后点击“加载已解压得扩展程序”,选择elas......
  • 新版chrome浏览器“已阻止不安全的下载”解决方案
    解决方法一:针对所有网址,适用于Chrome122+版本:在Chrome地址栏输入:chrome://settings/content/insecureContent点击添加,输入[*.]com,再次点击添加,刷新页面即可如果你需要访问的网站是.cn结尾的,就添加[*.]cn,其他的网站亦是同理 解决方法二:(针对指定网址,目前测试各个Chrome......
  • Keepass安装使用方法(包含浏览器插件使用方法)
    相关后续阅读:Keepass调用Xshell、SecureCRT、RDP、Putty的方法(一劳永逸版)安装方法:1、安装KeePass-2.56-Setup.exe,选择语言——English2、一路默认后,安装到默认路径:C:\ProgramFiles\KeePassPasswordSafe23、将语言包Chinese_Simplified.lngx解压拷贝到C:\ProgramFiles\Ke......
  • 前端在浏览器显示摄像头传回的RTSP视频流,前端采用的技术有VUE+video.js+flv.js
    在前端使用Vue.js框架,结合video.js和flv.js播放RTSP视频流,需要经过一系列步骤,因为浏览器并不能直接播放RTSP流,所以通常需要一个服务器来将RTSP流转为HLS或FLV格式,然后前端再通过flv.js播放。以下是一个基于此思路的基本实现指南:确保你已经安装了Vue.js、video.js、flv.js相关的依......
  • 原生JS 绑定右键菜单 并隐藏浏览器右键菜单
    原生JS绑定右键菜单并隐藏浏览器右键菜单//获取元素vardom=document.getElementById("box");dom.addEventListener('contextmenu',function(e){if(e.button===2){notesTitle=e.srcElement.innerText//获取点击的元素e.preventDefault();//......
  • 【Java定时任务】浅谈CronTrigger的用法和在线Cron表达式生成网址
    1.CronTrigger的作用CronTriggers往往比SimpleTrigger更有用,如果您需要基于日历的概念,而非SimpleTrigger完全指定的时间间隔,复发的发射工作的时间表。CronTrigger,你可以指定触发的时间表如“每星期五中午”,或“每个工作日9:30时”,甚至“每5分钟一班9:00和10:00逢星期一上午,星期三......
  • chrome浏览器离线安装包下载
    打开Chrome浏览器主页:https://www.google.cn/chrome/参数standalone=1指离线安装包,点击下载可以看到大小100M左右,不加该参数,大小只有1M多。参数platform=win则是32位,platform=win64或者不加该参数默认64位,platform=mac就可以下载Mac版本。下载win64位离线安装包 h......