HTML5 History.pushState修改了包含百分比编码的非Ascii(Unicode)字符的URL

Question

在OSS Web应用程序中,我们有JS代码执行一些Ajax更新(使用jQuery,不相关).页面更新后,将调用html5历史记录界面History.pushState,代码如下:

var updateHistory = function(url) {
    var context = { state:1, rand:Math.random() };
    /* -----> bedfore the problem call <------- */
    History.pushState( context, "Questions", url );
    /* -----> after the problem call <------- */
    setTimeout(function (){
        /* HACK: For some weird reson, sometimes something overrides the above pushState so we re-aplly it
                 This might be caused by some other JS plugin.
                 The delay of 10msec allows the other plugin to override the URL.
        */
        History.replaceState( context, "Questions", url );
    }, 10);
};

[ 请注意:完整的代码段是为上下文提供的,HACK部分不是这个问题的问题]

该应用程序是i18n'ed并在URL中使用URL编码的Unicode段,因此在上述代码中标记的问题调用之前,URL参数包含(在Firebug中检查):

"/%D8%A7%D9%84%D8%A3%D8%B3%D8%A6%D9%84%D8%A9/scope:all/sort:activity-desc/page:1/"

编码的段是以百分比编码的utf-8.浏览器窗口中的URL为:(仅为完整性,并不重要)

http://<base-url>/%D8%A7%D9%84%D8%A3%D8%B3%D8%A6%D9%84%D8%A9/

在通话结束后,浏览器窗口中显示的URL将更改为:

http://<base-url>/%C3%98%C2%A7%C3%99%C2%84%C3%98%C2%A3%C3%98%C2%B3%C3%98%C2%A6%C3%99%C2%84%C3%98%C2%A9/scope:all/sort:activity-desc/page:1/

URL编码的段只是mojibake,是在某种程度上使用错误编码的结果.正确的URL将是:

http://<base-url>/%D8%A7%D9%84%D8%A3%D8%B3%D8%A6%D9%84%D8%A9/scope:all/sort:activity-desc/page:1/

此行为已在FF和Chrome上进行了测试.

历史界面规范没有提及有关编码URL的任何内容,但我认为在界面的函数调用中使用URL时,URL格式的默认标准(utf-8和百分比编码等)将适用.

关于这里发生了什么的任何想法.

编辑:

我没有注意历史中的大写字母H - 这段代码实际上是使用历史界面的History.js包装器.我直接调用history.pushState(注意小写的h)而没有经过包装器代替,并且代码按照我的预期正常工作.原始代码的问题仍然存在 - 所以看起来像History.js库的问题.

Answer 1

更新

正如Doug S在下面的评论中解释的那样,最新版本的History.js包含了对此行为的修复.他还发现我的解决方案在浏览器(例如IE 9及更低版本)中使用需要哈希回退时会导致双重编码,所以我建议不要使用下面详细介绍的修补程序,只需下载最新版本.

我在下面保留了我的原始答案,因为它确实更详细地解释了正在发生的事情.

巴塞尔找到了各种各样的解决方案,但仍然存在一些关于幕后发生的事情的混乱.这个答案详细介绍了这个问题并建议了一个更好的解决方案.(如果需要,您可以直接跳到修复程序.)

问题

首先,打开浏览器的JS控制台并运行:

window.encodeURI(window.unescape('%D8%A7%D9%84%D8%A3%D8%B3%D8%A6%D9%84%D8%A9'))

这看起来很熟悉吗？应该 - 这就是你的网址被破坏了.问题在于实施History.unescapeString,特别是这一行:

tmp = window.unescape(result);

window.unescape是一个DOM Level 0函数 - 也就是说,它是来自Netscape 2白昼时代的非标准遗物.它使用RFC 2396中定义的转义规则,根据这些规则,非保留范围之外的字符(字母数字和一小组标点符号)符号)编码为八位字节.

这适用于US-ASCII范围,但并非所有(实际上绝大多数)UTF-8中的字符都可以用单个字节表示.由于URI没有表示正在使用的字符集的内置方式,因此window.unescape假设每个字符都映射到一个八位字节,并轻率地破坏任何不匹配的字符集.

在此示例中,URL中的第一个字母是阿拉伯字母alef(ا),由两个字节表示:0xD8 0xA7.window.unescape将这些解释为两个独立的字符:( 0x00 0xD8带有笔划的Ø-大写字母O)和0x00 0xA7(§-节标记).

这是History.js的一个已知问题.

修复

如上面提问者所述,可以通过使用History API的本机实现而不是History.js包装来回避问题,即history.pushState代替History.pushState.

这适用于支持历史记录API的浏览器,但是对于那些不支持历史记录API的浏览器而言却失去了优势.幸运的是,有一个更好的解决方案.打开你正在引用的History.js源并找到这一行(我的副本中的~1059):

tmp = window.unescape(result);

替换为:

tmp = window.unescape(encodeURIComponent(result));

或者,如果您使用的是压缩源,请替换a.unescape(c)为a.unescape(encodeURIComponent(c)).

为了测试这个变化,我在一个阿拉伯语命名目录中的本地Web服务器上运行了History.js HTML5 jQuery测试套件.在进行更改之前,测试14失败; 更改后,所有测试都通过了.

信用

虽然我独立地找到了问题和解决方案,但Damien Antipa应该首先找到它并通过修复发出拉取请求.