Skip to content
AITroveRead. Build. Understand.
Reading list
Make this comfortable

Paste Import, Sanitization, and Link Policy

Last updated: 5 Oct 20267 min read
tutorial
IntermediateBy AITrove Editorial

A paste can contain plain text, rich HTML, images, links, and formatting from another application. The clipboard is untrusted input even when a user initiates the action. A rich editor should parse only the content classes its document model supports, normalize them, and reject unsafe attributes and URL schemes. This is distinct from output safety: the server must validate stored content and the renderer must use a maintained safe HTML policy if it emits markup. A client-side paste filter alone cannot protect other write paths.

Working case

Reviewer 29 pastes a formatted inspection note copied from a supplier portal. The fragment contains a heading, two paragraphs, a link, a tracking image, and inline event code. The editor retains the text and allowed emphasis, validates the link destination under a product policy, drops the tracking image and event attribute, and previews the normalized result before save. The API validates the document structure again. When another reviewer opens the note, the controlled renderer produces only allowed nodes. The original clipboard HTML is never stored as the case record.

Implementation boundary

javascript
function allowedNoteNode(type) {
  return new Set(["paragraph", "heading", "text", "emphasis", "link"]).has(type);
}
console.log(allowedNoteNode("script"));
// Output: false

Define an allowlist of document nodes and attributes, including a URL policy for links and media. Prefer converting clipboard HTML into the editor model rather than inserting raw HTML into the live DOM. If plain text meets the task, paste text only and avoid a rich HTML path entirely. Sanitize at a maintained boundary and validate again server-side, because clients are bypassable. Render through safe components or a maintained sanitizer configured for the exact output context. Do not modify sanitized markup afterward in a way that reintroduces unsafe content.

Cost and boundaries

Parsing and normalization are O(n) in pasted fragment size, so cap bytes and node depth before processing. A large copied page can freeze a main-thread editor and fill undo history with a single action. Image handling adds upload, scan, ownership, and expiry costs; do not accept it by accident through a paste event. Keep a visible rejection or flattening rule for unsupported formatting. Monitor paste failures and normalized-node counts without logging the private clipboard text.

Failure trace

The editor strips scripts on paste but stores the original HTML beside the model for later export; a preview path then renders the unsafe copy. Another build allows a harmless-looking link whose scheme can execute when clicked. Test script and event attributes, unusual URL schemes, nested tables, a 47-megabyte fragment, broken markup, pasted images, and content submitted directly to the API without using the editor. Ensure stored and exported forms follow one policy and the case note remains readable if formatting is dropped.

Verification

  • Direct API writes face the same document policy.
  • Unsafe links and attributes do not survive normalization.
  • Private clipboard bytes stay out of telemetry.

Practice drill

Paste a fragment with one heading, two paragraphs, an approved link, an image, and an event attribute. Compare the parsed model with the approved schema and explain every removed node. Submit the same unsafe payload directly to the API; it must be rejected or normalized under the server contract. Reload and export the stored note, then inspect that the safe representation is consistent in both paths. Cap a large fragment before expensive DOM work.

Decision note

Normalize clipboard content into a small model and enforce the same safety policy at save and render boundaries.

Common Mistakes

  • Treating user-initiated paste as trusted.
  • Keeping original unsafe HTML for another render path.
  • Accepting pasted images without an asset lifecycle.

Connected lessons

Build Project: versioned case note editor and review Web Development: graphics and editor decisions quiz; follow Rich Document Editing and Safe Content; Editable Input, Composition, and Document Model; Selection Bookmarks and Transaction Mapping; Undo History, Autosave, and Revision Conflicts; Untrusted output: escape by context and constrain scripts; Clipboard and Share Activation Fallbacks.

web-tech
web-development
Storage details