Cross-Site Scripting (XSS) via Select Schema Option Value Injection in @pdfme/schemas

Summary

The Select schema plugin in @pdfme/schemas constructs HTML from template-defined option values using unsanitized string interpolation and sets it via innerHTML, enabling arbitrary JavaScript execution.

Details

In packages/schemas/src/select/index.ts, lines 159-164, the Select schema's ui renderer builds <option> elements by directly interpolating option values from the template into an HTML string:

const options = Array.isArray(schema.options) ? schema.options : [];
selectElement.innerHTML = options
  .map(
    (option) =>
      `<option value="${option}" ${option === value ? 'selected' : ''}>${option}</option>`,
  )
  .join('');

The option values come from schema.options, which is an array of strings defined in the template JSON. These values are interpolated directly into the HTML string without any escaping of <, >, ", &, or other HTML-special characters. An option value containing "> breaks out of the value attribute and allows injection of arbitrary HTML elements and event handlers.

Proof of Concept

Loading the following template into a pdfme Form or Designer component triggers JavaScript execution:

{
  "basePdf": { "width": 210, "height": 297, "padding": [20, 20, 20, 20] },
  "schemas": [[
    {
      "name": "malicious_select",
      "type": "select",
      "content": "Normal",
      "options": [
        "Normal",
        "\"></option><img src=x onerror=\"alert(document.domain)\">"
      ],
      "position": { "x": 20, "y": 20 },
      "width": 80,
      "height": 10
    }
  ]]
}

The injected <img onerror> element executes JavaScript because it is parsed as HTML when assigned to selectElement.innerHTML.

Attack Vectors

The options array is defined in the template (not by form-filling end users). The attack requires a malicious template to be loaded, which can happen via:

1. File upload (e.g., "Load Template" functionality in applications)
2. Shared/imported templates in multi-tenant applications
3. Templates stored in databases without content sanitization
4. The updateTemplate() API being called with untrusted data

This vulnerability is triggered in Form mode (for non-readOnly select fields) and Designer mode when the select element is rendered.

Impact

An attacker who can supply a malicious template can execute arbitrary JavaScript in the browser of any user who views or interacts with the template. This enables:

• Session hijacking via cookie/token theft
• Keylogging of form input data
• Phishing and page modification
• Data exfiltration

Suggested Fix

Use DOM APIs to create option elements safely instead of string interpolation:

options.forEach((option) => {
  const optionEl = document.createElement('option');
  optionEl.value = option;
  optionEl.textContent = option;
  if (option === value) optionEl.selected = true;
  selectElement.appendChild(optionEl);
});

Alternatively, HTML-encode option values before interpolation:

const escape = (s) => s.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');