javascript安全解码base64

安全解码base64 为什么前端需要安全解码base64atob安全解码base64前端页面之间传递标准base64安全解码失败遇到的问题重定向后，从url获取base64解析失败问题

为什么前端需要安全解码base64

在javascript中，标准的base64是一个连续的字符串，只包括（A-Z、a-z、0-9、+、/），不包含空格或其他非Base64字符，根据Base64编码的规则，每4个字符一组，如果最后一组不足4个字符，需要用=填充（如果最后一组只有一个字符就需要填充3个=号，如果是Base64URL编码，这些字符可能会被省略）。在URL中，+被用作空格的编码，而/是URL的路径分隔符。因此，在将Base64编码的数据放入URL中时，通常会使用-和_分别替换+和/，。这种编码被称为Base64 URL编码或Base64URL。

atob安全解码base64 // base64Str是需要解码的base64 function urlSafeBase64Decode(base64Str){ // 将URL安全的Base64字符替换为标准Base64字符 let str = base64Str; if (base64Str.indexOf("-") > -1 || base64Str.indexOf("_") > -1) { str = base64Str.replace(/-/g, "+").replace(/_/g, "/"); } const pad = str.length % 4; if (pad) { str += new Array(4 - pad).fill("=").join(""); } // 使用window.atob()解码字符串 const binaryStr = window.atob(str); // 解析中文 const bytes = Uint8Array.from(binaryStr, (m) => m.codePointAt(0)); // 使用TextDecoder将二进制数据解码为UTF-8字符串 const decoder = new TextDecoder("utf-8"); const utf8Str = decoder.decode(bytes); return utf8Str; }; 前端页面之间传递标准base64

需要使用encodeURIComponent和decodeURIComponent，对参数编码和解码，编码过后的base可以使用URLSearchParams来获取参数

let url = " xxxx/page?data=" + encodeURIComponent("标准base64"); // "Some binary data"的Base64编码 // 使用URL对象解析URL let urlObj = new URL(url); let params = new URLSearchParams(urlObj.search); // 获取并解码Base64参数 let base64Data = decodeURIComponent(params.get("data")); // 现在你可以安全地使用base64Data了 let decodedData = window.atob(base64Data); 安全解码失败遇到的问题

浏览器控制台报错： Failed to execute ‘atob’ on ‘Window’: The string to be decoded is not correctly encoded. 都是因为传入atob（）的参数不是标准的base64

重定向后，从url获取base64解析失败问题

服务端：在url上返回标准的base64编码，含有+和/符号，前端使用new URLSearchParams()来获取参数值，会将字符串中的+号替换成空格，导致解析失败。同时url上使用标准的base64,在使用window.location.href重定向后，服务端接收到的是编译后的字符串

解决方式： 1、服务端返回安全base64 ( 上文提到的Base64 URL ) --（推荐） 2、前端使用字符串分割的方式获取

const getUrlSplitParams = (url, key) => { const [_, params] = url.split('?') const paramsArr = params.split('&') const newParams = {} paramsArr.forEach((item) => { const [key, value] = item.split('=') newParams[key] = value }) if (key) { return newParams[key] } return newParams }