php - HTML escaping data with ajax requests

admin管理员组

文章数量:1318331

I follow the WP philosophy of late escaping, but I'm not sure when to escape HTML special characters when working with ajax requests.

Note, as of my understanding, when setting data to an element with the jQuery .text() method, or using createTextNode()` method, it automatically escapes text content. So this question doesn't apply to using those methods.

When setting text content to an element with innerHTML property or jQuery .html() method after an ajax request, is it better to escape the text content with js, or is it better to escape the text content on the server side with esc_html()?

Here are two examples, I'm not sure what the best one is:

Escapaing server side before sending to client:

// PHP

// Final stage of processing the ajax request (server side).
echo esc_html($text);
die();


//JS (jQuery)

// Final stage of a JS ajax request
success: function(response) {
    $('.example').html('<div class="example">' + response + '</div>'); // The response is already escaped
}

Or Escaping with JS after the ajax request was successful:

// PHP

// Final stage of processing the ajax request (server side).
echo $text;
die();


//JS (jQuery)

/**
 * Example of my js html escape function
 */
function escapeHtml(unsafe) {
    return unsafe
         .replace(/&/g, "&")
         .replace(/</g, "&lt;")
         .replace(/>/g, "&gt;")
         .replace(/"/g, "&quot;")
         .replace(/'/g, "&#039;");
 }

//Final stage of a JS ajax request
success: function(response) {

    // Escape the untrusted data
    $('.example').html('<div class="example">' + escapeHtml(response) + '</div>'); // The response needs to be escaped
}

Any help appreciated.

I follow the WP philosophy of late escaping, but I'm not sure when to escape HTML special characters when working with ajax requests.

Note, as of my understanding, when setting data to an element with the jQuery .text() method, or using createTextNode()` method, it automatically escapes text content. So this question doesn't apply to using those methods.

When setting text content to an element with innerHTML property or jQuery .html() method after an ajax request, is it better to escape the text content with js, or is it better to escape the text content on the server side with esc_html()?

Here are two examples, I'm not sure what the best one is:

Escapaing server side before sending to client:

// PHP

// Final stage of processing the ajax request (server side).
echo esc_html($text);
die();


//JS (jQuery)

// Final stage of a JS ajax request
success: function(response) {
    $('.example').html('<div class="example">' + response + '</div>'); // The response is already escaped
}

Or Escaping with JS after the ajax request was successful:

// PHP

// Final stage of processing the ajax request (server side).
echo $text;
die();


//JS (jQuery)

/**
 * Example of my js html escape function
 */
function escapeHtml(unsafe) {
    return unsafe
         .replace(/&/g, "&")
         .replace(/</g, "&lt;")
         .replace(/>/g, "&gt;")
         .replace(/"/g, "&quot;")
         .replace(/'/g, "&#039;");
 }

//Final stage of a JS ajax request
success: function(response) {

    // Escape the untrusted data
    $('.example').html('<div class="example">' + escapeHtml(response) + '</div>'); // The response needs to be escaped
}

Any help appreciated.

• php
• ajax
• javascript
• html
• escaping

Share Improve this question edited Sep 23, 2017 at 10:49 user3438958 asked Sep 22, 2017 at 17:52 user3438958user3438958 44911 gold badge77 silver badges1616 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

If it is not HTML, it does not need HTML escaping, if it is not JS, it does not need JS escaping.

All escaping is context based. In general You should probably just avoid sending "text" in response and focus on sending data which is "converted" into whatever is the relevant DOM structures, either directly via DOM APIs or the roundabout ways jQuery offers. (in other words, your ajax response should be aimed at machines, and let the end machine to transform it to something which is readable by humans).

Still there are cases in which is more convenient to add full blown HTML texts to the response. If you go in that direction, the escaping should be relevant to how you are going to handle it on the browser side. jQuery's html() expects a valid HTML therefore you will have to escape the textual parts of the HTML that you generate. DOM APIs might be more tolerant as depending on context they "know" what is an HTML tag and what is a text.

In any case I can't think of any example in which you will have to do escaping on browser side. If you get yourself into such situation, you probably use the wrong DOM/jQuery APIs.

Commenting directly on your samples. The first one is wrong because if the text contains HTML tags, you will be escaping too much.

本文标签： phpHTML escaping data with ajax requests