Ferramentas para desenvolvedores · Editor HTML WYSIWYG
De DOM à marcação: como a serialização innerHTML molda o HTML que você obtém
· Como funciona
HTML entidades html fluxo de trabalho do desenvolvedor
Explica as regras que os navegadores seguem ao transformar uma árvore DOM de volta em uma string HTML, desde escape e entidades até elementos nulos e citações de atributos, e por que a saída do editor tem a aparência que tem.
Por que <br> volta como <br /> neste desinfetante
Um fragmento de origem contendo `<br>` deixa este desinfetante como `<br />`. Esse resultado não prova que todo navegador serialize HTML com uma barra. É uma escolha deliberada no reescritor de string de ToolAcre, cuja ramificação do elemento void emite um espaço e uma barra para os elementos br e hr permitidos.
A distinção impede uma explicação falsa comum. A superfície visual é lida por meio do innerHTML, mas a fonte copiada é então tokenizada e reconstruída pelo código do aplicativo. O que os usuários recebem reflete a string DOM criada pelo navegador e as convenções de saída mais restritas de ToolAcre, incluindo aliases, atributos filtrados e tags balanceadas.
Tokenização, reescrita da lista de permissões - isso não é serialização innerHTML do navegador
O tokenizer verifica caracteres sem construir nós DOM ou chamar DOMParser. Ele reconhece texto, comentários, declarações, tags iniciais, tags finais e corpos de elementos de texto bruto. A sanitização repete essa sequência simples, mantendo estruturas permitidas, desembrulhando invólucros comuns desconhecidos e suprimindo recipientes perigosos com seu conteúdo.
Consequentemente, a grafia original não é preservada. Nomes mistos tornam-se minúsculos; b torna-se forte, i torna-se em, strike e del tornam-se s, e ins torna-se u. A saída é regenerada a partir de tokens aceitos em vez de retornada como a substring original, portanto, a formatação de origem e os detalhes não suportados desaparecem por design.
Escapando texto e atributos enquanto normaliza entidades conhecidas
O texto é decodificado pela entidade primeiro e escapado novamente. Os e comerciais tornam-se `&`, os sinais de menor que e maior que tornam-se `<` e `>` e os caracteres de controle proibidos desaparecem. Esta ordem mantém um `&` existente estável em passagens repetidas, em vez de transformá-lo em `&amp;`.
Os valores dos atributos seguem um caminho de escape mais rigoroso que também coloca aspas duplas, aspas simples, colchetes angulares e e comercial. Entidades conhecidas são decodificadas antes que os atributos aceitos sejam emitidos. Os testes fixam a idempotência para consultas de texto e link, mas o código não promete a preservação da ortografia de cada entidade autoral, como uma referência nomeada versus numérica.
Elementos vazios e tags de fechamento balanceadas no reescritor personalizado
Somente br e hr são permitidos e classificados como void no conjunto de saída. Eles nunca recebem tags de fechamento. Para elementos permitidos não nulos, uma pilha aberta registra o aninhamento. Um fechamento cruzado, como forte ao redor deles, faz com que os elementos internos fechem primeiro, produzindo uma marcação equilibrada em vez de preservar a ordem malformada.
Os elementos não fechados são fechados no final, enquanto as tags de fechamento perdidas são ignoradas. Esta é a política de balanceamento do reescritor, não uma implementação completa da recuperação de erros do navegador HTML5. A própria fonte alerta sobre diferenciais do analisador, razão pela qual a saída não deve ser comercializada como um desinfetante universal de entrada hostil.
Os atributos são permitidos e citados; a ordem de origem por si só não é o contrato
Nenhum saco de atributos genérico sobrevive. Parágrafos e títulos não permitem nada; os links permitem href e título; abreviaturas permitem título; citações permitem citar; listas ordenadas permitem iniciar e digitar. Cada valor emitido é colocado entre aspas duplas e os links aceitos também ganham `rel="noopener noreferrer nofollow"`.
A ordem dos atributos segue os tokens aceitos e o campo rel adicionado, mas confiar na ordem seria frágil. O significado reside nos nomes e valores permitidos. Um início inteiro malformado é eliminado, esquemas inseguros de href ou de citação são recusados e atributos desconhecidos geram motivos de remoção em vez de se tornarem silenciosamente parte da marcação publicada.
Exemplo resolvido: percorrer um snippet através do desinfetante de ToolAcre
Experimente `<B class="loud">A & B<br></B><a href="javascript:alert(1)">open</a>`. A classe é removida, B é mapeado para forte, o e comercial existente permanece como um e comercial de escape, br torna-se autofechado e o link inseguro perde seu href, mantendo o texto do link visível.
O modo de origem bonito coloca os elementos de bloco suportados nas linhas e recua os filhos da lista. Ele deixa o conteúdo embutido junto e preserva o texto dentro do pré. A formatação é uma passagem de legibilidade sobre a saída já reescrita; não é um segundo analisador de segurança e não restaura espaços em branco removidos pela normalização anterior.
O que isso não cobre — navegador, serialização XML ou XHTML
Este artigo não descreve garantias de serialização do navegador nativo, XMLSerializer, sintaxe XHTML ou regras opcionais de tags de fechamento HTML em geral. Ele documenta as convenções observáveis neste repositório. As declarações sobre ` ` especificamente são omitidas porque a tabela de entidade local, e não um serializador de navegador geral, determina referências nomeadas reconhecidas.
O construtor de visualização limpa mais uma vez e envolve o fragmento em um documento completo com tema claro. Copiar HTML retorna o fragmento; Baixar HTML retorna esse documento. Esses são artefatos intencionalmente diferentes. Leia o rótulo da ação antes de assumir que um arquivo baixado é idêntico em bytes à fonte copiada.
Conclusão: o serializador é consistente, sua entrada não foi — resume como prever a saída do editor e como o editor ToolAcre HTML WYSIWYG mostra o que o navegador realmente produz
Preveja ToolAcre seguindo seus estágios: tokenizar a string, decodificar entidades suportadas, aplicar aliases de elementos e listas de permissões, inspecionar URLs, equilibrar tags aceitas, escapar da saída e, opcionalmente, imprimi-la. Essa sequência explica o resultado real com mais precisão do que dizer que o innerHTML simplesmente preserva ou serializa a fonte do autor.
Use o modo de origem para observar a reescrita com um pequeno acessório antes de processar um rascunho longo. O desinfetante recusa documentos acima de 500,000 caracteres, portanto, a entrada superdimensionada falha em vez de congelar a guia. Mantenha a política HTML do próprio destino separada do subconjunto deliberadamente compacto deste editor.