search

devote / HTML5-History-API

HTML5 History API expansion for browsers not supporting pushState, replaceState
http://spb-piksel.ru
MIT License
1.02k stars 182 forks source link

inconsistent URL escaping #9

Closed andrewskaggs closed 11 years ago

andrewskaggs commented 11 years ago

I am attempting to call history.pushState with a URL that contains escaped JSON data but the behavior is not correct in Firefox. The URL written to the address bar has some escaping removed and no longer works when pasted into a new browser. The problem does not occur in Chrome or IE 9.

history.pushState input URL:

?filters=%5B%7B%22Value%22%3A%22%5BDim%20Date%5D.%5BYear%5D.%26%5B2011%5D%22%2C%22Type%22%3A%22rowFilter%22%2C%22LevelName%22%3A%22%5BDim%20Date%5D.%5BYear%5D.%5BYear%5D%22%2C%22Hierarchy%22%3A%22%5BDim%20Date%5D.%5BYear%5D%22%2C%22CurrentLevel%22%3A%221%22%2C%22TotalLevels%22%3A%221%22%2C%22Text%22%3A%222011%22%7D%2C%7B%22Value%22%3A%22-1%22%2C%22Type%22%3A%22rowFilter%22%2C%22LevelName%22%3A%22%5BDim%20Date%5D.%5BQuarter%5D.%5BQuarter%5D%22%2C%22Hierarchy%22%3A%22%5BDim%20Date%5D.%5BQuarter%5D%22%2C%22CurrentLevel%22%3A%221%22%2C%22TotalLevels%22%3A%221%22%2C%22Text%22%3A%22-1%22%7D%2C%7B%22Value%22%3A%22-1%22%2C%22Type%22%3A%22rowFilter%22%2C%22LevelName%22%3A%22%5BDim%20Date%5D.%5BMonth%5D.%5BMonth%5D%22%2C%22Hierarchy%22%3A%22%5BDim%20Date%5D.%5BMonth%5D%22%2C%22CurrentLevel%22%3A%221%22%2C%22TotalLevels%22%3A%221%22%2C%22Text%22%3A%22-1%22%7D%2C%7B%22Value%22%3A%22Top2Box%22%2C%22Type%22%3A%22TopBoxDropDown%22%2C%22Text%22%3A%22Top2Box%22%7D%2C%7B%22Value%22%3A%22-1%22%2C%22Type%22%3A%22rowFilter%22%2C%22LevelName%22%3A%22%5BDim%20Date%5D.%5BYear%5D.%5BYear%5D%22%2C%22Hierarchy%22%3A%22%5BDim%20Date%5D.%5BYear%5D%22%2C%22CurrentLevel%22%3A%221%22%2C%22TotalLevels%22%3A%221%22%2C%22Text%22%3A%22-1%22%7D%2C%7B%22Value%22%3A%22-1%22%2C%22Type%22%3A%22rowFilter%22%2C%22LevelName%22%3A%22%5BDim%20Date%5D.%5BQuarter%5D.%5BQuarter%5D%22%2C%22Hierarchy%22%3A%22%5BDim%20Date%5D.%5BQuarter%5D%22%2C%22CurrentLevel%22%3A%221%22%2C%22TotalLevels%22%3A%221%22%2C%22Text%22%3A%22-1%22%7D%2C%7B%22Value%22%3A%22-1%22%2C%22Type%22%3A%22rowFilter%22%2C%22LevelName%22%3A%22%5BDim%20Date%5D.%5BMonth%5D.%5BMonth%5D%22%2C%22Hierarchy%22%3A%22%5BDim%20Date%5D.%5BMonth%5D%22%2C%22CurrentLevel%22%3A%221%22%2C%22TotalLevels%22%3A%221%22%2C%22Text%22%3A%22-1%22%7D%2C%7B%22Value%22%3A%22Top2Box%22%2C%22Type%22%3A%22TopBoxDropDown%22%2C%22Text%22%3A%22Top2Box%22%7D%5D&displayType=FullPage

Firefox address bar result:

http://localhost/Win/ameren/report/da435761-5e3c-43fb-8436-e88a24a32eac?filters=[{%22Value%22%3A%22[Dim%20Date].[Year].%26[2011]%22%2C%22Type%22%3A%22rowFilter%22%2C%22LevelName%22%3A%22[Dim%20Date].[Year].[Year]%22%2C%22Hierarchy%22%3A%22[Dim%20Date].[Year]%22%2C%22CurrentLevel%22%3A%221%22%2C%22TotalLevels%22%3A%221%22%2C%22Text%22%3A%222011%22}%2C{%22Value%22%3A%22-1%22%2C%22Type%22%3A%22rowFilter%22%2C%22LevelName%22%3A%22[Dim%20Date].[Quarter].[Quarter]%22%2C%22Hierarchy%22%3A%22[Dim%20Date].[Quarter]%22%2C%22CurrentLevel%22%3A%221%22%2C%22TotalLevels%22%3A%221%22%2C%22Text%22%3A%22-1%22}%2C{%22Value%22%3A%22-1%22%2C%22Type%22%3A%22rowFilter%22%2C%22LevelName%22%3A%22[Dim%20Date].[Month].[Month]%22%2C%22Hierarchy%22%3A%22[Dim%20Date].[Month]%22%2C%22CurrentLevel%22%3A%221%22%2C%22TotalLevels%22%3A%221%22%2C%22Text%22%3A%22-1%22}%2C{%22Value%22%3A%22Top2Box%22%2C%22Type%22%3A%22TopBoxDropDown%22%2C%22Text%22%3A%22Top2Box%22}%2C{%22Value%22%3A%22-1%22%2C%22Type%22%3A%22rowFilter%22%2C%22LevelName%22%3A%22[Dim%20Date].[Year].[Year]%22%2C%22Hierarchy%22%3A%22[Dim%20Date].[Year]%22%2C%22CurrentLevel%22%3A%221%22%2C%22TotalLevels%22%3A%221%22%2C%22Text%22%3A%22-1%22}%2C{%22Value%22%3A%22-1%22%2C%22Type%22%3A%22rowFilter%22%2C%22LevelName%22%3A%22[Dim%20Date].[Quarter].[Quarter]%22%2C%22Hierarchy%22%3A%22[Dim%20Date].[Quarter]%22%2C%22CurrentLevel%22%3A%221%22%2C%22TotalLevels%22%3A%221%22%2C%22Text%22%3A%22-1%22}%2C{%22Value%22%3A%22-1%22%2C%22Type%22%3A%22rowFilter%22%2C%22LevelName%22%3A%22[Dim%20Date].[Month].[Month]%22%2C%22Hierarchy%22%3A%22[Dim%20Date].[Month]%22%2C%22CurrentLevel%22%3A%221%22%2C%22TotalLevels%22%3A%221%22%2C%22Text%22%3A%22-1%22}%2C{%22Value%22%3A%22Top2Box%22%2C%22Type%22%3A%22TopBoxDropDown%22%2C%22Text%22%3A%22Top2Box%22}]&displayType=FullPage

IE9 address bar result:

http://localhost/Win/ameren/report/da435761-5e3c-43fb-8436-e88a24a32eac#/?filters=%5B%7B%22Value%22%3A%22%5BDim%20Date%5D.%5BYear%5D.%26%5B2011%5D%22%2C%22Type%22%3A%22rowFilter%22%2C%22LevelName%22%3A%22%5BDim%20Date%5D.%5BYear%5D.%5BYear%5D%22%2C%22Hierarchy%22%3A%22%5BDim%20Date%5D.%5BYear%5D%22%2C%22CurrentLevel%22%3A%221%22%2C%22TotalLevels%22%3A%221%22%2C%22Text%22%3A%222011%22%7D%2C%7B%22Value%22%3A%22-1%22%2C%22Type%22%3A%22rowFilter%22%2C%22LevelName%22%3A%22%5BDim%20Date%5D.%5BQuarter%5D.%5BQuarter%5D%22%2C%22Hierarchy%22%3A%22%5BDim%20Date%5D.%5BQuarter%5D%22%2C%22CurrentLevel%22%3A%221%22%2C%22TotalLevels%22%3A%221%22%2C%22Text%22%3A%22-1%22%7D%2C%7B%22Value%22%3A%22-1%22%2C%22Type%22%3A%22rowFilter%22%2C%22LevelName%22%3A%22%5BDim%20Date%5D.%5BMonth%5D.%5BMonth%5D%22%2C%22Hierarchy%22%3A%22%5BDim%20Date%5D.%5BMonth%5D%22%2C%22CurrentLevel%22%3A%221%22%2C%22TotalLevels%22%3A%221%22%2C%22Text%22%3A%22-1%22%7D%2C%7B%22Value%22%3A%22Top2Box%22%2C%22Type%22%3A%22TopBoxDropDown%22%2C%22Text%22%3A%22Top2Box%22%7D%2C%7B%22Value%22%3A%22-1%22%2C%22Type%22%3A%22rowFilter%22%2C%22LevelName%22%3A%22%5BDim%20Date%5D.%5BYear%5D.%5BYear%5D%22%2C%22Hierarchy%22%3A%22%5BDim%20Date%5D.%5BYear%5D%22%2C%22CurrentLevel%22%3A%221%22%2C%22TotalLevels%22%3A%221%22%2C%22Text%22%3A%22-1%22%7D%2C%7B%22Value%22%3A%22-1%22%2C%22Type%22%3A%22rowFilter%22%2C%22LevelName%22%3A%22%5BDim%20Date%5D.%5BQuarter%5D.%5BQuarter%5D%22%2C%22Hierarchy%22%3A%22%5BDim%20Date%5D.%5BQuarter%5D%22%2C%22CurrentLevel%22%3A%221%22%2C%22TotalLevels%22%3A%221%22%2C%22Text%22%3A%22-1%22%7D%2C%7B%22Value%22%3A%22-1%22%2C%22Type%22%3A%22rowFilter%22%2C%22LevelName%22%3A%22%5BDim%20Date%5D.%5BMonth%5D.%5BMonth%5D%22%2C%22Hierarchy%22%3A%22%5BDim%20Date%5D.%5BMonth%5D%22%2C%22CurrentLevel%22%3A%221%22%2C%22TotalLevels%22%3A%221%22%2C%22Text%22%3A%22-1%22%7D%2C%7B%22Value%22%3A%22Top2Box%22%2C%22Type%22%3A%22TopBoxDropDown%22%2C%22Text%22%3A%22Top2Box%22%7D%5D&displayType=FullPage

Chrome address bar result:

http://localhost/Win/ameren/report/da435761-5e3c-43fb-8436-e88a24a32eac?filters=%5B%7B%22Value%22%3A%22%5BDim%20Date%5D.%5BYear%5D.%26%5B2011%5D%22%2C%22Type%22%3A%22rowFilter%22%2C%22LevelName%22%3A%22%5BDim%20Date%5D.%5BYear%5D.%5BYear%5D%22%2C%22Hierarchy%22%3A%22%5BDim%20Date%5D.%5BYear%5D%22%2C%22CurrentLevel%22%3A%221%22%2C%22TotalLevels%22%3A%221%22%2C%22Text%22%3A%222011%22%7D%2C%7B%22Value%22%3A%22-1%22%2C%22Type%22%3A%22rowFilter%22%2C%22LevelName%22%3A%22%5BDim%20Date%5D.%5BQuarter%5D.%5BQuarter%5D%22%2C%22Hierarchy%22%3A%22%5BDim%20Date%5D.%5BQuarter%5D%22%2C%22CurrentLevel%22%3A%221%22%2C%22TotalLevels%22%3A%221%22%2C%22Text%22%3A%22-1%22%7D%2C%7B%22Value%22%3A%22-1%22%2C%22Type%22%3A%22rowFilter%22%2C%22LevelName%22%3A%22%5BDim%20Date%5D.%5BMonth%5D.%5BMonth%5D%22%2C%22Hierarchy%22%3A%22%5BDim%20Date%5D.%5BMonth%5D%22%2C%22CurrentLevel%22%3A%221%22%2C%22TotalLevels%22%3A%221%22%2C%22Text%22%3A%22-1%22%7D%2C%7B%22Value%22%3A%22Top2Box%22%2C%22Type%22%3A%22TopBoxDropDown%22%2C%22Text%22%3A%22Top2Box%22%7D%2C%7B%22Value%22%3A%22-1%22%2C%22Type%22%3A%22rowFilter%22%2C%22LevelName%22%3A%22%5BDim%20Date%5D.%5BYear%5D.%5BYear%5D%22%2C%22Hierarchy%22%3A%22%5BDim%20Date%5D.%5BYear%5D%22%2C%22CurrentLevel%22%3A%221%22%2C%22TotalLevels%22%3A%221%22%2C%22Text%22%3A%22-1%22%7D%2C%7B%22Value%22%3A%22-1%22%2C%22Type%22%3A%22rowFilter%22%2C%22LevelName%22%3A%22%5BDim%20Date%5D.%5BQuarter%5D.%5BQuarter%5D%22%2C%22Hierarchy%22%3A%22%5BDim%20Date%5D.%5BQuarter%5D%22%2C%22CurrentLevel%22%3A%221%22%2C%22TotalLevels%22%3A%221%22%2C%22Text%22%3A%22-1%22%7D%2C%7B%22Value%22%3A%22-1%22%2C%22Type%22%3A%22rowFilter%22%2C%22LevelName%22%3A%22%5BDim%20Date%5D.%5BMonth%5D.%5BMonth%5D%22%2C%22Hierarchy%22%3A%22%5BDim%20Date%5D.%5BMonth%5D%22%2C%22CurrentLevel%22%3A%221%22%2C%22TotalLevels%22%3A%221%22%2C%22Text%22%3A%22-1%22%7D%2C%7B%22Value%22%3A%22Top2Box%22%2C%22Type%22%3A%22TopBoxDropDown%22%2C%22Text%22%3A%22Top2Box%22%7D%5D&displayType=FullPage
devote commented 11 years ago

Hi,

You can specify the version of FireFox and what exactly you do, please give an example

Thanks

andrewskaggs commented 11 years ago

Please take a look at this example. Running it in Firefox 17 produces a string without any URL encoding in the address bar. IE 9 and Chrome 23 seem to work fine.

<!DOCTYPE html>
<html>

<body>
<a id="demolink" href="">Click Me</a>
</body>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
<script src="history.js"></script>

<script type="text/javascript">
    $("#demolink").click(function(event) {
        var objectToSerialize = { var1: "foo", var2: "bar" };
        var queryString = "?data=" + escape(JSON.stringify(objectToSerialize));
        history.pushState(null,null,queryString);
        event.preventDefault();
    });
</script>

</html>
devote commented 11 years ago

Hi,

method escape is deprecated and non standart, use encodeURIComponent method, that encode all symbols, if it does not lead to any results, write me about it and I will solve this bug.

Thanks

andrewskaggs commented 11 years ago

encodeURIComponent fixed the demo I posted above but was not sufficient for the application I'm working on. I will try to come up with a more complete demo to show you. Thanks for replying!

andrewskaggs commented 11 years ago

I traced through what is actually going on and discovered that this is a Firefox issue with partially decoding the URI for display. The HTML5-History-API works perfectly after using encodeURIComponent. Thanks for the great work - I will definitely be using this project!