从数据 uri 错误地解码多字节 unicode

Question

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

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

在对结果 URI 进行挖掘后，我发现该字符已被编码为 %c4%81，但这似乎是 ā.

的正确 URI 编码

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

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

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

// 
console.log(btoa(unescape(encodeURIComponent('ā'))));

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

Answer 1

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

如果您简单地向 mime 类型添加 ;charset=UTF-8 声明，浏览器将正确解码该字符。

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

Multi-byte unicode decoding incorrectly from data uri