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