XSS prevention in Wordpress - Step-by-Step Execution

Concept Flow - XSS prevention

User Input Received

↓

Sanitize Input

↓

Store or Process Data

↓

Escape Output Before Display

↓

Safe Content Rendered in Browser

↓

User Sees Clean, Safe Page

This flow shows how WordPress handles user input by sanitizing it first, then escaping output before showing it to users to prevent XSS attacks.

Execution Sample

Wordpress

<?php
$input = $_POST['comment'];
$clean_input = sanitize_text_field($input);
echo esc_html($clean_input);
?>

This code takes user comment input, cleans it to remove harmful code, then safely shows it on the page.

Execution Table

Step	Action	Input/Variable	Result/Output
1	Receive user input	User types: <script>alert('XSS')</script>	<script>alert('XSS')</script>
2	Sanitize input with sanitize_text_field()	<script>alert('XSS')</script>	alert('XSS')
3	Escape output with esc_html()	alert('XSS')	alert(&#039;XSS&#039;)
4	Render output in browser	alert(&#039;XSS&#039;)	Displays text: alert('XSS') safely, no script runs
5	End	N/A	Safe content shown, no XSS executed

💡 User input is sanitized and escaped, so no harmful script runs in the browser.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	Final
$input	undefined	<script>alert('XSS')</script>	<script>alert('XSS')</script>	<script>alert('XSS')</script>	<script>alert('XSS')</script>
$clean_input	undefined	undefined	alert('XSS')	alert('XSS')	alert('XSS')
Output	undefined	undefined	undefined	alert(&#039;XSS&#039;)	alert(&#039;XSS&#039;)

Key Moments - 2 Insights

Why do we need both sanitize_text_field() and esc_html()?

sanitize_text_field() cleans the input to remove harmful code before storing or processing, while esc_html() escapes output to prevent any remaining code from running in the browser. Both steps together stop XSS attacks, as shown in steps 2 and 3 of the execution_table.

What happens if we skip esc_html() and just echo sanitized input?

Even sanitized input might contain characters that browsers interpret as code. Without esc_html(), the browser could run scripts. The execution_table step 4 shows escaping output is crucial to display safe text.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of $clean_input after sanitization (step 2)?

A <script>alert('XSS')</script>

B alert(&#039;XSS&#039;)

C alert('XSS')

D undefined

💡 Hint

Check the 'Result/Output' column at step 2 in the execution_table.

At which step does the output become safe to display in the browser?

A Step 3

B Step 2

C Step 1

D Step 4

💡 Hint

Look for when esc_html() is applied in the execution_table.

If we remove sanitize_text_field(), how would the $clean_input value change at step 2?

A It would be empty string

B It would still be <script>alert('XSS')</script>

C It would be alert('XSS')

D It would be escaped HTML

💡 Hint

Sanitize function removes tags; without it, input stays raw as in step 1.

Concept Snapshot

XSS Prevention in WordPress:
- Sanitize input with sanitize_text_field() to clean user data.
- Escape output with esc_html() before showing on page.
- Both steps stop harmful scripts from running.
- Always sanitize first, then escape.
- Prevents attackers injecting malicious code.

Full Transcript

This visual execution shows how WordPress prevents cross-site scripting (XSS) attacks. First, user input is received as raw text, which may contain harmful scripts. Then, sanitize_text_field() cleans the input by removing HTML tags and dangerous code. Next, esc_html() escapes special characters so the browser treats them as text, not code. Finally, the safe content is displayed on the page. This two-step process ensures no malicious scripts run, protecting users from XSS vulnerabilities.

Practice

1. What is the main purpose of XSS prevention in WordPress?

easy

A. To improve SEO rankings

B. To speed up website loading time

C. To stop harmful scripts from running on your website

D. To add more images to your site

Solution

1. Step 1: Understand what XSS means

   XSS stands for Cross-Site Scripting, which allows attackers to run harmful scripts on your site.

2. Step 2: Identify the goal of prevention

   The goal is to stop these harmful scripts from running to protect users and the site.

3. Final Answer:

   To stop harmful scripts from running on your website -> Option C

4. Quick Check:

   XSS prevention = stop harmful scripts [OK]

Hint: XSS prevention blocks bad scripts from running [OK]

Common Mistakes:

• Thinking XSS prevention improves speed
• Confusing XSS with SEO improvements
• Believing it adds content automatically

2. Which WordPress function is used to safely escape text before outputting it to prevent XSS?

easy

A. esc_html()

B. wp_kses_post()

C. sanitize_text_field()

D. wp_enqueue_script()

Solution

1. Step 1: Identify escaping functions for output

   esc_html() escapes text for safe HTML output, preventing scripts from running.

2. Step 2: Differentiate from other functions

   wp_kses_post() allows some HTML, sanitize_text_field() cleans input, wp_enqueue_script() loads scripts.

3. Final Answer:

   esc_html() -> Option A

4. Quick Check:

   Escape text output = esc_html() [OK]

Hint: Use esc_html() to escape text output safely [OK]

Common Mistakes:

• Using sanitize_text_field() for output escaping
• Confusing wp_kses_post() with esc_html()
• Thinking wp_enqueue_script() escapes text

3. What will be the output of this code snippet if user input is <script>alert('XSS')</script>?

<?php
echo esc_html($_GET['input']);
?>

medium

A. PHP error

B. (runs alert)

C. Empty output

D. <script>alert('XSS')</script> (shown as text)

Solution

1. Step 1: Understand esc_html() effect

   esc_html() converts special HTML characters to safe text, so tags show as text, not code.

2. Step 2: Predict output with given input

   The script tags will be shown as <script>alert('XSS')</script> literally, not executed.

3. Final Answer:

   <script>alert('XSS')</script> (shown as text) -> Option D

4. Quick Check:

   esc_html() escapes tags to text [OK]

Hint: esc_html() shows tags as text, not code [OK]

Common Mistakes:

• Thinking script runs despite escaping
• Expecting empty output
• Assuming PHP error occurs

4. Identify the error in this code that tries to prevent XSS:

<?php
$user_input = $_POST['comment'];
echo $user_input;
?>

medium

A. Missing escaping function before echoing user input

B. Using $_POST instead of $_GET

C. Variable name is incorrect

D. No error, code is safe

Solution

1. Step 1: Check how user input is output

   The code echoes raw user input without escaping, which can run harmful scripts.

2. Step 2: Identify missing security step

   It should use an escaping function like esc_html() before echoing to prevent XSS.

3. Final Answer:

   Missing escaping function before echoing user input -> Option A

4. Quick Check:

   Always escape user output [OK]

Hint: Always escape user data before echoing [OK]

Common Mistakes:

• Thinking $_POST vs $_GET matters here
• Believing variable name causes error
• Assuming raw echo is safe

5. You want to allow some HTML tags like <strong> and <a> in user comments but prevent scripts. Which WordPress function should you use?

hard

A. sanitize_text_field()

B. wp_kses()

C. esc_html()

D. wp_strip_all_tags()

Solution

1. Step 1: Understand the need to allow some HTML safely

   esc_html() escapes all HTML, sanitize_text_field() removes tags, wp_strip_all_tags() removes all tags.

2. Step 2: Identify function that allows specific tags

   wp_kses() lets you specify allowed tags and attributes, filtering out harmful scripts but keeping safe HTML.

3. Final Answer:

   wp_kses() -> Option B

4. Quick Check:

   Allow safe HTML = wp_kses() [OK]

Hint: Use wp_kses() to allow safe HTML tags only [OK]

Common Mistakes:

• Using esc_html() which escapes all tags
• Using sanitize_text_field() which removes tags
• Assuming wp_strip_all_tags() allows some HTML