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
}