Defending Against Single Quote Attacks in Google Maps

Peter Rukavina

Once you start playing with the Google Maps API, making your own maps using various bits of JavaScript, you’ll eventually come under attack from single quotes.

Look at this code, for example, which is a mixture of Javascript and PHP:

var point = new GPoint(<? echo $longitude . "," . $latitude; ?>);
var marker = createMarker(point, '<? echo $html; ?>');
map.addOverlay(marker);

The role of this snippet is to add a marker to the map at the given longitude and latitude, with the given HTML appearing when the marker is clicked.

So you stick this JavaScript inside a loop that grabs the appropriate values from a database, and sticks a bunch of markers on the map. Things go horribly wrong, however, when you try and create a marker for St. Dunstan’s Basilica, and you can’t figure out why. Here’s what’s happening:

var point = new GPoint(-63.12516,46.23367);
var marker = createMarker(point, 'St. Dunstan's Basilica');
map.addOverlay(marker);

I’ve highlighted the problematic area. And the problem is this: your browser’s JavaScript interpreter is getting confused by the single quote (aka “apostrophe”) in the string St. Dunstan’s Basilica — it thinks that single quote is the end of the string. And if you look in your Javascript console (Tools \| JavaScript Console in Firefox), you’ll see an error like:

Error: missing ) after argument list

How to solve this problem? Simply escape all of your single quotes in your HTML, using PHP, before you insert the HTML into the JavaScript. So:

var point = new GPoint(<? echo $longitude . "," . $latitude; ?>);
var marker = createMarker(point,
                '<? echo str_replace("'","\\'",$html); ?>');
map.addOverlay(marker);

The change has the effect of converting all of the single quotes into escaped single quotes (\'). Note that you use \\' in your str_replace because the backslash is also an escape character in PHP, so you need to “escape your backslash” in PHP too.

The resulting JavaScript will now look like:

var point = new GPoint(-63.12516,46.23367);
var marker = createMarker(point, 'St. Dunstan\'s Basilica');
map.addOverlay(marker);

And it will no longer cause problems.

Comments

Submitted by Jeff on

Permalink

thanks a million! this makes perfect sense.. I was trying to do this.. but somehow forgot to escape the backslash in PHP as well.

Submitted by Chris on

Permalink

I have a clients site on Google Maps that displays the single quote as &#39 - anyone know how to get rid of it? I have taken the quote off of the display over 6 weeks ago, and it still hasnt changed??

Submitted by croakingtoad on

Permalink

Thank you so much for this tip. That crazy apostrophe was causing me tons of headaches and I knew that was the problem but just didn’t know how to get rid of it.

Thanks for the help!!

Add new comment

Plain text

  • Allowed HTML tags: <b> <i> <em> <strong> <blockquote> <code> <ul> <ol> <li>
  • Lines and paragraphs break automatically.

About This Blog

Photo of Peter RukavinaI am . I am a writer, letterpress printer, and a curious person.

To learn more about me, read my /nowlook at my bio, read presentations and speeches I’ve written, or get in touch (peter@rukavina.net is the quickest way). You can subscribe to an RSS feed of posts, an RSS feed of comments, or receive a daily digests of posts by email.

Search