javascript安全解码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 = "https://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
}