In some cases you might want to do encoding of URL-parameters directly inside javascript, simply because you think it’s best to do it there or because you have no other options of getting the parameters encoded. But as I discovered when trying to do this myself, doing this in javascript is not like a walk in the park, or at least there are some important “black holes” you should be aware of.
In my example I use JSF, and I have a h:dataTable component which I build up programmatically in java. For each row I have a link that will open a new popup window that points to another page (jsp) passing some parameters. I needed to do javascript-encoding of parameters, because when I build my table I use expression language (EL – #{} ) and valueBindings (for those of you that are familiar with it). If you use expressions you don’t hold the value itself, but the expression will be “decoded” run-time when the page is rendered.
To show an example, I have a Java-class that has a hashmap called properties, an ordinary key-value thing. By using a get-method that returns the whole map it’s possible through EL to give an “input-parameter” on which property to get. My get-method:
public Map<String, Object> getProperties()
{
return properties;
}
this would be the expression to get the url:
String url = "#{row.properties['"+SOME_KEY_THAT_POINTS_TO_OBJECT_WITH_URL+"']}";
And then I would create my link in java with value-binding like this:
HtmlOutputLink htmlOutputLink = new HtmlOutputLink();
ValueBinding vb = FacesContext.getCurrentInstance().getApplication().createValueBinding(
"popupWindow('"+ url +"','MY_POPUP_WINDOW', WIDTH,HEIGHT); return false;");
htmlOutputLink.setValueBinding("onclick",vb);
The “normal” way of doing encoding java-side would be something like this:
public String urlEncode(String urlToEncode)
{
String encodedUrl = "";
if(urlToEncode != null)
{
try
{
encodedUrl = URLEncoder.encode(urlToEncode,"UTF-8");
}
catch (Exception e)
{
log.error("Encode exception when encoding url: " + urlToEncode,e);
return urlToEncode; //Return unencodedUrl
}
return encodedUrl;
}
}
But in my case, if I were to encode the url before passing it to the javascript, what I would encode would actually be my expression, not the value of it. The result of this encoding would be something like;
%23%7Brow.properties%5B%27SOME_KEY_THAT_POINTS_TO_OBJECT_WITH_URL%27%5D%7D.
Thus, I was in the need of doing the encoding after the page has been rendered, and then I needed to do it inside the javascript.
I tried two different approaches for encoding the url, the first one which I expected would work, and the second one which I had to do to make it work. What you need to be aware of is that default encoding in javascript is the UTF-8 format, so if you try to decode “on the other side” you have to use UTF-8 in your decoder. I’ve also seen some examples around saying that the escape()-function does some sort of encoding, but this one just escapes (replaces) special characters, for example it converts white-spaces to %20%. Trying to use escape() on the URL and then decoding it with an URL-decoder would fail! Still, I found the need of using the escape()-function as well, and will explain this as I go.
The first function I tried uses the encodeURI()-function inside javascript directly:
function encodeUrl(url)
{
return encodeURI(url);
}
And from my popupWindow()-function I call the encodeUrl() like this:
var newWindow = '';
function popupWindow(url, name, width, height)
{
name = name.replace(/\/|\-|\./gi, "");
var whitespace = new RegExp("\\s","g");
name = name.replace(whitespace,"");
if (!newWindow.closed && newWindow.location)
{
newWindow.location.href = encodeUrl(url);
}
else
{
newWindow = window.open(encodeUrl(url),name, "location=no, scrollbars=yes, resizable=yes, toolbar=no, menubar=no, width=" + width + ", height=" + height );
if (!newWindow.opener)
newWindow.opener = self;
}
if (window.focus)
{
newWindow.focus()
}
}
But doing it like this the decoding seemed to fail, as I couldn’t get the proper value from the url on the receiving side (decodedValue != encodedValue). Having struggled with this one for some time, I discovered that the window.open()-function actually tries to do some sort of decoding of the url itself before it passes it on. So I created another method that encodes on parameter level, and which also uses the escape-method to “protect” the encoded parameters from the window.open()-function.
function encodeUrl(url)
{
if (url.indexOf("?")>0)
{
encodedParams = "?";
parts = url.split("?");
params = parts[1].split("&");
for(i = 0; i < params.length; i++)
{
if (i > 0)
{
encodedParams += "&";
}
if (params[i].indexOf("=")>0) //Avoid null values
{
p = params[i].split("=");
encodedParams += (p[0] + "=" + escape(encodeURI(p[1])));
}
else
{
encodedParams += params[i];
}
}
url = parts[0] + encodedParams;
}
return url;
}
One thing to mention in this function is that is uses the encodeURI()-function. This one doesn’t do anything with the reserved characters like ; , / ? : @ & = + $. If you for some reason need to encode these as well, you should use the encodeURIComponent()-function.I tried to do this function without the use of escape(), but then the parameters “arrived” wrongly encoded, and became “corrupted” after I decoded them. Wrapping the encodeURI() inside an escape() solved this problem:
encodedParams += (p[0] + "=" + escape(encodeURI(p[1])));
Finally, inside my receiving page, I managed to decode the parameters and get the values I actually submitted with a java decoding method like this:
public String urlDecode(String urlToDecode)
{
String decodedUrl = "";
if(urlToDecode != null)
{
try
{
decodedUrl = URLDecoder.decode(urlToDecode,"UTF-8");
}
catch (Exception e)
{
log.error("INVALID URL: " + urlToDecode,e);
return "";
}
}
return decodedUrl;
}
This way of doing it also works for special characters belonging to the ISO-8859-1 encoding, even if the encoding used is actually UTF-8. As a small reference I can list the proper UTF-8 encoding for the Scandinavian specific characters if you use those, in this way you should be able to check whether your URL is encoded correctly or not if you print it out before decoding it.
- æ = %E6
- ø = %F8
- å = %E5
- Æ = %C6
- Ø = %D8
- Å = %C5
You can also check out this page for a complete reference of encoded characters: http://www.w3schools.com/tags/ref_urlencode.asp
If you want to try an example of how encodeURI and encodeURIComponent works, copy and paste the following javascript and test with your own strings:
<script type="text/javascript">
var unencodedText = "This is my text that contains whitespaces and characters like # and Ø";
var encodedText = "";
var decodedText = "";
alert('unencodedText: ' + unencodedText);
//To encode whitespaces and the 'Ø' character - use encodeURI
encodedText = encodeURI(unencodedText);
//We see that whitespaces and 'Ø' are encoded, but the '#' is still there:
alert('encodedText: ' + encodedText);
//If we decode it we should get our unencodedText back
decodedText = decodeURI(encodedText);
alert('decodedText: ' + decodedText);
//To also encode the '#' we use the encodeURIComponent
encodedText = encodeURIComponent(unencodedText);
//Now all the characters have been encoded:
alert('encodedText: ' + encodedText);
//To get our unencodedText back we now need to use the decodeURIComponent
decodedText = decodeURIComponent(encodedText);
alert('decodedText: ' + decodedText);
</script>
I hope that you might find this post useful, and that it might save you from some pain in the a** if you try to use the encoding capabilities of Javascript.
Eivind's Weblog 