PHP AJAX call to MySQL database. How to properly escape HTML data returned (json_encode) to page?

Question

My database contains records with included HTML scripting tags. I have read many different options on how to handle this scenario while also using json_encode/AJAX.

Should I use a JS function to escape special characters client side or might there be a PHP solution I'm missing?

Edit Assumption: The user does not want to strip/remove the html tags, just wants a way or a suggestion in to encoding them either on the server or client side!

PHP (process.php):

 $records = array();

 if($results = $db->query("SELECT * FROM cust_tbl")) {
     if($results->num_rows) {
         while($row = $results->fetch_object()) {
             $records[] = $row;
         }

         echo json_encode($records);

         $results->free();
     }

 }

AJAX:

function show() {
    clear();
    $.ajax({
        type: "POST",
        dataType: "json",
        url: "process.php",
        data: "action=show",
        success: function(data) {
            $.each(data, function(index, data) {
                $('#tablebody').append('<tr>');
                $('#tablebody').append('<td>' + data.JL_JOB_DATE + '</td>');
                $('#tablebody').append('<td>' + data.JL_YR + '</td>');
                $('#tablebody').append('</tr>');
            });
        }
    });
}

Answer 1

If you are looking to encode HTML to be sent: you can use htmlentities()

If you are looking to remove the html tags and just leave the text: use strip_tags()

UPDATE:

I noticed in your $.each you have 2 arguments you are using data for. In a $.each what i typically do is this:

$.each(data, function() {
    //use data.<column name>
});

Unless you really need the index of your data i suggest leaving it out for readability. Documentation on $.each can be found here .

Also, try doing your full append all at once.

$.each(data, function() {
    $('#tablebody').append( '' +
                            '<tr>' +
                                '<td>' + data.<column name> + '</td>' +
                                '<td>' + data.<column name> + '</td>' +
                            '</tr>' +
                            '');
});

Doing it your way basically creates a new row then adds table datas to the end of the table instead of specifically in the tr you want it in.

Answer 2

use php strip_tags($records);
http://www.w3schools.com/Php/func_string_strip_tags.asp

Answer 3

Use underscore.js

escape_.escape(string) 
Escapes a string for insertion into HTML, replacing &, <, >, ", and ' characters.

_.escape('Curly, Larry & Moe');
=> "Curly, Larry &amp; Moe"

Added function to my code:

$.each(data, function(index, data) {
            $('#tablebody').append('<tr>');
            $('#tablebody').append('<td>' + escape(data.JL_JOB_DATE) + '</td>');
            $('#tablebody').append('<td>' + escape(data.JL_YR) + '</td>');
            $('#tablebody').append('</tr>');
        });