数据 uri 中的多字节 unicode 解码不正确答案

【问题标题】：Multi-byte unicode decoding incorrectly from data uri数据 uri 中的多字节 unicode 解码不正确
【发布时间】：2019-11-11 23:25:44
【问题描述】：

我最近遇到了 html 数据 URI 的问题：

我的源 html 包含字符 ā，它在直接加载 html 时正确呈现。但是，当 html 被转换为数据 URI 时，该字符改为呈现为 Ä。

在挖掘生成的 URI 后，我发现该字符已被编码为 %c4%81，但这似乎是 ā 的正确 URI 编码。

我什至尝试将数据 URI 转换为 base64，但我遇到了同样的问题。这似乎发生在 Chrome 和 Safari 上。

我想知道在数据 URI 中编码多字节 unicode 字符是否有问题，因为 ā 目前是我的 html 中唯一的多字节字符。

console.log(encodeURIComponent('ā'));

// https://stackoverflow.com/questions/23223718/failed-to-execute-btoa-on-window-the-string-to-be-encoded-contains-characte
console.log(btoa(unescape(encodeURIComponent('ā'))));

<iframe src="data:text/html,%c4%81"></iframe>
<iframe src="data:text/html;base64,xIE="></iframe>

【问题讨论】：

标签： html unicode escaping data-uri

【解决方案1】：

在处理文本数据 URI 时，您需要指定字符编码，最常见的是 UTF-8。

如果您只是将;charset=UTF-8 声明添加到您的mime 类型，浏览器将正确解码该字符。

<iframe src="data:text/html;charset=UTF-8,%c4%81"></iframe>
<iframe src="data:text/html;charset=UTF-8;base64,xIE="></iframe>

【讨论】：