1个小时丢了一个查询串,一个第三方webhook在发送 filter[status]=open&filter[assignee]=me,我的处理程序正在阅读 filter 作为一个扁平字符串,我无法弄清楚为什么每个请求都通过未过滤的方式发出。当我将原始 URL 粘贴到查询字符串解析器并看到它解析为嵌套对象的那一刻,错误就很明显:发送者使用括号表示法,而我的解析器没有。本指南涵盖了我如何使用 查询字符串解析器 toolz。dev 上,查询字符串的棘手部分实际上是什么,以及为什么同一密钥编码两种不同的方式可以悄悄地破坏集成。
TL;博士: 串(query string)是问号后URL中携带参数作为键值对的部分,查询串解析器将其转换为结构化的JSON,解码百分比编码并处理重复的键和括号数组,并且可以从JSON构建正确编码的查询串 查询字符串解析器 在浏览器中执行双向操作,因此您可以在不离开页面的情况下检查混乱的 URL 或组装干净的 URL。
什么是查询字符串?
查询字符串是 URL 中第一个问号之后开始到片段结束的部分,即哈希之后的部分。它携带参数为 key=value 由安培数连接的对,所以 ?q=json&page=2 pass 两个参数。服务器和客户端代码读取那些来过滤搜索、跟踪活动、分页列表或在页面之间携带状态。该组件中什么是合法的和不合法的通用规则来自 RFC 3986、URI标准,以及浏览器遵循的表单样式参数的具体规则来自于 WHATWG URL 标准。
Catch是RFC 3986定义了查询组件的语法但不是它的含义,它说的是哪些字符是允许的,以及它们必须如何被百分比编码,但它没有说如何 key=value pairs映射到一个数据结构,那个解释继承自html表单提交,不同的平台以不兼容的方式扩展它,这就是为什么同一个查询字符串对php后端、rails控制器和javascript前端可能意味着稍微不同的东西,以及为什么解析器必须使其约定显式化。
URL编码的查询字符串中的每个键和值,以便保留字符存活下来。一个空间变成 %20 或者加号,值内的安培数变为 %26 所以它不会被误认为是分隔符,斜线变成了 %2F.解析就是拆对再解码每一边,构建就是编码每一边,加入对,任一方向编码都弄错,值默默腐败。
查询字符串解析器实际上做什么?
URL 或裸查询字符串,解析器将其变成结构化、可读的数据,在将所有内容都剥离到并包括问号的方式上,忽略哈希后的片段,拆分对子,解码每个键和值,并决定如何表示重复键和括号键,输出是可以读取和复制的 JSON 对象,加上每个解码对的平板表,因此重复和空值是显而易见的。
On toolz。dev 工具运行两个方向,在解析模式下你粘贴一个完整的 URL 或只是它的查询字符串,得到 JSON 和参数表,在构建模式下你粘贴一个 JSON 对象,得到一个正确编码的查询字符串,可以选择数组的表示方式,加载样本,你可以观看一个真实的 URL,其中包含一个片段,一个重复风格的数组,一个编码空间解析为干净的 JSON,然后重建它。
URL 眼球化而使用专用解析器的原因是查询字符串隐藏了它们的结构,一个编码字符、重复键、括号表示法的长 URL 几乎不可能通过扫描正确读取,而最难读取的部分、编码和重复,正是导致 Bug 的部分,看到 JSON 旁边的解码表,就去除了猜测。
如何处理重复的按键?
相同的密钥可以合法地在查询字符串中出现多次,例如 in tags=react&tags=laravel并且没有单一的正确方法来解释它,这是许多混淆的根源。不同的系统以不同的方式解决重复,因此解析器必须让您选择。
最常见的约定,也是 toolz。dev 工具中的默认值,是将重复的键收集到数组中,所以 tags=react&tags=laravel 变成 {"tags":["react","laravel"]}。这与浏览器'自己的方式相匹配 URLSearchParams.getAll exposes 的值以及大多数现代后端的行为方式。但有些框架只保留第一次出现,有些只保留最后一次,因此该工具还提供保留优先和保留最后选项。当您调试集成时,将解析器 's 的行为与生成或消耗 URL 的系统相匹配,这才是 JSON 有意义的原因。
这种模糊性不是学术性的。一个称为 HTTP 参数污染的经典安全性和正确性问题的存在正是因为请求路径中的两个系统可以解决 id=1&id=2 不同的是,人们看到 1 而另一个则看到了 2.能够明确地看到给定解析器如何解析重复是推理该类错误的最快方法。
像标签[]或过滤器[颜色]这样的括号是什么意思?
Bracket 表示法是将数组和嵌套对象编码在平面查询字符串内的约定,也是解析器最不同意的地方,尾随空括号标记一个数组,所以 tags[]=react&tags[]=laravel 建造 {"tags":["react","laravel"]}.命名括号标记嵌套对象,所以 filter[color]=red&filter[size]=l 建造 {"filter":{"color":"red","size":"l"}}.括号可以嵌套,所以 a[b][c]=1 建造 {"a":{"b":{"c":"1"}}}。
该语法来自 PHP 和 Ruby on Rails 如何序列化表单数据以及许多 JavaScript 库,例如 qs follow it。它不是任何核心URL标准的一部分,这正是为什么要简单 URLSearchParams 在浏览器中不会扩展它,为您提供字面上的密钥 tags[] array 而不是。toolz。dev 解析器理解约定并将其扩展为匹配结构,它可以让您在想要字面键时关闭该行为。
以下是主要约定在解析和构建时如何排列:
| 阵列样式 | 编码为 | 解析到 | 常见于 |
|---|---|---|---|
| 重复键 | tags=a&tags=b |
["a","b"] |
浏览器,大多数后端 |
| 空括号 | tags[]=a&tags[]=b |
["a","b"] |
PHP、Rails、qs 库 |
| 索引括号 | tags[0]=a&tags[1]=b |
["a","b"] |
qs库,有序数据 |
| 逗号加入 | tags=a,b |
一根绳子要分割 | 一些 API、紧凑型 URL |
当您使用该工具构建查询字符串时,您会选择要发射的查询字符串,因此输出与接收系统期望的任何内容相匹配。当您解析时,该工具会检测到重复的键和括号符号,逗号连接的值将保留为单个字符串,因为只有您知道逗号是分隔符还是数据的一部分。
为什么加号会变成空格?
URL的查询字符串中,一个字面空间经常被编码为加号而不是 %20.这是从中继承的规则 application/x-www-form-urlencoded HTML 表单使用的格式,以及 WHATWG URL 标准 编纂它:解析表单编码数据时,a + 被解码为一个空间。所以 q=json+parser 应解析为 json parser并且toolz。dev工具默认执行此操作。
妙的是这个规则适用于查询组件,而不是适用于路径 A. + 在路径段中是一个字面上的加号。有时您的数据确实包含应保存的加号,例如电话号码或搜索 C++.对于那些情况,工具有一个开关来关闭加号即空格,所以加号在往返中幸存下来,这是通用的一种细节 URL 编码器 不会为您做出决定,因为它不知道它是在查看查询还是在查看路径。
构建时获得正确性也很重要。当工具编码值时,它会对保留字符进行百分比编码,并且默认情况下,在表单编码样式中使用空格加号,因此它生成的字符串是浏览器和后端将按照您的预期方式解码的字符串。
这与完整的 URL 解析器有何不同?
器(query string parser)和完整的URL解析器重叠但回答不同的问题,使用正确的问题可以保存一个步骤。URL解析器将一个完整的链接分解为它的组件、方案、主机、端口、路径、查询和片段,并且是你在调试请求要去哪里或为什么重定向或CORS检查表现得奇怪时想要的。查询字符串解析器专注于查询本身,并将其变成结构化、可编辑的JSON,包括数组和嵌套密钥,并且可以构建查询返回。
的 网址解析器 on toolz。dev 是解剖学的工具:给它一个链接,它向你显示主机与原点的区别,默认端口和路径的各个部分查询字符串解析器是处理参数的工具:给它相同的链接,它给你可以编辑的 JSON 参数,然后从你的编辑中重建一个查询字符串,实际上我将它们一起使用,URL 解析器来理解一个链接,查询字符串解析器来更改其参数,如果我正在组装一个活动链接,我可以达到 中海外空建设者 相反,它是一个专门用于分析标签的查询字符串构建器。
我什么时候才能真正做到这一点?
URL做得比指向一个页面更多的时候,老实的回答是,我用它来调试webhook和OAuth重定向,其中参数承载整个有效负载,一个错误编码的值破坏了流程,我用它来读取营销链接上的跟踪参数,这样我就可以准确地看到一个活动正在通过什么,我用它将同事粘贴在聊天中的查询字符串转换为JSON,我可以掉入测试夹具,并且要反向,将一个小对象变成一个查询字符串,以便快速手动请求。
一个有效的例子使回报具体化。 OAuth 提供商会使用类似的东西重定向回您的应用程序 ?code=abc123&state=xyz789&scope=read%20write&error=。粘贴到解析器中,它解析为干净的对象: code 並 state 作为他们的字面价值, scope 解码为 read write 因为 %20 是一个空间,并且 error 为空字符串而不是缺失的密钥,它告诉您提供商发送了参数,但将其留空。通过眼睛从原始URL读取,您可能会错过其中的编码空间 scope 并误读了空 error并且这两者正是决定您的回调处理程序是否正确分支的细节。看到解码表可以消除歧义,如果您需要重现请求,构建模式将编辑的对象一步转换回有效的回调 URL。
因为这项工作涉及的 URL 包含令牌、签名值和跟踪标识符,所以在完全在浏览器中运行的工具中执行此操作很重要。您粘贴的任何内容都不会传输、记录或存储,并且该工具会继续与网络关闭,因此您可以安全地检查来自生产的签名回调 URL,而不是经过清理的副本。我提出了将此类工作客户端保留在客户端的更广泛理由 在线工具中的数据隐私 guide,而这个解析器与我在中描述的其他链接和文本实用程序并列 web开发人员工具包.如果你工作的一部分是把杂乱的输入变成干净的slugs和标识符,则 Slug 生成器 URL工作的输出端的天然伴侣。
常见问题
什么是查询字符串?
串(query string)是问号后一个URL中携带参数作为由安培数连接的键值对的部分,如?q=json&page=2。服务器和客户端代码读取它来过滤结果、跟踪活动或传递状态。每个键和值都是URL编码的,以便空格和保留字符得以保留,而哈希后的片段不是它的一部分。
解析时如何处理重复的键?
默认情况下,出现多次的密钥会组合成数组,因此 tags=react&tags=laravel 解析为 {"tags":["react","laravel"]}。您可以切换为仅保留第一个值或仅保留最后一个值,因为不同的后端以不同的方式解析重复项,并且您希望 JSON 与您所针对的系统相匹配。
像标签[]或过滤器[颜色]这样的括号是什么意思?
Bracket符号在一个平坦的查询字符串内对数组和嵌套对象进行编码,tags[]=react&tags[]=laravel构建一个数组,过滤[color]=red&filter[size]=l构建嵌套对象{"filter":{"color":"red","size":"l"}}。常见于PHP、Rails和form库中,因此解析器将其扩展为匹配结构,您可以将其关闭以保留字面键。
为什么加号变成了空间?
URL 的查询字符串中,一个字面空间通常被编码为加号,这是从 HTML 表单提交继承的规则,因此解析器默认将 + 转换回一个空间,如果您的数据包含必须保留的真实加号,例如 C++ 或电话号码,请关闭加号即空间选项,加号将被保留。
我可以从 JSON 构建查询字符串吗?
是切换到构建模式并粘贴键值对的JSON对象,工具百分比对每个键和值进行编码,并用安培数加入它们,您可以选择数组的编码方式:重复键、空括号、索引括号或逗号分隔的列表,因此输出与接收系统期望的任何内容相匹配。
这与完整的 URL 解析器有什么区别?
Full URL解析器将整个URL分解为方案、主机、端口、路径、查询、片段,查询字符串解析器只关注查询,将其变成包括数组和嵌套键的结构化可编辑JSON,并可以构建查询回URL解析器来检查链接,而这个工具可以读取或更改其参数。
它处理的是完整的 URL 还是仅处理查询部分?
Both。Paste一个完整的URL,解析器把所有内容都掉到并包括问号,忽略了哈希后的片段,所以你只得到参数,如果你paste一个没有问号的裸查询字符串,它被as-is解析,当你只复制参数时很方便。
我的 URL 发送到任何地方吗?
号解析、解码和编码都以 JavaScript 的形式运行在浏览器中,因此不会传输、记录或存储任何内容,您可以通过在解析 URL 时查看网络选项卡或断开与互联网的连接来确认它,因为一旦页面加载,该工具就会保持离线工作。
免费检查或组装参数 查询字符串解析器。它将 URL 解析为 JSON 并构建查询字符串,处理重复的键、括号数组和编码,完全在浏览器中。
