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.