Sanitizing input with PHP and JavaScript

PHP

In PHP, there are a variety of ways in which you can sanitize the user input, depending on your needs. The htmlspecialchars function allows you to transform every special character in HTML into text so that the user cannot enter code in his input. It is good to use the function when you want to show a user input, stored or coming from GET parameters, on a page as it can be the only barrier between you and CSRF attacks. You can use htmlentities to convert all characters that have an equivalent as a HTML entity into the appropriate entity, not only the special characters used in code. For example:echo htmlentities(“©”); would output ©.

You can use the strip_tags function to remove all HTML tags from a string such as one coming from user input. This would essentially render it invulnerable to CSRF or embedding JavaScript or PHP logic in your application. However, as a second argument you may specify tags that are allowed. Be careful with allowing tags as users can add arbitrary attributes to those tags which can be malicious and harmful for your application.

If you wish to do the opposite, convert special HTML characters that are converted to entities back into normal HTML characters, you can use the html_entity_decode function.

With PHP, you would most likely be doing interactions with a database and have to sanitize any inputs passed to the interaction with the database; especially if it is a database using the SQL. For that purpose, you can use PDO and prepared statements. Prepared statements allow  you to add the inputs separately from the query itself, as parameters which would be utterly escaped in case the user wants to do dark things. The links above allow you to see how to start using PDO and prepared statements in your code today.

JavaScript

In JavaScript, you can perform simple sanitation of inputs by globally replacing the important HTML characters such as the less-than sign (<) and the greater-than sign (>) with their HTML entity equivalent manually. Here is a useful function that will get the job done:

function escapeHTML (unsafe_str) {
    return unsafe_str
      .replace(/&/g, '&')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/\"/g, '&quot;')
      .replace(/\'/g, '&#39;'); // '&apos;' is not valid HTML 4
}

You can just display the user’s input on the page in a manner resembling the following:

$(“#msg”).html(escapeHTML($(“input”).val()));

// assuming we want to display the sanitized input in a container identified as msg.

References:

http://shebang.brandonmintern.com/foolproof-html-escaping-in-javascript/