Databases
StackOverflow2013
Postsdbo
POHTML5 History.pushState mangles URL's containing percent encoded non-Ascii (Unicode) chars
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHTML5 History.pushState mangles URL's containing percent encoded non-Ascii (Unicode) chars
    text
    copied!<p>In an OSS web app, we have JS code that performs some Ajax update (uses jQuery, not relevant). After the page update, a call is made to the html5 history interface <code>History.pushState</code>, in the following code:</p> <pre><code>var updateHistory = function(url) { var context = { state:1, rand:Math.random() }; /* -----&gt; bedfore the problem call &lt;------- */ History.pushState( context, "Questions", url ); /* -----&gt; after the problem call &lt;------- */ 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); }; </code></pre> <p>[<strong>Please note</strong>: the full code segment is provided for context, the HACK part is not the issue of this question]</p> <p>The app is i18n'ed and is using URL encoded Unicode segments in the URL's, so <strong>just before the marked problem call</strong> in the above code, the URL argument contains (as inspected in Firebug):</p> <pre><code>"/%D8%A7%D9%84%D8%A3%D8%B3%D8%A6%D9%84%D8%A9/scope:all/sort:activity-desc/page:1/" </code></pre> <p>The encoded segment is utf-8 in percent encoding. The URL in the browser window is: (just for completeness, doesn't really matter)</p> <pre><code>http://&lt;base-url&gt;/%D8%A7%D9%84%D8%A3%D8%B3%D8%A6%D9%84%D8%A9/ </code></pre> <p><strong>Just after the call</strong>, the URL displayed in the browser window changes to:</p> <pre><code>http://&lt;base-url&gt;/%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/ </code></pre> <p>The URL encoded segment is just mojibake, the result of using the wrong encoding at some level. The correct URL would've been:</p> <pre><code>http://&lt;base-url&gt;/%D8%A7%D9%84%D8%A3%D8%B3%D8%A6%D9%84%D8%A9/scope:all/sort:activity-desc/page:1/ </code></pre> <p>This behavior has been tested on both FF and Chrome.</p> <p>The history interface <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#dom-history-pushstate" rel="noreferrer">specs</a> don't mention anything about encoded URL's, but I assume the default standard for URL formation (utf-8 and percent encoding etc) would apply when using URL's in function calls for the interface.</p> <p>Any idea on what's going on here.</p> <p><strong>Edit</strong>: </p> <p>I wasn't paying attention to the uppercase H in History - this code is actually using the <a href="https://github.com/balupton/History.js" rel="noreferrer">History.js</a> wrapper for the history interface. I replaced with a direct call to <code>history.pushState</code> (notice the lowercase h) without going through the wrapper, and the code is working as expected as far as I can tell. The issue with the original code still stands - so an issue with the History.js library it seems.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload