+ (Plus) in URL parameter converted to %2B

[nlwillia]

The + character is valid in url query strings as a substitute for space or its hex-coded equivalent, %20.

When Angular bootstraps, $LocationProvider.$get initializes $location. $location.$$parse uses parseKeyValue (from inside matchAppURL) to decompose the query string into parameters. It calls the built-in decodeURIComponent which replaces hex escape sequences, but it does not replace "+" with space.

As a consequence, the plus character remains for $location.$$compile to encode as %2B which changes the unescaped, actual value of the parameter (as returned from $location.search().paramName) from "a b" to "a+b". This is incorrect.

The parseKeyValue function should be changed to scan the decoded value for '+' and replace it with space. This function is also used for manipulation of $location.search(), and in that scenario, '+' replacement is not correct, so the change would need to be parameterized so that '+' is replaced when parsing a parameter from the browser and left alone when parsing a parameter from the application.

Verified in angular 1.0.7 and 1.1.5.

[czerwingithub]

We ran into this problem as well. For now, I put a hack in place to get around this by overriding $browser.url() to change all '+' signs in the query string to '%20'. Otherwise, as the original bug poster noted, we incorrectly get plus signs returned in the values for our query string parameters.

At the very least, there should be a fix to respect the plus signs in the original URLs, before they are rewritten by Angular. We cannot prevent users of our API from using plus signs to encode spaces when they are constructing URLs to send to us.

[BrainBacon]

@czerwingithub we are having a similar issue. How did you override $browser.url()?

[czerwingithub]

I just used a decorator on the $browser service and overrode the url method. It does depend a little on the implementation details of $browser, but I know this works for 1.1.5, and for the limited use case we have. Luckily, the watch functions for the $location service invoke $browser.url(), so search param lookups through $location work. Just a note though, the mockBrowser service is implemented slightly differently, so this fix won't work for it.. which means you can't end up testing this fix in unit tests.. just real production usage.

Here's the sample code. I don't know if this exact code compiles/works since I had to cut and paste it from several different files to give you one coherent view of it.. but it should be enough to at least give you the idea.

Oh, to use it, you just have to be sure to load the '$browserFixer' module in your app.

angular.module('$browserFixer', [])
.config(['$provide', function($provide) {
// We use a decorator to agument the behavior of the default $browser
// service. This is guaranteed to be called before anyone uses
// $browser which is great.
$provide.decorator('$browser',
[$delegate', function ($browser) {
// Copy the old url method to superUrl.
$browser.superUrl = $browser.url;

// Our new url method which does the conversion.
$browser.url = function fixedUrl() {
  // We do not do anything when used as a setter.  In this
  // case, the returned value is the $browser object itself.
  if (arguments.length > 0)
    return this.superUrl.apply(this, arguments);
  // Just convert on the way out.  We do not convert the value
  // before we invoke url() as a setter since that could cause
  // other problems.
  return convertQueryPlusSigns(this.superUrl());
};

return $browser;

function convertQueryPlusSigns(originalUrl) {
// Grab the query portion of the URL and do the rewrite.
var questionMark = originalUrl.indexOf('?');

if (questionMark < 0)
  return originalUrl;

// Split the string up into three components.  Base
// which is everything up to the first questionMark,
// query which is from questionMark to the pound sign,
// and then tail which is pound sign to the end.
var base = originalUrl.substring(0, questionMark);
var query = originalUrl.substring(questionMark);

if (query.indexOf('+') < 0)
  return originalUrl;

var tail = '';
var pound = originalUrl.indexOf('#');
if (pound > questionMark) {
  query = originalUrl.substring(questionMark, pound);
  tail = originalUrl.substring(pound);
}

query = query.replace(/\+/g,"%20");
return base + query + tail;
}

}]);
}]);

[BrainBacon]

Thanks @czerwingithub I modified the fix a bit and made it vastly simpler. Seems to work for my purposes since I don't anticipate a + anywhere else besides the search section.

    $provide.decorator('$browser', function($delegate) {
        var superUrl = $delegate.url;
        $delegate.url = function(url, replace) {
            if(url !== undefined) {
                return superUrl(url.replace(/\%20/g,"+"), replace);
            } else {
                return superUrl().replace(/\+/g,"%20");
            }
        }
        return $delegate;
    });

[czerwingithub]

Glad it helped. Yup, that works as well. This is part of our generic URL
handling libraries, so we try to follow spec as much as possible.

On Thu, Aug 8, 2013 at 3:34 PM, Brian Jesse notifications@github.comwrote:

Thanks @czerwingithub https://github.com/czerwingithub I modified the
fix a bit and made it vastly simpler. Seems to work for my purposes since I
don't anticipate a + anywhere else besides the search section.

$provide.decorator('$browser', function($delegate) {
    var superUrl = $delegate.url;
    $delegate.url = function(url, replace) {
        if(url !== undefined) {
            return superUrl(url.replace(/\%20/g,"+"), replace);
        } else {
            return superUrl().replace(/\+/g,"%20");
        }
    }
    return $delegate;
});

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/3042#issuecomment-22363310
.

[jrabbe]

Just FYI, you may need to use the array notation to prevent unknown provider exception after minification. That is:

    $provide.decorator('$browser', ['$delegate', function($delegate) {
        var superUrl = $delegate.url;
        $delegate.url = function(url, replace) {
            if(url !== undefined) {
                return superUrl(url.replace(/\%20/g,"+"), replace);
            } else {
                return superUrl().replace(/\+/g,"%20");
            }
        }
        return $delegate;
    }]);

[mjj1409]

Has anyone noticed that $routeChangeStart/$routeChangeSuccess events are fired twice in these situations, one time for the original query string containing the '+' and then again when it is converted to '%2B'? The net effect is that the associated controllers are also instantiated twice. This is happening for me in 1.2.10.

[Furizaa]

In addition to @BrainBacon fix I also use the following snippet to fix links that have an "+" encoded whitespace in the href:

  $provide.decorator('$location', function($delegate) {
    var superRewrite = $delegate.$$rewrite;
    $delegate.$$rewrite = function(url) {
      return superRewrite(url.replace(/\+/g, '%20'));
    };
    return $delegate;
  });

Don't forget to use the array syntax if you need minification.

[bpossolo]

any idea why this issue hasn't been addressed in 11 months? seems like it affects everyone and is an easy fix

[gkop]

+1. For what it's worth I am getting around this by using commas instead of pluses.

[arkarkark]

also +1

[honzajde]

+1

[altmind]

+1

[kirka121]

are you typing +1's just to increase your comment count?

[altmind]

its ok as long as github dont have any other means to vote vor an issue. google code had stars, jira had votes, github has nothing for that.