Pass email in CodeIgniter url with jQuery and php

Here is the problem:

I was working with CodeIgniter and created a search form which passed its search terms via jQuery to the url like http://www.url.com/search/search_terms/, then the php would search the database and bring back the results. So what was the big issue you may think? Well if somebody tried to search for an email 'anybody@email.com' it would bring back the CodeIgniter error.

An Error Was Encountered

The URI you submitted has disallowed characters.

This was caused by the character '@' being in the url (see below), but due to the freedom of input of search forms the url could contain any disallowed characters like $ and &.

http://www.url.com/search/anybody@email.com/

My first thought was to obviously convert each of the disallowed characters to web safe characters via jQuery using:

encodeURIComponent('anybody@email.com');

Which created the following url which worked just fine.

http://www.url.com/search/anybody%40email.com/

But then I tried a mix of possible characters '@£$%^&*?' which caused the error again and brought back the fact that not all characters could be converted.

http://www.url.com/search/%40£%24%25%5E%26*%3F/

My next thought was to do a find and replace using jQuery, but this brought the problem of maybe not listing all the possible characters. So then I thought of tackling it from the CodeIgniters side (php) by changing the settings of the config.php file (see below) and adding the characters there. But the whole reason for having that set in the confiq file is for security... so again it was a no go.

$config['permitted_uri_chars'] = 'a-z 0-9~%.:_\-';

But eventually I found a solution which might seem over the top or long winded to some... or even better yet know a simpler solution (Please leave it as a comment). So here is an example and a break down of my train of thought. Quick note that it uses as extension to jQuery.

1. The html search form.

<form id="usersearchform" method="post" action="">
    <div>
        <input type="text" name="searchterms" id="searchterms" size="20" value="" />
        <input id="submit_search_form" type="submit" value="Search" />
    </div>
</form>

2. The jQuery itself using the extension Base64 encode and decode. The main point of interest is line 12.

2a. $base64 encodes the submitted search terms.

2b. $.trim to trim any blank spaces at the start and end of the search terms.

2c. Replace all instances of '=' with '%'. Because occasionally the base64 encode would create values which contained '=' which again CodeIgniters url wouldn't allow. Why use %? Mainly 2 reasons - base64 doesn't use the character when encoding and CodeIgniter accepts it in urls.

<script src="http://www.url.com/js/jquery.min.js" type="text/javascript"></script>
<script src="http://www.url.com/js/jquery.base64.min.js" type="text/javascript"></script>

<script type="text/javascript">
(function($) {
    $(document).ready(function() {

    $('#submit_search_form').click(function()
    {

    $.base64.is_unicode = false;
    var search_terms = $.base64.encode($.trim($('#searchterms').val())).replace(/=/g,'%');

        if(search_terms != '')
        {           
            window.location.href = 'http://www.url.com/search/' + search_terms + '/';       
            return false;
        }
        return false;
        });

    });

})(jQuery);
</script>

3. Now the server side of the CodeIgniter php which more or less does what jQuery did, but backwards.

3a. str_replace will replace and find all instances of '%' with '='.

3b. base64_decode does exactly that and decodes the value back to its original value.

3c. htmlentities converts any characters to web safe characters. Mainly to stop any database Query issues especially if doing a wildcard search.

// base64 decode value //
$database_search_values = htmlentities(base64_decode(str_replace('%','',$_POST['searchterms])));

Over the top mainly just to get around any possible weird characters but it works.

So for search example anybody@email.com it outputs http://www.url.com/search/YW55Ym9keUBlbWFpbC5jb20%/.