Chapter 79: Dynamic HTML Generation

Dynamic HTML with Tagged Template Literals

Implementing declarative, safe, and expressive HTML templating engines in vanilla JavaScript using ES6 tagged template literals.

LEARNING OBJECTIVES ⌵

Understand the mechanics of ES6 Tagged Template Literals (strings array, ...values arguments, raw strings).
Build a custom, zero-dependency html tag function that automatically escapes untrusted interpolations to prevent DOM XSS.
Support nested array interpolation and raw/safe HTML bypassing mechanics.
Compare tagged template rendering models with classic string concatenation and modern reactive libraries (e.g., Lit, HyperHTML).

🎬 INTERACTIVE VISUAL PIPELINE Core Architecture Simulation

🌐

1. Input

Directives & Tags

⚙️

2. Parse

Tokenizer & AST

🌳

3. Layout

Box Model & Flow

🎨

4. Render

GPU Paint & Composite

PHASE 1: INPUT & DIRECTIVES

Browser receives declarative markup stream, parsing tag tokens and initializing component state.

📖 The Mental Model & Story (Intuitive Foundation)

Imagine writing an executive contract. The document has static boilerplate text (the legal terms that never change) and blank spaces where dynamic variables (client name, financial figures, address) are filled in.

+--------------------------------------------------------------------------------+
| STATIC BOILERPLATE (Strings Array):                                           |
| strings[0] = "<div><h3>"                                                      |
| strings[1] = "</h3><p>"                                                       |
| strings[2] = "</p></div>"                                                     |
+--------------------------------------------------------------------------------+
                                       +
+--------------------------------------------------------------------------------+
| DYNAMIC DATA VALUES (Values Array):                                           |
| values[0] = user.name (e.g. "<script>malicious()</script>")                   |
| values[1] = user.bio  (e.g. "Senior Architect")                              |
+--------------------------------------------------------------------------------+
                                       |
                     TAGGED TEMPLATE FUNCTION (The Notary)
                                       |
                                       v
[ Checks each dynamic value, sanitizes malicious characters, and merges safely ]

If you use standard string concatenation ("<div>" + user.name + "</div>"), the browser cannot distinguish between the author's trusted HTML markup and the untrusted user input. A malicious user entering <img src=x onerror=stealCookies()> becomes parsed as executable HTML.

A Tagged Template Literal acts like an automated legal notary. The JavaScript engine intercepts the template before evaluation, splitting it cleanly into:

An immutable array of trusted static HTML chunks authored by the developer.
A separate array of dynamic runtime values provided by variables.

Because the tag function inspects every dynamic value individually, it can automatically escape dangerous characters (<, >, &, ", ') before merging them with the static HTML.

Technical Deep Dive & Specifications

Tagged Template Literal Function Signature

When you prefix a backtick template with a function name (e.g., html\

${title}

``), the JavaScript engine passes the raw arguments to that function:

function html(strings, ...values) {
  // strings: Array of static string pieces (length = values.length + 1)
  // strings.raw: Array of raw unescaped strings
  // values: Array of interpolated expressions (${...})
}

Syntax: html`<p class="${className}">${userName}</p>`

strings: ["<p class=\"", "\">", "</p>"]  (Length: 3, Frozen)
values:  [className, userName]            (Length: 2)

Context-Aware HTML Escaping Rules

To prevent DOM XSS vulnerabilities, all interpolated strings injected into text contexts or attribute values must have dangerous characters replaced with their corresponding HTML entity codes:

Character	Entity Replacement	Vulnerability Prevented
`&`	`&`	Prevents entity confusion / injection
`<`	`<`	Prevents tag injection (`<script>`, `<iframe>`)
`>`	`>`	Prevents breaking out of tags
`"`	`"`	Prevents attribute breakout in `<input value="...">`
`'`	`'` / `'`	Prevents attribute breakout in single-quoted attributes

Handling Arrays, Numbers, and Bypassed Safe HTML

A production-grade html tag function must handle multiple data types:

Primitives (Strings, Numbers, Booleans): Escaped safely.
Arrays (Lists of items): Flattened and recursively joined.
Null / Undefined: Rendered as empty strings ("").
Explicit Safe HTML (rawHtml): A wrapper object (e.g., { __html: string }) allowing intentional, pre-sanitized markup to bypass escaping.

                                  Value Type Check
                                         |
         +-------------------------------+-------------------------------+
         |                               |                               |
    Is Array?                      Is SafeWrapper?                  Is Primitive?
         |                               |                               |
  .map(process).join('')         Return .__html raw             escapeHTML(String(v))

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

Line 26–33 (function escapeHTML(str)): Transforms high-risk ASCII characters into safe HTML entities using regex replacement.
Line 36–38 (function raw(...)): Provides an explicit "escape hatch" for developer-authored, trusted HTML tags (e.g. verified badges).
Line 41–66 (function html(strings, ...values)): The tagged template dispatcher. Iterates through the static string tokens and selectively sanitizes dynamic values.
Line 49 (Array.isArray(val)): Handles mapped arrays (such as ${users.map(renderUserCard)}) by concatenating their pre-evaluated HTML output.
Line 79–86 (users[1]): Contains malicious <script> and onerror attack vectors.
Line 90–99 (renderUserCard): Declarative JSX-like syntax without needing Babel, React, or build steps.
Line 104 (${users.map(renderUserCard)}): Demonstrates functional composability with list mapping.

Expected Browser Render Output

(Crucially: Zero JavaScript alerts or popups execute when rendering the malicious user).

SYS: ACTIVE

HULL: 98%

CORE: STABLE

NET: ONLINE

HTML STARSHIP CODE TERMINAL playground.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Safe Dynamic Tagged Template Engine</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 2rem; background: #0f172a; color: #f8fafc; }
    .card-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; margin-top: 1.5rem; }
    .user-card { background: #1e293b; border: 1px solid #334155; border-radius: 8px; padding: 1.25rem; }
    .user-card h3 { margin: 0 0 0.5rem 0; color: #38bdf8; font-size: 1.1rem; }
    .user-card p { margin: 0 0 0.75rem 0; color: #94a3b8; font-size: 0.9rem; line-height: 1.4; }
    .badge { background: #0369a1; color: #e0f2fe; padding: 2px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: bold; }
    .danger-notice { color: #f87171; font-weight: bold; }
  </style>
</head>
<body>

<h1>Safe Dynamic HTML with Tagged Templates</h1>
  <p>Notice how malicious XSS payloads are safely neutralized into harmless plain text.</p>

// 2. Safe HTML bypass wrapper
    function raw(trustedHtml) {
      return { __html: trustedHtml };
    }

// 3. Tagged template implementation
    function html(strings, ...values) {
      let result = '';

for (let i = 0; i < strings.length; i++) {
        result += strings[i];

if (i < values.length) {
          const val = values[i];

if (val === null || val === undefined) {
            // Render nothing for nullish values
            result += '';
          } else if (Array.isArray(val)) {
            // Join array of rendered items
            result += val.join('');
          } else if (typeof val === 'object' && val.__html !== undefined) {
            // Developer explicitly marked this as trusted raw HTML
            result += val.__html;
          } else {
            // Standard dynamic value: sanitize thoroughly
            result += escapeHTML(val);
          }
        }
      }

return result;
    }

// Data payload containing normal and malicious inputs
    const users = [
      {
        id: 101,
        name: "Guillermo Rauch",
        role: "CEO & Founder",
        bio: "Building the next generation cloud platform.",
        verified: true
      },
      {
        id: 102,
        name: "<script>alert('Pwned!')</script> Robert'); DROP TABLE Users;--",
        role: "Penetration Tester",
        bio: "<b onmouseover=alert(1)>Hover me for a prize!</b> or <img src=x onerror=alert('XSS')>",
        verified: false
      }
    ];

function renderUserCard(user) {
      return html`
        <article class="user-card" id="user-${user.id}">
          <h3>${user.name}</h3>
          <p class="role"><strong>Role:</strong> ${user.role}</p>
          <p class="bio">${user.bio}</p>
          ${user.verified 
            ? raw('<span class="badge">✓ Verified Account</span>') 
            : raw('<span class="danger-notice">Unverified</span>')}
        </article>
      `;
    }

function renderApp() {
      const renderedHtml = html`
        <section class="card-list">
          ${users.map(renderUserCard)}
        </section>
      `;

document.getElementById('app-root').innerHTML = renderedHtml;
    }

renderApp();
  </script>
</body>
</html>

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

Safe Dynamic HTML with Tagged Templates
Notice how malicious XSS payloads are safely neutralized into harmless plain text.

+-------------------------------------+  +-------------------------------------+
| Guillermo Rauch                     |  | <script>alert('Pwned!')</script>... |
| Role: CEO & Founder                 |  | Role: Penetration Tester            |
| Building the next generation cloud..|  | <b onmouseover=alert(1)>Hover me... |
| [ ✓ Verified Account ]              |  | Unverified                          |
+-------------------------------------+  +-------------------------------------+

🏋️ Hands-On Exercise

🎯 The Challenge: Dynamic E-Commerce Product Grid

Instructions:

Use the provided html tagged template engine.
Build a function renderProductCard(product) that formats:
- Product title (escaped).
- Rating stars (e.g. ★ 4.8 / 5.0).
- Price formatted as currency (e.g. $99.99).
- An "In Stock" badge (green safe HTML) or "Out of Stock" warning (red safe HTML).
- An untrusted customer review quote (must be escaped!).
Render a list of 3 products into the #catalog container.

🏁 Starter Code Sandbox

SYS: ACTIVE

HULL: 98%

CORE: STABLE

NET: ONLINE

STARTER CODE SANDBOX exercise.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Tagged Template Challenge</title>
  <style>
    .product-grid { display: flex; gap: 1rem; font-family: system-ui, sans-serif; }
    .product-card { border: 1px solid #ccc; padding: 1rem; border-radius: 6px; width: 220px; }
  </style>
</head>
<body>
  <h2>Featured Hardware Store</h2>
  <div id="catalog" class="product-grid"></div>

const products = [
      { id: 1, name: "Mechanical Keyboard", price: 129.99, inStock: true, review: "Best clicky switches! <script>bad()</script>" },
      { id: 2, name: "Ultrawide Monitor", price: 499.50, inStock: false, review: "Great color accuracy & crisp text." }
    ];

// TODO: Implement renderProductCard(product) using html`...`
    function renderProductCard(product) {
      // Return html`...`
    }

document.getElementById('catalog').innerHTML = html`${products.map(renderProductCard)}`;
  </script>
</body>
</html>

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Tagged Template Solution</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 2rem; background: #0f172a; color: #f8fafc; }
    .product-grid { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; }
    .product-card { background: #1e293b; border: 1px solid #334155; padding: 1.25rem; border-radius: 8px; width: 240px; }
    .product-card h3 { margin: 0 0 0.5rem 0; font-size: 1.1rem; color: #38bdf8; }
    .price { font-size: 1.25rem; font-weight: bold; color: #f1f5f9; margin-bottom: 0.5rem; }
    .badge-in { color: #4ade80; font-weight: bold; font-size: 0.8rem; }
    .badge-out { color: #f87171; font-weight: bold; font-size: 0.8rem; }
    .review { font-style: italic; font-size: 0.85rem; color: #94a3b8; border-top: 1px solid #334155; padding-top: 0.5rem; margin-top: 0.75rem; }
  </style>
</head>
<body>
  <h2>Featured Hardware Store</h2>
  <div id="catalog" class="product-grid"></div>

  <script>
    function escapeHTML(str) {
      return String(str).replace(/[&<>"']/g, m => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[m]);
    }
    function raw(str) { return { __html: str }; }
    function html(strings, ...values) {
      return strings.reduce((acc, str, i) => {
        let val = values[i - 1];
        if (val === null || val === undefined) val = '';
        else if (Array.isArray(val)) val = val.join('');
        else if (!(typeof val === 'object' && val.__html)) val = escapeHTML(val);
        else val = val.__html;
        return acc + val + str;
      });
    }

    const products = [
      { id: 1, name: "Mechanical Keyboard", price: 129.99, inStock: true, review: "Best clicky switches! <script>bad()</script>" },
      { id: 2, name: "Ultrawide Monitor", price: 499.50, inStock: false, review: "Great color accuracy & crisp text." }
    ];

    function renderProductCard(product) {
      return html`
        <article class="product-card" data-product-id="${product.id}">
          <h3>${product.name}</h3>
          <div class="price">$${product.price.toFixed(2)}</div>
          <div>
            ${product.inStock 
              ? raw('<span class="badge-in">● In Stock</span>') 
              : raw('<span class="badge-out">○ Out of Stock</span>')}
          </div>
          <div class="review">"${product.review}"</div>
        </article>
      `;
    }

    document.getElementById('catalog').innerHTML = html`
      ${products.map(renderProductCard)}
    `;
  </script>
</body>
</html>

Why this works:

The tagged template isolates all product strings (including the malicious <script> inside the customer review) and executes entity replacement.
The raw() wrapper safely passes styled status indicators without being escaped.
Array mapping seamlessly nests into the outer template tag.

⚠️ Common Pitfalls

Accidentally Escaping Developer-Authored HTML Components: If you call html\
${renderChild()}
`andrenderChild()returns a string withoutraw(), the inner HTML tags (
,
) will be turned into <div>text! Ensure sub-component template functions return compatible objects or useraw()`.
Unquoted Attribute Injections: Writing html\`without quotes aroundvalue="${userVal}"allows an attacker providingfoo onclick=steal()` to inject arbitrary attributes. Always quote your HTML attributes.
Using Untrusted URLs in href or src: Escaping < and > does not protect against javascript: pseudo-protocols! If a user submits javascript:alert(1) as a website link, escaping will leave href="javascript:alert(1)" intact. Always validate URL protocols (http:, https:).

💡 Pro Tips

Template Caching with strings Identity: In ES6, the strings array reference passed to a tagged template literal is identical (cached) across multiple executions of the same code location (strings1 === strings2). Modern libraries like Lit use this reference identity to parse the HTML template once into an internal <template> and only update dynamic slot bindings on subsequent renders!
Leverage IDE Syntax Highlighting Extensions: Extensions like VS Code's Comment Tagged Templates or lit-html provide full syntax highlighting, autocomplete, and emmet support inside html\...`` blocks without needing a compile step.

📌 Key Takeaways

Tagged template literals intercept string evaluation, separating static markup from dynamic variables.
The first parameter is a frozen array of static string chunks; subsequent parameters contain runtime interpolations.
Building an html tag function allows automatic entity escaping (<, >, &, ", ') to block DOM XSS.
Safe bypass wrappers (raw()) allow intentional developer-authored sub-templates.
The strings array reference is cached by JavaScript engines, enabling high-performance template caching.
--

⭐ LEARN: HTML 🌟 ⚔️ QUIZ BATTLE ARENA // ACTIVE

? Question 1 / 3

In the tagged template call `myTag\`Hello ${name}, you have ${count} messages``, what is the length of the first argument (`strings`)?

Topic: HTML Fundamentals

? Question 2 / 3

Why does standard HTML entity escaping fail to protect against malicious input in `<a href="${userLink}">`?

Topic: HTML Fundamentals

? Question 3 / 3

How do libraries like Lit achieve near-native rendering performance with tagged template literals?

Topic: HTML Fundamentals

👨‍🚀 CADET FLIGHT DOSSIER

CADET EXPLORER

📖 The Mental Model & Story (Intuitive Foundation)

Technical Deep Dive & Specifications

Tagged Template Literal Function Signature

${title}

Context-Aware HTML Escaping Rules

Handling Arrays, Numbers, and Bypassed Safe HTML

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

Expected Browser Render Output

🏋️ Hands-On Exercise

🎯 The Challenge: Dynamic E-Commerce Product Grid

🏁 Starter Code Sandbox

${product.name}

⚠️ Common Pitfalls

💡 Pro Tips

📌 Key Takeaways

In the tagged template call myTag\Hello ${name}, you have ${count} messages`, what is the length of the first argument (strings`)?

Why does standard HTML entity escaping fail to protect against malicious input in <a href="${userLink}">?

How do libraries like Lit achieve near-native rendering performance with tagged template literals?

In the tagged template call `myTag\`Hello ${name}, you have ${count} messages``, what is the length of the first argument (`strings`)?

Why does standard HTML entity escaping fail to protect against malicious input in `<a href="${userLink}">`?