What’s the difference between esc_html, esc_attr, esc_html_e, and so on?

Question

I got feedback from security guy and he pointed out that I should use proper escaping of user input in my code. So I've done some research and found escaping functions.

What’s the difference between them? When should I use esc_html() and when esc_attr()? And when should I use these functions with _e() at the end?

Answer 1

esc_html() escapes a string so that it is not parsed as HTML. Characters like < are converted to <, for example. This will look the same to the reader, but it means that if the value being output is <script> then it won't be interpreted by the browser as an actual script tag.

Use this function whenever the value being output should not contain HTML.

esc_attr() escapes a string so that it's safe to use in an HTML attribute, like class="" for example. This prevents a value from breaking out of the HTML attribute. For example, if the value is "><script>alert();</script> and you tried to output it in an HTML attribute it would close the current HTML tag and open a script tag. This is unsafe. By escaping the value it won't be able to close the HTML attribute and tag and output unsafe HTML.

Use this function when outputting a value inside an HTML attribute.

esc_url() escapes a string to make sure that it's a valid URL.

Use this function when outputting a value inside an href="" or src="" attribute.

esc_textarea() escapes a value so that it's safe to use in a <textarea> element. By escaping a value with this function it prevents a value being output inside a <textarea< from closing the <textarea> element and outputting its own HTML.

Use this function when outputting a value inside a <textarea> element.

esc_html() and esc_attr() also have versions ending in __(), _e() and _x(). These are for outputting translatable strings.

WordPress has functions, __(), _e() and _x(), for outputting text that can be translated. __() returns a translatable string, _e() echoes a translatable string, and _x() returns a translatable string with a given context. You've probably seen them before.

Since you can't necessarily trust a translation file to contain safe values, using these functions when outputting a translatable string ensures that the strings being output can't cause the same issue described above.

Use these functions when outputting translatable strings.

Answer 2

esc_html would be used inside of html for example between a <p> tag

<p><?php echo esc_html( $some_variable ); ?></p>

esc_attr would be used for escaping attribute values on html tags like so:

<p my-attribute="<?php echo esc_attr( $some_variable ); ?>"></p>

applying _e to the end is for using it with text domains and will automatically echo it for you e.g:

<p><?php esc_html_e( 'some-text', 'text-domain' ); ?></p>

<p my-attribute="<?php esc_attr_e( 'some-text', 'text-domain' ); ?>"></p>

in addition to _e there is also __ which does the same as _e but doesnt echo it so you can store it in a variable.