JavaScript Single/Double Quote Killer

The essential problem with quotes is that they're used with display programming logic (such as with HTML and Javascript) as well as within back end programming (using scripting languages such as PHP, ASP, JSP or even SQL). Because quotes are used to delineate strings, having a string with a quote in it can cause undue problems. Luckily there is an easy solution. Since browsers display HTML ASCII as regular text you can simply transform all your single and double quotes that appear in text for display into their ASCII equivalent. The ASCII code for a single quote is ' and similarly a double quote can be represented in HTML as ". Using these values it is easy to display both single and double quotes in HTML output without interfering with any programmatic use of the quotes. This means that quotes in display text won't interfere with any string delimiting quotes for display. For instance, many times you'll run into the following problem:

<input type="text" name="title" value="The "Finer" Points"/>

As you can see, the quotation marks inside the value attribute are going to wreak havoc with the display since the browser will interpret them as closing the value attribute and so the rest of the string won't actually display within the text box. The following code will, however, display properly:

<input type="text" name="title" value="The &#34;Finer&#34; Points"/>

Even worse is the following problem:

<?php
	$sql = 'insert into comment 
		(comment_body) 
		values ('There wasn't any way to accomplish it.');
	mysql_query($sql);
?>

You can see how the above string is going to destroy the SQL insert query right away. The single quote in the input string will prematurely terminate the SQL statement, resulting in an error (at best). Although there are ways to deal with problematic input on the back end, it is often easier to scrub input on the front end first, insuring that form data is submitted cleanly. Using Javascript for this purpose is lightweight and handy.

This function searches through the values of all the elements in the form named 'theForm' on the page. Call it with

<form name='theForm' onSubmit='return fixit()'...

This will allow the function to run when the form is posted. Include the following Javascript snipit in your document as well:

<script type="text/javascript">
function fixit() {
  var numberOfElements = document.theForm.elements.length;
  for (x=0; x<numberOfElements; x++)  {
  // replace all the single, double quotes:
    var curElement = window.document.theForm.elements[x];
    curElement.value = curElement.value.replace(/\'/g, "&#39;");
    curElement.value = curElement.value.replace(/\"/g, "&#34;");
  }
  return true;
}
</script>

Try it:

Remember, however, that a malicious user could bypass this check simply by disabling Javascript in their browser. As a rule of thumb you should never trust user input. Make sure that your back end code checks for and escapes any quotes that could cause problems!