No Login Data Private Local Save

HTML Sanitizer API Demo - Online Safe Set HTML

22
0
0
0

HTML Sanitizer API Demo

Sanitize untrusted HTML safely using the native Sanitizer API — no third-party libraries needed.

Checking support...
Presets:
Input: 0 chars Output: 0 chars 0 dangerous items removed Content is safe Engine: Sanitizer API
Raw HTML Input
Sanitized Output
Waiting for input...
Custom Sanitizer Configuration
div span p a img strong em b i u br ul ol li h1 h2 h3 table tr td
Live Rendered Preview (Sanitized)
Safe Render
Frequently Asked Questions
What is the HTML Sanitizer API?
The HTML Sanitizer API is a browser-native API that safely sanitizes untrusted HTML strings, removing potentially dangerous content such as <script> tags, inline event handlers (onclick, onerror, etc.), and javascript: URLs. It is built directly into modern browsers, eliminating the need for third-party libraries like DOMPurify in many use cases. The API is designed to prevent Cross-Site Scripting (XSS) attacks by default, using a secure allowlist-based approach.
How does the Sanitizer API differ from using innerHTML directly?
Using element.innerHTML = untrustedHTML is dangerous because it executes any embedded JavaScript immediately. The Sanitizer API, when used via element.setHTML(untrustedHTML, { sanitizer }), first strips all executable code and dangerous markup before inserting the HTML into the DOM. This provides a secure alternative without manual escaping or regex-based filtering.
Which browsers support the Sanitizer API?
As of 2024, the Sanitizer API is supported in Google Chrome 105+, Microsoft Edge 105+, and other Chromium-based browsers. Firefox and Safari are actively working on implementation. You can check the latest support status on Can I Use. For unsupported browsers, consider using a polyfill or a library like DOMPurify as a fallback.
What does the Sanitizer API remove by default?
By default, the Sanitizer API's default configuration removes: <script> and <style> elements, all inline event handler attributes (onclick, onerror, onload, onmouseover, etc.), javascript: URLs in href/src attributes, <iframe>, <object>, <embed>, <form> elements, data: URLs that could execute code, and various other potentially dangerous constructs. It operates on a secure allowlist model where only known-safe elements and attributes pass through.
Can I customize what elements and attributes the Sanitizer API allows?
Yes! You can create a Sanitizer instance with a custom configuration object. For example: new Sanitizer({ allowElements: ['div', 'p', 'a'], allowAttributes: { 'a': ['href'] } }). This gives you fine-grained control over which elements and attributes are permitted while still blocking everything dangerous by default. Use the Custom preset above to experiment with different configurations.
Is the Sanitizer API completely safe against all XSS attacks?
The Sanitizer API provides strong, browser-level protection against XSS attacks and is maintained by browser vendors with security expertise. However, no sanitizer is 100% guaranteed against all possible attack vectors. The API follows a strict allowlist approach and is regularly updated as new threats emerge. For critical applications, always follow defense-in-depth practices: sanitize input, use Content Security Policy (CSP) headers, and keep your browser updated.
How do I use the Sanitizer API in production?
First, check for browser support: if ('Sanitizer' in window) { ... }. Then create a sanitizer instance with your desired configuration and use element.setHTML(untrustedHTML, { sanitizer: mySanitizer }) to safely insert content. Always provide a fallback (like DOMPurify) for browsers that don't yet support the API. Monitor the MDN documentation for the latest API changes and browser support updates.
What are the best alternatives to the Sanitizer API?
The most popular alternative is DOMPurify, a fast, battle-tested JavaScript library that works across all browsers. Other options include sanitize-html (Node.js/Browser), Google Caja, and server-side sanitization libraries. The Sanitizer API's main advantage is that it's built into the browser, requires no additional downloads, and benefits from native performance and automatic security updates.
Does the Sanitizer API protect against DOM clobbering?
Yes. The Sanitizer API includes protections against DOM clobbering attacks, where an attacker injects HTML elements with id or name attributes that conflict with existing JavaScript variables or DOM properties. The API's default configuration carefully handles these cases, and its design follows secure-by-default principles that mitigate this class of vulnerability.
What is mXSS and does the Sanitizer API prevent it?
Mutation XSS (mXSS) is a sophisticated attack where seemingly safe HTML mutates into dangerous code when parsed by the browser. The Sanitizer API is specifically designed to prevent mXSS by using the browser's own parsing engine consistently and applying sanitization at the correct stage. This eliminates the parsing mismatches that mXSS attacks exploit, providing stronger protection than many JavaScript-based sanitizers.
bad image Click me

Hover over me

Styled div

Safe paragraph text remains.

`; $input.val(xssExample); sanitizeHTML(xssExample, currentPreset); // Scroll to output $('html, body').animate({ scrollTop: $output.offset().top - 100 }, 400); }); // Load safe example $('#btn-load-safe-example').on('click', function() { const safeExample = `

Welcome to Our Blog

This is a safe HTML snippet with formatting.

  • List item one
  • List item two with a safe link
  • List item three

Here's an image:

Placeholder image
NameValue
Alpha100
Beta200

This is a safe blockquote with inline code inside.

`; $input.val(safeExample); sanitizeHTML(safeExample, currentPreset); }); // Input changes $input.on('input', debouncedSanitize); // Copy buttons $('#btn-copy-input').on('click', function() { const text = $input.val(); if (!text) return; navigator.clipboard.writeText(text).then(() => { const $btn = $(this); $btn.addClass('copied').html('Copied!'); setTimeout(() => $btn.removeClass('copied').html('Copy'), 1500); }).catch(() => { $input.select(); document.execCommand('copy'); alert('Copied to clipboard!'); }); }); $('#btn-copy-output').on('click', function() { const text = lastSanitizedHTML || $output.text(); if (!text || text === 'Waiting for input...') return; navigator.clipboard.writeText(text).then(() => { const $btn = $(this); $btn.addClass('copied').html('Copied!'); setTimeout(() => $btn.removeClass('copied').html('Copy'), 1500); }).catch(() => { const range = document.createRange(); range.selectNode($output[0]); window.getSelection().removeAllRanges(); window.getSelection().addRange(range); document.execCommand('copy'); window.getSelection().removeAllRanges(); alert('Copied to clipboard!'); }); }); // Initialize element tag badges styling $('.element-tag.active-tag').each(function() { $(this).removeClass('bg-light text-dark').addClass('bg-primary text-white border-primary'); }); // Initialize checkSupport(); updatePreview(''); $output.text('Waiting for input...'); $statInputLen.text('0'); $statOutputLen.text('0'); $('#preset-default').removeClass('btn-outline-secondary').addClass('btn-primary active-preset'); // Set default example on load const defaultExample = `

Try HTML Sanitizer API

Paste or type any HTML here — the sanitizer will remove dangerous content.

Try adding a <script>alert('xss')</script> tag to see it get removed!

`; $input.val(defaultExample); sanitizeHTML(defaultExample, 'default'); });
New

Seam Allowance Chart – Online Metric & Imperial Quick Ref

Visual reference for common seam allowances (1/4″, 5/8″, etc.) with actual size on screen. Essential sewing aid.

New

font-variant-east-asian Demo - Online JIS & Proportional

Apply East Asian glyph variants like jis78, proportional-width, ruby. See the difference instantly. For CJK typography.

Gratitude Journal - Online Daily Thankfulness Log

Write three things you’re grateful for each day. Saved locally. Export as text. Boost mental well-being.

New

Random Bible Verse Generator - Online Daily Scripture

Get a randomly selected Bible verse with its reference. Uplifting and quick. Public domain text.

New

Yoga Pose Randomizer - Online Daily Practice Sequence Builder

Generate a random sequence of yoga poses with images and descriptions. Choose difficulty and duration. Build a home practice routine. Local only.

New

Daily Gratitude Card Maker - Online Download & Share

Design a simple gratitude card by typing what you re thankful for and pick a nature background. Download as image.

Simple Poll Creator - Online Create & Share Voting Link

Create a simple poll with multiple options and share a unique link. Votes stored anonymously via backend-free URL hash. Quick and free.

New

Daily Quran Verse Display – Random Ayah with Translation

Display a randomly selected verse from the Quran with English translation each day. A moment of spiritual reflection and knowledge.

New

HTML to Pug Converter - Online Indented Template Syntax

Convert standard HTML into Pug (formerly Jade) syntax. Clean, indented output. For Node.js templating. Client‑side.

New

Number Input Step Demo - Online See Validation Behavior

Test min, max, and step constraints on `<input type='number'>`. See how invalid values are handled. Undocumented behavior.

New

Popover Menu Builder - Online HTML‑Only Dropdown

Create a pure HTML dropdown menu using the popover attribute. Style it with CSS and copy the accessible snippet. No JavaScript.

New

Popover API Demo - Online No‑JS Tooltips & Menus

Test the new HTML popover attribute for creating accessible tooltips, menus, and dialogs without JavaScript. Copy code snippets.

New

HTML to Text with Line Breaks - Online Just the Words

Convert HTML to plain text while preserving paragraph breaks. Remove images, links, and scripts. Quick data extraction.

New

Mailto Link Generator - Online HTML Email Link

Build a complex mailto: link with to, cc, bcc, subject, and body. Get the HTML anchor tag. Local.

New

HTML to SVG Converter - Online Render DOM to Vector

Paste an HTML snippet and convert it into an SVG image that visually replicates the DOM. Useful for creating static snapshots. Local canvas rendering.

New

HTML Attribute Remover - Online Clean Up Markup

Strip specific or all attributes from HTML tags. Clean up messy code. Keep the structure. Purely local.

New

Remove HTML Tags - Online Strip Code Cleaner

Paste HTML and instantly remove all tags, leaving only the text content. Optional keep line breaks. Quick cleaning.

New

HTML Headings Outline Generator - Online From Webpage

Enter a URL and see a nested list of all headings (h1‑h6). Check your document structure for SEO and accessibility. Pure fetch.

New

HTML to React JSX Converter - Online Quick Migration

Paste standard HTML and get a valid React JSX component. Converts class to className, inline styles, etc. Local transformation.

New

HTML to XML Converter - Online Markup Translator

Convert HTML code into well‑formed XML with proper self‑closing tags and attributes. Fixes common HTML5/XHTML mismatches. Local only.

New

CSV to HTML Table - Online Generate Responsive Code

Paste CSV and get a beautiful HTML table with sortable headers (optional). Copy the full HTML/CSS snippet. Local.

New

HTML Fragment to PDF - Online Print Custom Section

Write or paste an HTML snippet and generate a PDF using the browser's print engine. Customize page size and margins.

New

HTML Table to Markdown Converter - Online Quick Transform

Paste an HTML `<table>` snippet and instantly get a clean Markdown table. Supports colspan and alignment hints. Local.

String to Escaped HTML - Online Protect Against XSS

Instantly convert plain text into HTML‑safe escaped characters for secure display in web pages. Prevent cross‑site scripting. All processing local.

New

Text to Definition List - Online Term/Description HTML Maker

Enter terms and definitions and generate a clean `<dl>` HTML snippet. Great for glossaries and FAQs.

New

Text to Ordered List - Online Automatic Numbering HTML

Paste lines of text and automatically convert to an HTML ordered list with correct numbering and indentation.

New

HTML Minifier - Online Compress Web Pages

Reduce your HTML file size by stripping whitespace, comments, and optional closing tags. Secure browser‑based.

New

HTML Includes Previewer - Online Simulate SSI Includes

Paste multiple HTML snippets (header, footer) and a main content, then combine them into a single preview. Static site helper.

New

Screen Reader Test Snippet - Online Check HTML ARIA Labels

Paste an HTML snippet and see how a screen reader might interpret it. Highlights missing alt texts and ARIA misuses. Educational.

Email Signature Generator - Online Professional HTML Footer

Design a clean, professional email signature with your photo, links, and disclaimers. Copy the HTML to use in Gmail/Outlook.