[FIXED] How important is the use of esc_html and when should it be used?

Issue

In woocommerce and wordpress I have some templates that use esc_html or esc_attr, but I can't really understand when to use them. I know they are important for safety, but should you use them anyway? Is it a rule that always applied?

For example, if I have a simple form with fields and labels to which I want to give a title, will I necessarily have to use esc_html ?

So I'm wondering if there is a difference between this

<label class="t2" for="file"><?php esc_html_e( 'Upload Image', 'woocommerce' ); ?></label>

and this

<label class="t2" for="file">Upload Image</label>

Solution

You generally escape output to prevent any malicious code from being injected into your pages. And that must happen according to the place where the code is being injected; hence the different escaping functions, like esc_attr(); which escapes variable values for use within HTML attributes, or esc_html(); which escapes them for being used within HTML, and so on.

Just think for example about a chat you've implemented, where Alice can send a message to Bob.

The message Alice sends to Bob is:

<script>console.log('hello');</script>

That message is now stored in your database, and once Bob logs in, you grab the messages Bob received, and for example display them inside a div on his screen. So the resulting output, without proper escaping, would be something like:

<div>
<script>console.log('hello');</script>
</div>

This would execute the script on Bob's Frontend. Of course, a console log is harmless, imagine for example a script that sends a message to all of Bobs contacts, with a content of being a malicious script. This would then further cascade to all of the contacts of Bobs contacts, and so on, like a spreading virus.

Every different context into which content grabbed from a DB or similar should get inserted has its own tweaks, like HTML contexts, HTML attributes, etc.; leading to unwanted malicious code execution in different ways. The different escaping functions are used to avoid these risks for the specific context the data will be used.

So in a hardcoded example like yours:

<label class="t2" for="file">Upload Image</label>

There is no risk with the hardcoded Upload Image per se. But as soon as you're using variables, as in:

esc_html_e( 'Upload Image', 'woocommerce' );

you must escape the output, always, according to the context the variable is being used, for the reasons explained above.

esc_html_e( 'Upload Image', 'woocommerce' ); grabs a translation of the string Upload Image from the text domain woocommerce. Just imagine if the value it would grab from that would be malicious code. That's when escaping saves a lot of trouble, and that's why it's done in that way.

Answered By - DevelJoe

Answer Checked By - Mary Flores (PHPFixing Volunteer)