Stop document content from injecting CSS through Highlight and link marks #399

Summary

Two editor attributes copy raw strings from document content into the DOM:

• The Highlight color goes into a style attribute.
• The hyperlink class comes from pasted HTML.

Anyone who can edit a public document can add a full-window overlay that every reader sees. This is CSS only. It cannot run script and cannot read typed passwords. It can cover the page with fake UI and a link to an outside site.

• Severity: Medium
• Area: apps/webapp TipTap, extensions/extension-hyperlink (published package)
• Source: security review of 2026-10-06. Proven against the locked @tiptap/core 3.31.3 and prosemirror-model 1.25.11.

Where

• apps/webapp/src/components/TipTap/extensions/highlight.ts:22-29
  • parseHTML keeps the raw data-color or style.backgroundColor.
  • renderHTML writes style: \background-color: ${attributes.color}`. ProseMirror calls setAttribute('style', …)`, so every declaration in the string applies.
• Highlight is registered in the document editor at apps/webapp/src/components/TipTap/TipTap.tsx:224. The History view uses the same setup.
• extensions/extension-hyperlink/src/hyperlink.ts:228-230 — the class attribute has no parseHTML, so Tiptap's default reads element.getAttribute('class'). :266 merges it into the rendered <a>. Compiled Tailwind classes such as fixed inset-0 z-[60] then apply.
• The peer-caret code already guards this case (TipTap.tsx:335-336). Highlight does not.

Who can do it

Any signed-out visitor on a public document that is not Read-only. Read-only is off by default. A raw Yjs write skips parseHTML, so the render side must check too.

Fix plan

1. Highlight color:
   • Accept only a value that matches a strict pattern, for example ^#[0-9a-fA-F]{3,8}$, rgb()/rgba() with numbers only, or a name from the editor palette.
   • Apply the check in both parseHTML and renderHTML. Stored marks and raw Yjs updates skip the parser.
   • On an invalid value, render no style and no data-color.
2. Hyperlink class:
   • Set parseHTML: () => null and rendered: false on the class attribute in extensions/extension-hyperlink/src/hyperlink.ts.
   • Keep this.options.HTMLAttributes.class from extension options, which is developer-set and safe.
   • This is a published package: add a CHANGELOG line and follow the release-extensions skill.
3. Optional hardening: check other attributes that render into style. TextAlign writes an unchecked style, but it is registered with no types today, so it is dead.

Acceptance criteria

• Pasting <mark data-color="#ff0;position:fixed;inset:0">x</mark> renders a mark with no style attribute.
• A stored mark with a bad color (raw Yjs) renders with no style.
• Normal highlight colours from the toolbar still render.
• Pasting <a href="https://example.com" class="fixed inset-0">x</a> renders a link with no attacker class.
• Hyperlink round-trip specs still pass (extensions/extension-hyperlink).

Verify

Add a unit spec for the colour validator, and a Cypress paste spec in the playground harness (see extensions/CLAUDE.md §round-trip specs).

Generated by Claude Code