No Login Data Private Local Save

HTML Sanitizer API Demo - Online Safe Set HTML

7
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

Weather Emoji Interpreter - Online Translate Symbols to Text

Paste a string of weather emojis and get a written weather forecast. Fun and educational emoji tool.

New

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

Mermaid Diagram Renderer - Online Flowchart & UML Editor

Write Mermaid markdown and instantly see the rendered flowchart, sequence diagram, or Gantt chart. Copy SVG output. Browser-side rendering.

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

Random Bible Verse Generator - Online Daily Scripture

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

New

Encrypted Daily Journal - Online Private Diary

Write daily notes encrypted with a password. All data stored in your browser. Export as encrypted file. True privacy.

New

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

Sobriety Counter & Milestones - Online Recovery Tracker

Track days of sobriety with a motivational counter and milestone celebrations. Set quit date and see time elapsed in days, hours, minutes. Private & local.

New

Markdown to Email HTML - Online Newsletter Template

Write in Markdown and get clean, inline‑styled HTML suitable for emails. Pre‑designed templates included. Local conversion.

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

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

Code Syntax Highlighter - Online Beautiful Code Preview

Paste code and get a beautifully highlighted preview with line numbers. Supports many languages. Copy as HTML. Pure frontend.

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

Text to HTML Safe Converter - Online Escape for Web

Convert plain text into HTML‑safe strings by escaping <, >, &, and quotes. Insert into code safely. Local copy.

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

HTML Escape/Unescape Live Preview - Online Sandbox

Type raw HTML and see the escaped version, then see how it renders when unescaped. Understand encoding better.

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.

New

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

Local Password Breach Checker - Online k‑Anonymity

Tell if your password has appeared in data breaches without sending the full password. Uses hash prefix locally.

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.

New

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.