jQuery & PHP: Encode & Decode URL

Question

I am passing a string through a URL to another page whenever a link is clicked.

The original a tag and its href are created via a PHP while loop as follows:

<a href=".($row['secondary'] == 'true' ? "secondary_imgs.php?imgId=".$row['imgId']."
    &imgTitle=".$row['imgTitle']."" : "new_arrivals_img/".$row['imgURL']."").">

Note: The a tag does contain other attributes but I removed them for simplicity.

The href is then appended, with the current window dimensions, using the following jQuery function:

$("a[href^='secondary_imgs.php']").click(function(){
    var pageWidth = $(window).width();
    var pageHeight = $(window).height();
    var url = $(this).attr('href');
    var idx = url.indexOf('&pageWidth=');
    if (idx != -1) {
        url = url.substr(0, idx);
    }
    url += '&pageWidth=' + pageWidth + '&pageHeight=' + pageHeight;
    $(this).attr('href', url);
});

My question is, what method(s) of encoding the URL should I use in this case, seeing as it will need to be done with first PHP, then jQuery/JavaScript, and finally decoded via PHP? Or will it need to be done in both PHP and jQuery/JavaScript? The original PHP $row['imgTitle'] will always have at least spaces in it, and so I know it needs to be done then for sure. But seeing as the appended values will always be a variable equalling a number, does that need to be encoded as well?

I know there are several methods of encoding/decoding URLs in each coding language, and my knowledge isn't adequate enough to make the choice.

If someone could also provide an example of how I would perform each step, it would be much appreciated.

Solution 1

You should use urlencode() in PHP to encode URI components.

The equivalent function in javascript is encodeURIComponent().

PHP will decode parameters encoded like this automatically.

So, in you PHP:

'<a href="..&imgTitle='.urlencode($row['imgTitle'])

And equivalently, in your javascript:

'&someparam=' + encodeURIComponent(someValue)

Solution 2

Why would it need to be done first with PHP? This JS urlencode function is able to be urldecoded from PHP. Encode once, decode once:

function urlencode (str) {
    // URL-encodes string  
    // 
    // version: 1107.2516
    // discuss at: http://phpjs.org/functions/urlencode
    // +   original by: Philip Peterson
    // +   improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
    // +      input by: AJ
    // +   improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
    // +   improved by: Brett Zamir (http://brett-zamir.me)
    // +   bugfixed by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
    // +      input by: travc
    // +      input by: Brett Zamir (http://brett-zamir.me)
    // +   bugfixed by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
    // +   improved by: Lars Fischer
    // +      input by: Ratheous
    // +      reimplemented by: Brett Zamir (http://brett-zamir.me)
    // +   bugfixed by: Joris
    // +      reimplemented by: Brett Zamir (http://brett-zamir.me)
    // %          note 1: This reflects PHP 5.3/6.0+ behavior
    // %        note 2: Please be aware that this function expects to encode into UTF-8 encoded strings, as found on
    // %        note 2: pages served as UTF-8
    // *     example 1: urlencode('Kevin van Zonneveld!');
    // *     returns 1: 'Kevin+van+Zonneveld%21'
    // *     example 2: urlencode('http://kevin.vanzonneveld.net/');
    // *     returns 2: 'http%3A%2F%2Fkevin.vanzonneveld.net%2F'
    // *     example 3: urlencode('http://www.google.nl/search?q=php.js&ie=utf-8&oe=utf-8&aq=t&rls=com.ubuntu:en-US:unofficial&client=firefox-a');
    // *     returns 3: 'http%3A%2F%2Fwww.google.nl%2Fsearch%3Fq%3Dphp.js%26ie%3Dutf-8%26oe%3Dutf-8%26aq%3Dt%26rls%3Dcom.ubuntu%3Aen-US%3Aunofficial%26client%3Dfirefox-a'
    str = (str + '').toString();

    // Tilde should be allowed unescaped in future versions of PHP (as reflected below), but if you want to reflect current
    // PHP behavior, you would need to add ".replace(/~/g, '%7E');" to the following.
    return encodeURIComponent(str).replace(/!/g, '%21').replace(/'/g, '%27').replace(/\(/g, '%28').
    replace(/\)/g, '%29').replace(/\*/g, '%2A').replace(/%20/g, '+');
}

Comments

[stefmikhail]

It needs to be done first with PHP as the $row['imgTitle'] will be placed directly in the href on page load, and the href won't recognize the spaces in the string. Thus only the first word will be entered in the href, and thus, the URL.

[stefmikhail]

Thanks for the answer. I will test it out. Curious what you think of the other persons answer above? It got votes, but he hasn't commented on my comment about his answer. He asked why I need it to be done in PHP. Take a look at my comment and tell me what you think.

[stefmikhail]

If you could briefly let me know what I should use urlencode as opposed to rawurlencode?

[stefmikhail]

Just to let you know, I used rawurlencode() for the PHP, and encodeURIComponent() for the javascript. From what I read in the documentation, this seemed to be the best approach. Again, if you feel I should have used something different, please do let me know. And I still don't know what AlienWebguy was getting at with his example.