Coding URL Components with Ampersand &

Question

Here is a very simple question:

I have a program in which someone enters an M&S in a form and launches a request. I understand that & is a reserved character and therefore needs to be encoded. The problem is that in some contexts, encoding is required twice.

If the URL is used in the onClick javascript onClick , the normal URL encoding seems to work fine (here the operator can click the column heading to sort):

 <td onClick="AJAX_Get('http://10.0.0.195/program.exe?Qry147=M%26S&sortmethod1=161')"> 

However, if the URL is used in the anchor (although the anchor actually uses AJAX), it seems to need to be encoded twice:

 <a href="javascript:AJAX_Get('http://10.0.0.195/program.exe?Qry147=M%2526S&sortmethod1=147')" title='Refresh'>Refresh</a> 

Both of the above examples work fine. However, these are test cases created manually. Unfortunately, in the application, when I actually create the URL, I do not know how it will be used.

If I encode the URL parameter once ( M%26S ), it works fine in onClick . But, using this method in binding, the server sees the URL as ...Qry147=M&S&sortmethod1=147... - so it had to be unencrypted before it was returned to the server.

If I encode it twice ( M%2526S ), the anchor works, but for onClick server sees ...Qry147=M%2526S...

I feel that something is missing here. Is there a way to make this work the same in both cases?

Answer 1

If you build all the HTML text with simple steps, some of these problems will go away. Therefore, taking your example, you want to encode the following query parameter:

 M&S 

When you insert this string as a request parameter in the URL, you must specify it as you already know. String with urlencoded M%26S . Then the full URL is as follows:

 http://10.0.0.195/program.exe?Qry147=M%26S&sortmethod1=147 

Now this URL is embedded in the JavaScript code, in which case you only need single quotes from both ends:

 'http://10.0.0.195/program.exe?Qry147=M%26S&sortmethod1=147' 

All JavaScript code is as follows:

 AJAX_Get('http://10.0.0.195/program.exe?Qry147=M%2526S&sortmethod1=147') 

Now all this text is used in the context of HTML, which is interpreted as a URL, so you need urlencode again:

 AJAX_Get('http://10.0.0.195/program.exe?Qry147=M%2526S&sortmethod1=147') 

And finally, since you embed this text in HTML, you need htmlescape of it:

 AJAX_Get('http://10.0.0.195/program.exe?Qry147=M%2526S&sortmethod1=147') 

This is why you end:

 <a href="javascript:AJAX_Get('http://10.0.0.195/program.exe?Qry147=M%2526S&amp;sortmethod1=147')" title='Refresh'>Refresh</a> 

I usually avoid these coding issues by not putting the M&S directly in the onclick event or anchor. In general, you cannot encode the onclick event and binding in the same way, since the decoding process for both is different:

 onclick: html -> js -> url anchor: html -> url -> js -> url 

But wait ... if you write such a helper function, it works:

 function myQuery(q) { var encodedQ = encodeURIComponent(q); // TODO: which character encoding is used here? var url = 'http://10.0.0.195/program.exe?Qry147=' + encodedQ + '&sortmethod1=147'; var response = AJAX_Get(url); // TODO: handle errors } 

Now you can write:

 <a href="javascript:myQuery('M&amp;S')">anchor</a> <a onclick="myQuery('M&amp;S')">event</a> 

This trick works because in the anchor case there is no more % .

Answer 2

I recommend storing the parameter in its unencoded form, and then encode it at the time of its use, whether it be the onClick event or the anchor.

Answer 3

I was given a little hack of the solution from other sources, but it works quite well.

Just replace:

<a href = "javascript: AJAX_Get (...)">

from:

<a href = "javascript: void (0);" OnClick = "AJAX_Get (...)">

The onClick action works the same on anchors and other elements. Obviously, any application bits that wrote their own pieces of HTML may still have a problem, but this is a small change to make this a workaround in the main code, so I am using this route for now.

EDIT: Just noticed my answer here, and realized that this solution caused more problems than the solution. I ended up making time to change it to work correctly (therefore, it correctly uses the evacuation method at the right time.