Data escaping (output) in Wordpress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this WordPress escaping function?

Consider the following PHP code snippet in a WordPress theme template:

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

What will be the output rendered in the browser?

Wordpress

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

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

B <script>alert("XSS")</script>

C alert("XSS")

D <script>alert("XSS")</script>

💡 Hint

esc_html() converts special HTML characters to safe entities.

esc_html() escapes HTML special characters like <, >, and quotes so they display as text, preventing scripts from running.

📝 Syntax

intermediate

Which option correctly escapes a URL for safe output in WordPress?

You want to safely output a URL stored in $url variable inside an HTML attribute in WordPress. Which of the following is the correct escaping function to use?

A echo sanitize_text_field( $url );

B echo esc_html( $url );

C echo esc_attr( $url );

D echo esc_url( $url );

💡 Hint

Use the function designed specifically for URLs.

esc_url() is designed to sanitize and escape URLs for safe output in HTML attributes or links.

🔧 Debug

advanced

Why does this WordPress code output raw HTML instead of escaped text?

Given this code:

<?php
$content = '<strong>Hello</strong>';
echo esc_attr( $content );
?>

Why does the browser render Hello as bold text instead of showing the tags as text?

Wordpress

<?php
$content = '<strong>Hello</strong>';
echo esc_attr( $content );
?>

A esc_attr() escapes for HTML attributes, but echo outputs raw HTML in body, so tags render.

B esc_attr() does not escape HTML tags, so they render as HTML.

C The variable $content is not escaped at all, causing raw HTML output.

D esc_attr() escapes HTML tags but echo removes escaping automatically.

💡 Hint

esc_attr() is for attribute values, not general HTML content.

esc_attr() escapes quotes and special chars for attributes, but when echoed in body content, HTML tags still render. Use esc_html() to escape tags in body.

❓ state_output

advanced

What is the output of this WordPress code with nested escaping?

Analyze this code:

<?php
$data = '<a href="http://example.com">Link</a>';
echo esc_html( esc_attr( $data ) );
?>

What will be displayed in the browser?

Wordpress

<?php
$data = '<a href="http://example.com">Link</a>';
echo esc_html( esc_attr( $data ) );
?>

A &lt;a href=&quot;http://example.com&quot;&gt;Link&lt;/a&gt;

B <a href="http://example.com">Link</a>

C &amp;lt;a href=&amp;quot;http://example.com&amp;quot;&amp;gt;Link&amp;lt;/a&amp;gt;

D http://example.com

💡 Hint

esc_attr() escapes quotes and special chars, esc_html() escapes HTML entities again.

esc_attr() converts quotes to entities, then esc_html() converts < and > to entities, so output shows all escaped characters with & prefixes.

🧠 Conceptual

expert

Which WordPress escaping function should you use to safely output user input inside a JavaScript block?

You want to output user input safely inside a JavaScript block in a WordPress theme. Which escaping function is the best choice?

A esc_js()

B esc_html()

C esc_attr()

D esc_url()

💡 Hint

Think about escaping for JavaScript context, not HTML or URLs.

esc_js() escapes data for safe use inside JavaScript code blocks, preventing injection attacks.

Practice

1. What is the main purpose of using data escaping functions like esc_html() in WordPress?

easy

A. To clean output and protect the site from harmful code

B. To speed up the website loading time

C. To change the color of text on the page

D. To store data in the database securely

Solution

1. Step 1: Understand what data escaping does

   Data escaping cleans output by converting special characters to safe ones to prevent harmful code execution.

2. Step 2: Identify the purpose in WordPress context

   WordPress uses escaping functions to protect the site from security risks like cross-site scripting (XSS).

3. Final Answer:

   To clean output and protect the site from harmful code -> Option A

4. Quick Check:

   Data escaping = Protect site [OK]

Hint: Escaping means cleaning output to keep site safe [OK]

Common Mistakes:

• Thinking escaping speeds up the site
• Confusing escaping with styling
• Believing escaping stores data securely

2. Which of the following is the correct way to escape a URL before outputting it in WordPress?

easy

A. echo esc_html($url);

B. echo esc_url($url);

C. echo esc_attr($url);

D. echo sanitize_text_field($url);

Solution

1. Step 1: Identify the correct escaping function for URLs

   WordPress provides esc_url() specifically to clean URLs before output.

2. Step 2: Compare with other functions

   esc_html() is for HTML content, esc_attr() for attributes, and sanitize_text_field() is for input sanitizing, not output escaping.

3. Final Answer:

   echo esc_url($url); -> Option B

4. Quick Check:

   Escape URL with esc_url() [OK]

Hint: Use esc_url() for URLs, esc_attr() for attributes [OK]

Common Mistakes:

• Using esc_html() for URLs
• Using sanitize_text_field() for output escaping
• Not escaping URLs at all

3. What will be the output of this code snippet if $user_input = '<script>alert(1)</script>'; and we run echo esc_html($user_input);?

medium

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

B.

C. &lt;script&gt;alert(1)&lt;/script&gt;

D. alert(1)

Solution

1. Step 1: Understand what esc_html() does to special characters

   It converts special HTML characters like <, > to their safe encoded forms (<, >).

2. Step 2: Apply escaping to the input string

   The input already has < and > but esc_html() will convert the ampersands (&) to &, so the output becomes &lt;script&gt;alert(1)&lt;/script&gt;.

3. Final Answer:

   &lt;script&gt;alert(1)&lt;/script&gt; -> Option C

4. Quick Check:

   esc_html() encodes & to & [OK]

Hint: esc_html() converts & to & and < > to < > [OK]

Common Mistakes:

• Assuming esc_html() outputs raw HTML
• Ignoring double escaping of &
• Confusing esc_html() with esc_attr()

4. You see this code in a WordPress theme: echo $user_name; where $user_name comes from user input. What is the problem and how to fix it?

medium

A. No problem, output is safe as is

B. Missing escaping, fix with echo sanitize_text_field($user_name);

C. Missing escaping, fix with echo esc_url($user_name);

D. Missing escaping, fix with echo esc_html($user_name);

Solution

1. Step 1: Identify the security risk

   Outputting user input directly can cause security issues like XSS attacks.

2. Step 2: Choose the correct escaping function for HTML output

   Since the output is HTML content, esc_html() is the proper function to escape special characters safely.

3. Final Answer:

   Missing escaping, fix with echo esc_html($user_name); -> Option D

4. Quick Check:

   Escape user input with esc_html() for HTML output [OK]

Hint: Always escape user input before echoing in HTML [OK]

Common Mistakes:

• Not escaping user input at all
• Using esc_url() for plain text
• Using sanitize_text_field() only sanitizes input, not escapes output

5. You want to output a user-submitted URL inside an HTML attribute like <a href="...">. Which is the best way to escape it to keep your site safe and valid?

hard

A. echo esc_url($user_url);

B. echo esc_html($user_url);

C. echo esc_attr($user_url);

D. echo esc_url(esc_attr($user_url));

Solution

1. Step 1: Understand context of output

   The URL is inside an HTML attribute (href), so it needs URL-specific escaping and validation.

2. Step 2: Choose correct escaping function for URL attributes

   esc_url() sanitizes URL schemes (e.g., strips javascript:) and escapes for safe HTML attribute output.

3. Step 3: Why not esc_attr()?

   esc_attr() only escapes HTML chars but allows dangerous schemes like javascript:alert(1), leading to XSS.

4. Final Answer:

   echo esc_url($user_url); -> Option A

5. Quick Check:

   esc_url() for href attributes [OK]

Hint: esc_url() for links in href/src attributes [OK]

Common Mistakes:

• Using esc_attr() which doesn't validate URL schemes
• Using esc_html() for attributes
• Double escaping with esc_url(esc_attr())