Descrição Overview Descripción
Útil para inserir trechos em HTML, templates e atributos sem quebrar o markup. O decode usa o DOM do navegador para entidades comuns.
Useful when embedding snippets in HTML, templates, and attributes. Decoding uses the browser DOM for common entities.
Útil al incrustar fragmentos en HTML y plantillas. La decodificación usa el DOM del navegador.
Detalhamento técnico
Os cinco caracteres que fundamentam a segurança HTML
- `<` (menor que) → `<`: É o caractere que inicia qualquer tag HTML. Sem escape, qualquer conteúdo dinâmico pode injetar tags arbitrárias. Deve ser sempre o primeiro caractere a ser escapado em texto não confiável.
- `>` (maior que) → `>`: Fecha tags. Embora browsers modernos tolerem `>` não escapado em alguns contextos, escapar consistentemente elimina uma classe de vetores de injeção sutis, como `</script>` dentro de blocos JavaScript inline.
- `&` (e comercial) → `&`: Inicia entidades HTML. Deve ser escapado antes dos outros — se você escapar `<` antes de `&`, pode acabar com `<` sendo reescapado para `&lt;`. A ordem correta é sempre: `&` primeiro.
- `"` (aspas duplas) → `"`: Crítico em atributos delimitados por aspas duplas. `<input value="{{userInput}}">` sem escape permite que o usuário insira `" onclick="alert(1)` e encerre o atributo prematuramente, injetando handlers de eventos.
- `'` (aspas simples) → `'`: Relevante em atributos delimitados por aspas simples. Menos comum em HTML5 (aspas duplas são o padrão), mas frequente em templates PHP, Django e Rails que às vezes usam aspas simples na geração dinâmica de atributos.
XSS persistente, refletido e baseado em DOM: três vetores de ataque
- XSS persistente (stored XSS): o payload malicioso é armazenado no banco de dados e exibido para todos os usuários que visitam a página. É o mais perigoso: um único post de fórum ou comentário de produto pode comprometer todos os visitantes. O worm Samy no MySpace foi stored XSS.
- XSS refletido: o payload vem de uma URL ou parâmetro e é refletido imediatamente na resposta. Exemplo: `https://site.com/busca?q=<script>roubarCookies()</script>`. Requer que a vítima clique no link malicioso, mas é trivial de distribuir via phishing ou encurtadores de URL.
- DOM-based XSS: o JavaScript do próprio site lê um valor de uma fonte não confiável (`location.hash`, `document.cookie`, `window.name`) e o escreve diretamente no DOM com `innerHTML` ou `document.write` sem sanitização. Não passa pelo servidor — ferramentas de análise server-side não detectam.
- Content Security Policy (CSP) é a segunda linha de defesa: um header HTTP que informa ao browser quais scripts são permitidos. `Content-Security-Policy: default-src 'self'` bloqueia scripts de outros domínios e inline scripts sem nonce. Não substitui o escape, mas mitiga impacto de XSS residual.
- XSS é diferente de CSRF (Cross-Site Request Forgery): XSS executa código no browser da vítima no contexto do site alvo; CSRF forja requisições autenticadas sem executar código. Ambos precisam de defesas separadas: escape + CSP para XSS, tokens CSRF para CSRF.
Technical deep dive
The five characters that underpin HTML security
- `<` (less than) → `<`: This is the character that opens any HTML tag. Without escaping, any dynamic content can inject arbitrary tags. It should always be the first character escaped in untrusted text.
- `>` (greater than) → `>`: Closes tags. While modern browsers tolerate unescaped `>` in some contexts, escaping consistently eliminates a class of subtle injection vectors, such as `</script>` inside inline JavaScript blocks.
- `&` (ampersand) → `&`: Starts HTML entities. It must be escaped before the others — if you escape `<` before `&`, you may end up with `<` being re-escaped to `&lt;`. The correct order is always: `&` first.
- `"` (double quote) → `"`: Critical in double-quote-delimited attributes. `<input value="{{userInput}}">` without escaping allows a user to enter `" onclick="alert(1)` and prematurely close the attribute, injecting event handlers.
- `'` (single quote) → `'`: Relevant in single-quote-delimited attributes. Less common in HTML5 (double quotes are the standard), but frequent in PHP, Django, and Rails templates that sometimes use single quotes in dynamic attribute generation.
Stored, reflected, and DOM-based XSS: three attack vectors
- Stored XSS (persistent): the malicious payload is stored in the database and displayed to every user who visits the page. It is the most dangerous: a single forum post or product comment can compromise all visitors. The Samy worm on MySpace was stored XSS.
- Reflected XSS: the payload comes from a URL or parameter and is reflected immediately in the response. Example: `https://site.com/search?q=<script>stealCookies()</script>`. Requires the victim to click the malicious link, but trivial to distribute via phishing or URL shorteners.
- DOM-based XSS: the site's own JavaScript reads a value from an untrusted source (`location.hash`, `document.cookie`, `window.name`) and writes it directly to the DOM with `innerHTML` or `document.write` without sanitization. It never touches the server — server-side analysis tools do not detect it.
- Content Security Policy (CSP) is the second line of defense: an HTTP header that tells the browser which scripts are allowed. `Content-Security-Policy: default-src 'self'` blocks scripts from other domains and inline scripts without a nonce. It does not replace escaping, but mitigates the impact of residual XSS.
- XSS is different from CSRF (Cross-Site Request Forgery): XSS executes code in the victim's browser in the context of the target site; CSRF forges authenticated requests without executing code. Both require separate defenses: escaping + CSP for XSS, CSRF tokens for CSRF.
Detalle técnico
Los cinco caracteres que fundamentan la seguridad HTML
- `<` (menor que) → `<`: Es el carácter que abre cualquier etiqueta HTML. Sin escape, cualquier contenido dinámico puede inyectar etiquetas arbitrarias. Debe ser siempre el primer carácter en escaparse en texto no confiable.
- `>` (mayor que) → `>`: Cierra etiquetas. Aunque los navegadores modernos toleran `>` sin escapar en algunos contextos, escaparlo sistemáticamente elimina una clase de vectores de inyección sutiles, como `</script>` dentro de bloques JavaScript inline.
- `&` (ampersand) → `&`: Inicia las entidades HTML. Debe escaparse antes que los demás: si escapas `<` antes que `&`, puedes terminar con `<` siendo reescapado a `&lt;`. El orden correcto es siempre: `&` primero.
- `"` (comillas dobles) → `"`: Crítico en atributos delimitados por comillas dobles. `<input value="{{userInput}}">` sin escape permite que el usuario introduzca `" onclick="alert(1)` y cierre el atributo prematuramente, inyectando manejadores de eventos.
- `'` (comilla simple) → `'`: Relevante en atributos delimitados por comillas simples. Menos común en HTML5 (las comillas dobles son el estándar), pero frecuente en plantillas PHP, Django y Rails que a veces usan comillas simples en la generación dinámica de atributos.
XSS persistente, reflejado y basado en DOM: tres vectores de ataque
- XSS persistente (stored XSS): el payload malicioso se almacena en la base de datos y se muestra a todos los usuarios que visitan la página. Es el más peligroso: un solo post de foro o comentario de producto puede comprometer a todos los visitantes. El gusano Samy en MySpace fue stored XSS.
- XSS reflejado: el payload viene de una URL o parámetro y se refleja inmediatamente en la respuesta. Ejemplo: `https://sitio.com/buscar?q=<script>robarCookies()</script>`. Requiere que la víctima haga clic en el enlace malicioso, pero es trivial distribuirlo via phishing o acortadores de URL.
- DOM-based XSS: el propio JavaScript del sitio lee un valor de una fuente no confiable (`location.hash`, `document.cookie`, `window.name`) y lo escribe directamente en el DOM con `innerHTML` o `document.write` sin sanitizar. Nunca pasa por el servidor: las herramientas de análisis server-side no lo detectan.
- Content Security Policy (CSP) es la segunda línea de defensa: un header HTTP que informa al navegador qué scripts están permitidos. `Content-Security-Policy: default-src 'self'` bloquea scripts de otros dominios y scripts inline sin nonce. No reemplaza el escape, pero mitiga el impacto del XSS residual.
- XSS es diferente de CSRF (Cross-Site Request Forgery): XSS ejecuta código en el navegador de la víctima en el contexto del sitio objetivo; CSRF falsifica peticiones autenticadas sin ejecutar código. Ambos requieren defensas separadas: escape + CSP para XSS, tokens CSRF para CSRF.
Guia da ferramenta Tool guide Guía de la herramienta
-
O que é HTML Linguagem de marcação de páginas: tags como
<p>, atributos e entidades. Caracteres especiais dentro de texto ou atributos precisam ser escapados para não serem interpretados como markup. -
O que são entidades HTML Representações como
<para<,&para&, etc., para inserir texto literal sem quebrar o documento. -
O que a ferramenta faz Converte texto para entidades (escape) ou decodifica entidades de volta ao texto.
-
Por que usar Inserir exemplos em documentação, templates, e-mails HTML ou atributos
valuesem executar acidentalmente tags.
-
What HTML is Markup for pages: tags like
<p>, attributes, and entities. Special characters inside text or attributes must be escaped so they are not parsed as markup. -
What HTML entities are Representations such as
<for<,&for&, etc., to insert literal text without breaking the document. -
What the tool does Converts text to entities (escape) or decodes entities back to text.
-
Why use it Embed examples in docs, templates, HTML email, or
valueattributes without accidentally running tags.
-
Qué es HTML Marcado para páginas: etiquetas como
<p>, atributos y entidades. Los caracteres especiales dentro de texto o atributos deben escaparse para no interpretarse como marcado. -
Qué son las entidades HTML Representaciones como
<para<,&para&, etc., para insertar texto literal sin romper el documento. -
Qué hace la herramienta Convierte texto a entidades (escape) o decodifica entidades de vuelta a texto.
-
Por qué usarla Incrustar ejemplos en docs, plantillas, correo HTML o atributos
valuesin ejecutar etiquetas por error.
Exemplo de Código Code Snippets Fragmentos de Código
// ERRADO: escapar < antes de & pode criar double-escape
// Input: '<b>'
// Passo 1 (< → <): '<b>'
// Passo 2 (& → &): '&lt;b>' ← double-escape!
// CORRETO: & sempre primeiro
function escapeHtml(str) {
return String(str)
.replace(/&/g, '&') // 1. & PRIMEIRO
.replace(/</g, '<') // 2. <
.replace(/>/g, '>') // 3. >
.replace(/"/g, '"') // 4. "
.replace(/'/g, '''); // 5. '
}
// Exemplos:
console.log(escapeHtml('<script>alert(1)</script>'));
// → <script>alert(1)</script>
console.log(escapeHtml('5 < 10 & "dois" > \'um\''));
// → 5 < 10 & "dois" > 'um'import DOMPurify from 'dompurify';
// Básico: remove tudo perigoso, mantém formatação
const htmlSeguro = DOMPurify.sanitize(htmlEntrada);
// Restritivo: apenas texto e formatação básica
const apenasTexto = DOMPurify.sanitize(htmlEntrada, {
ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'p', 'br'],
ALLOWED_ATTR: [],
});
// Com links permitidos (mas javascript: bloqueado)
const comLinks = DOMPurify.sanitize(htmlEntrada, {
ALLOWED_TAGS: ['a', 'p', 'strong', 'em', 'ul', 'ol', 'li'],
ALLOWED_ATTR: ['href', 'title', 'target'],
FORBID_ATTR: ['onerror', 'onload', 'onclick'],
});
// Verificar se o input foi modificado pela sanitização:
const original = '<p onclick="alert(1)">Texto</p>';
const limpo = DOMPurify.sanitize(original);
console.log(original === limpo); // false → input continha conteúdo malicioso// WRONG: escaping < before & can create double-escaping
// Input: '<b>'
// Step 1 (< → <): '<b>'
// Step 2 (& → &): '&lt;b>' ← double-escaped!
// CORRECT: & always first
function escapeHtml(str) {
return String(str)
.replace(/&/g, '&') // 1. & FIRST
.replace(/</g, '<') // 2. <
.replace(/>/g, '>') // 3. >
.replace(/"/g, '"') // 4. "
.replace(/'/g, '''); // 5. '
}
// Examples:
console.log(escapeHtml('<script>alert(1)</script>'));
// → <script>alert(1)</script>
console.log(escapeHtml('5 < 10 & "two" > \'one\''));
// → 5 < 10 & "two" > 'one'import DOMPurify from 'dompurify';
// Basic: removes everything dangerous, keeps formatting
const safeHtml = DOMPurify.sanitize(inputHtml);
// Restrictive: only text and basic formatting
const textOnly = DOMPurify.sanitize(inputHtml, {
ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'p', 'br'],
ALLOWED_ATTR: [],
});
// With links allowed (but javascript: blocked)
const withLinks = DOMPurify.sanitize(inputHtml, {
ALLOWED_TAGS: ['a', 'p', 'strong', 'em', 'ul', 'ol', 'li'],
ALLOWED_ATTR: ['href', 'title', 'target'],
FORBID_ATTR: ['onerror', 'onload', 'onclick'],
});
// Check if input was modified by sanitization:
const original = '<p onclick="alert(1)">Text</p>';
const clean = DOMPurify.sanitize(original);
console.log(original === clean); // false → input contained malicious content// MAL: escapar < antes de & puede crear doble escape
// Input: '<b>'
// Paso 1 (< → <): '<b>'
// Paso 2 (& → &): '&lt;b>' ← ¡doble escape!
// BIEN: & siempre primero
function escapeHtml(str) {
return String(str)
.replace(/&/g, '&') // 1. & PRIMERO
.replace(/</g, '<') // 2. <
.replace(/>/g, '>') // 3. >
.replace(/"/g, '"') // 4. "
.replace(/'/g, '''); // 5. '
}
// Ejemplos:
console.log(escapeHtml('<script>alert(1)</script>'));
// → <script>alert(1)</script>
console.log(escapeHtml('5 < 10 & "dos" > \'uno\''));
// → 5 < 10 & "dos" > 'uno'import DOMPurify from 'dompurify';
// Básico: elimina todo lo peligroso, mantiene el formato
const htmlSeguro = DOMPurify.sanitize(htmlEntrada);
// Restrictivo: solo texto y formato básico
const soloTexto = DOMPurify.sanitize(htmlEntrada, {
ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'p', 'br'],
ALLOWED_ATTR: [],
});
// Con enlaces permitidos (pero javascript: bloqueado)
const conEnlaces = DOMPurify.sanitize(htmlEntrada, {
ALLOWED_TAGS: ['a', 'p', 'strong', 'em', 'ul', 'ol', 'li'],
ALLOWED_ATTR: ['href', 'title', 'target'],
FORBID_ATTR: ['onerror', 'onload', 'onclick'],
});
// Verificar si el input fue modificado por la sanitización:
const original = '<p onclick="alert(1)">Texto</p>';
const limpio = DOMPurify.sanitize(original);
console.log(original === limpio); // false → el input contenía código maliciosoAntes / depois Before / after Antes / después
<script> → <script>Perguntas frequentes FAQ Preguntas frecuentes
Para que serve esta ferramenta?
What is this tool for?
¿Para qué sirve esta herramienta?
Ela roda 100% no seu navegador: útil para validar, formatar ou converter dados no dia a dia de desenvolvimento.
It runs fully in your browser: useful to validate, format, or convert data in everyday development.
Funciona por completo en tu navegador: sirve para validar, formatear o convertir datos en el día a día.
Meus dados são enviados a algum servidor?
Are my inputs sent to a server?
¿Se envían mis datos a algún servidor?
O processamento é feito localmente via JavaScript. Não armazenamos o conteúdo que você cola nas caixas de texto.
Processing happens locally with JavaScript. We do not store what you paste into the text areas.
El procesamiento es local con JavaScript. No almacenamos lo que pegas en los campos de texto.
Posso usar em produção ou para dados reais?
Can I use this for real production data?
¿Puedo usarlo con datos reales en producción?
Use por sua conta e risco. Para segredos (senhas, tokens), prefira ambientes controlados e políticas da sua empresa. E lembre sempre de revisar os conteúdos gerados. Nunca confie cegamente nas coisas que vê na internet.
Use at your own risk. For secrets (passwords, tokens), prefer controlled environments and your company policies. And always review the generated contents. Never trust blindly things you see on the internet.
Úsalo bajo tu responsabilidad. Para secretos (contraseñas, tokens), prefiere entornos controlados y políticas internas. Recuerda de revisar los contenidos generados. Nunca confies ciegamente en cosas que ves en internet.