ProgramGuru

Display Untrusted Text Safely

Display Untrusted Text Safely

A student-supplied label is data, not markup. textContent displays angle brackets as text instead of creating elements. A safe DOM update is one boundary in a broader security design.

Before this topic, review Keep Interaction Responsive if its terms are unfamiliar.

What you’ll learn

  • Explain display untrusted text safely through the school example.
  • Trace the shown operations and distinguish their result from displayed output.
  • Make the practice change and explain its consequence: The edited text no longer contains the img substring; neither console inspection executes markup.

Work through the school example

This is JavaScript using language features and the host console. Read the initial values, then follow each operation to its displayed result. A declaration names a value, a function call performs an operation, and console.log displays its arguments.

JavaScript · school.js · complete example

const label = "<img src=x onerror=alert(1)>";
console.log(label.includes("<img"));

Expected output

true
Run in JavaScript compiler →

Recognize the important boundary

This console program only inspects a string; the browser example below demonstrates safe insertion. Client code does not replace server authorization, validation or a deliberate content policy.

Try a small variation

JavaScript · original source for practice

const label = "<img src=x onerror=alert(1)>";
console.log(label.includes("<img"));

Your task: Replace <img with <b. Predict the result before running the edited program.

The source is repeated here. If the edit targets the HTML rather than the script, use the markup repeated below; the worked answer also repeats the changed markup.

Worked answer and reasoning

The edited text no longer contains the img substring; neither console inspection executes markup.

JavaScript · complete worked variation

const label = "<b src=x onerror=alert(1)>";
console.log(label.includes("<img"));

Expected output

false
Run in JavaScript compiler →

Predict the original program

JavaScript · original program for this question

const label = "<img src=x onerror=alert(1)>";
console.log(label.includes("<img"));
What does the original JavaScript program display, in order?
Choose one answer. You can try again.

Answer and explanation

true

A student-supplied label is data, not markup. textContent displays angle brackets as text instead of creating elements. A safe DOM update is one boundary in a broader security design. This console program only inspects a string; the browser example below demonstrates safe insertion. Client code does not replace server authorization, validation or a deliberate content policy.

Insert the string as text

The isolated practice page starts empty. The supplied text contains markup-looking characters, but textContent creates text rather than an image or executable event handler.

JavaScript · browser · safe text insertion

const notice = document.createElement('p');
notice.textContent = '<img src=x onerror=alert(1)>';
document.body.append(notice);
console.log(notice.querySelector('img') === null);

Expected output

true

Keep the useful idea

A student-supplied label is data, not markup. textContent displays angle brackets as text instead of creating elements. A safe DOM update is one boundary in a broader security design.

Check your variation against this explanation: The edited text no longer contains the img substring; neither console inspection executes markup.

Use the JavaScript array reference library for individual array operations and boundary tests to check a rule independently.

Reaching the recap and completing the quizzes are separate milestones.

    Next lesson: Project: A Homework List →