在浏览器环境中对带有中文字符的json数据进行 Base64 编码和解码`window.btoa` 和 `window.

在客户的安全性扫描中，扫描到了抽离出来的静态国际化json资源，报错: 攻击者可能通过RC4加密套件等参数信息的泄漏来对网站发起攻击

不明白是什么意思,但是它确实成为了客户纠结的点,解决: 对国际化json文件进行base64编码, 加载资源之后对数据进行解码

但是window.btoa 和 window.atob 这两个用于 Base64 编码和解码的原生 JavaScript 函数只能处理 ASCII 字符。如果直接传递包含非 ASCII 字符（如中文字符）的字符串，会导致错误或数据丢失。

本文将介绍如何在浏览器环境中正确处理包含中文字符的 Base64 编码和解码

问题背景

window.btoa 和 window.atob 只能处理 ASCII 字符。如果直接传递包含非 ASCII 字符的字符串，会抛出 VM28:2 Uncaught DOMException 错误。例如：

const str = "这是一个包含中文字符的字符串";
const base64Encoded = window.btoa(str); 
// 抛出 VM28:2 Uncaught DOMException 错误
// The string to be encoded contains characters outside of the Latin1 range

解决方案

为了正确处理包含中文字符的字符串，我们需要在编码和解码过程中使用 encodeURIComponent 和 decodeURIComponent，以及 escape 和 unescape。这些函数可以将字符串转换为 UTF-8 编码的字节序列，然后再进行 Base64 编码和解码

编码过程

1. 使用 encodeURIComponent 将字符串编码为 UTF-8
2. 使用 unescape 将 UTF-8 编码的字符串转换为原始字符，使其可以被 window.btoa 处理

const jsonToBase64 = (str) => window.btoa(unescape(encodeURIComponent(str)));

解码过程

1. 使用 window.atob 将 Base64 编码的字符串解码为原始的 %XX 格式的转义序列
2. 使用 escape 将这些原始字符转换为 %XX 格式的转义序列
3. 使用 decodeURIComponent 将这些 %XX 格式的转义序列解码回原始的 UTF-8 字符串

const base64ToJson = (base64) => decodeURIComponent(escape(window.atob(base64)));

示例代码

以下是一个示例，展示了如何在浏览器环境中处理包含中文字符的 Base64 编码和解码：

// 编码函数
const jsonToBase64 = (str) => window.btoa(unescape(encodeURIComponent(str)));

// 解码函数
const base64ToJson = (base64) => decodeURIComponent(escape(window.atob(base64)));

// 示例数据，常见的国际化文本数据
const originalData = { message: '这是一个包含中文字符的字符串' };
const jsonString = JSON.stringify(originalData);

// 编码
const base64Encoded = jsonToBase64(jsonString);
console.log('Base64 Encoded:', base64Encoded);

// 解码
const decodedJsonString = base64ToJson(base64Encoded);
const decodedData = JSON.parse(decodedJsonString);
console.log('Decoded Data:', decodedData);

执行如图：

总结

通过结合使用 encodeURIComponent、decodeURIComponent、escape 和 unescape，我们可以在浏览器环境中正确处理包含中文字符的 Base64 编码和解码。这种方法确保了数据在编码和解码过程中不会丢失或损坏，从而保证了数据的完整性和正确性

希望对大家有所帮助，各位佬有更好的方法，欢迎留言讨论