How important is the use of esc_html and when should it be used?-CodePudding

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  for="file"><?php esc_html_e( 'Upload Image', 'woocommerce' ); ?></label>

and this

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

CodePudding user response：

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 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.