数据uri中的多字节unicode解码错误

Question

我最近遇到了一个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>

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>