base64URL解析浏览器链接中的json

起来改bug

于 2023-09-07 11:42:38 发布

阅读量730

点赞数

文章标签： json javascript 前端

本文链接：https://blog.youkuaiyun.com/q553866469/article/details/132734428

版权

本文讲述了如何处理第三方跳转时携带的基于Base64URL编码的JSON对象，介绍了Base64URL编码的特点，以及在JavaScript中使用`atob`和`decodeURIComponent(encodeURIComponent())`函数进行解码和解析的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

场景：有时候第三方跳转，会携带base64URL编码后的json对象在url中，我们需要去解析出来，

那么我们首先要知道什么是base64编码和base64URL编码；

1.什么是base64以及base64URL

首先他们都是将二进制数据编码为ASCII字符串的编码方式，其次base64URL是一种特殊的Base64编码方式，它在编码后的字符串末尾添加了"="号作为填充字符，并且对包含"/"和"+"字符进行了转换，以避免在URL中出现冲突。因此，Base64URL更适用于在URL中传递二进制数据

2.如何转码

在js中我们可以使用atob函数将base64URL码转为json字符串，在使用JSON.parse转为json对象，如果是base64url，我们就先要使用decodeURIComponent(encodeURIComponent())方法，转成base64码在进行解析，如下所示：

const base64String = decodeURIComponent(encodeURIComponent(window.location.href));
const jsonObj = JSON.parse(atob(base64String));

jsonObj就是json对象，我们可以使用这个数据做后续操作了。