Data escaping (output) in Wordpress - Step-by-Step Execution

Concept Flow - Data escaping (output)

Get raw data

↓

Choose escaping function

↓

Apply escaping

↓

Output safe data

↓

Browser renders escaped output

Data escaping in WordPress means taking raw data and making it safe before showing it on the page by applying the right escaping function.

Execution Sample

Wordpress

<?php
$user_input = '<script>alert(1)</script>';
echo esc_html($user_input);
?>

This code takes user input with HTML tags and safely outputs it by escaping HTML characters.

Execution Table

Step	Action	Input Data	Escaping Function	Output Data
1	Receive raw data	<script>alert(1)</script>	None	<script>alert(1)</script>
2	Apply esc_html()	<script>alert(1)</script>	esc_html()	&lt;script&gt;alert(1)&lt;/script&gt;
3	Output escaped data	&lt;script&gt;alert(1)&lt;/script&gt;	None	&lt;script&gt;alert(1)&lt;/script&gt;

💡 Data is escaped and safe for HTML output, preventing script execution.

Variable Tracker

Variable	Start	After esc_html()	Final Output
user_input	'<script>alert(1)</script>'	'&lt;script&gt;alert(1)&lt;/script&gt;'	'&lt;script&gt;alert(1)&lt;/script&gt;'

Key Moments - 2 Insights

Why do we use esc_html() instead of echoing raw data?

Because raw data may contain harmful HTML or scripts. esc_html() converts special characters to safe codes, as shown in step 2 of the execution table.

What happens if we forget to escape data before output?

The raw data may run scripts or break HTML, causing security risks or display errors, as seen in step 1 where raw data is unsafe.

Visual Quiz - 3 Questions

Look at the execution table, what is the output data after applying esc_html()?

A <script>alert(1)</script>

B &lt;script&gt;alert(1)&lt;/script&gt;

C alert(1)

D &amp;lt;script&amp;gt;alert(1)&amp;lt;/script&amp;gt;

💡 Hint

Check the Output Data column at Step 2 in the execution table.

At which step is the data still unsafe to output?

A Step 1

B Step 2

C Step 3

D None

💡 Hint

Look at the Action and Output Data columns in the execution table.

If we used esc_attr() instead of esc_html(), what would change in the output?

A Output would be the same as esc_html()

B Output would be raw and unsafe

C HTML tags would be escaped for attribute context

D Output would be plain text without any escaping

💡 Hint

esc_attr() escapes for HTML attributes, different from esc_html() which escapes for HTML body content.

Concept Snapshot

Data escaping in WordPress:
- Use esc_html() to safely output data inside HTML.
- Converts special characters like < > to &lt; &gt;.
- Prevents scripts from running in the browser.
- Always escape before output to avoid security risks.

Full Transcript

Data escaping in WordPress means making raw data safe before showing it on a webpage. For example, if user input contains HTML tags or scripts, we use functions like esc_html() to convert special characters into safe codes. This stops harmful scripts from running and keeps the page safe. The process starts by getting raw data, then choosing the right escaping function, applying it, and finally outputting the safe data. If we skip escaping, the raw data might run scripts or break the page. Using esc_html() changes <script> tags into &lt;script&gt; so the browser shows them as text, not code. This is important for security and proper display.