Ferramentas de desenvolvedor · HTML escapador de entidade
Decodificando entidades HTML sem innerHTML: como funciona um decodificador de tabela de consulta
· Como funciona
HTML segurança codificação
O truque popular de decodificar entidades atribuindo a innerHTML executa sua entrada por meio do analisador HTML, que é exatamente o que você não deseja. Esta postagem explica a abordagem mais segura baseada em tabela e como ela lida com referências nomeadas, decimais e hexadecimais.
O decodificador que executou um <img onerror> — um caso concreto onde 'apenas decodifique' se tornou execução de script
A entrada comum element.innerHTML = de uma linha faz mais do que decodificar &. Se a entrada também contiver <img src=x onerror=...>, o navegador criará um elemento de imagem e um atributo manipulador de eventos. Dependendo de como esse nó é anexado e carregado, isso pode transformar um atalho de formatação em execução de script. Uma string semelhante a HTML colada deve permanecer como dados quando a única tarefa é resolver referências de caracteres, e não ser analisada em uma árvore DOM.
O que o innerHTML realmente faz com uma string – análise, criação de elementos e atributos do manipulador de eventos, não apenas substituição de entidade
innerHTML invoca o analisador HTML: as tags se tornam nós, os atributos adquirem o significado do navegador e uma leitura textContent posterior remove a marcação do resultado. Uma tag <strong> que você pretendia preservar como entrada literal pode desaparecer como formatação de texto. Um elemento destacado não é uma garantia geral de segurança; o código geralmente reinsere essa subárvore ou usa o HTML resultante em outro lugar. Se você precisar exibir entradas não confiáveis, atribua textContent e sanitize somente quando você escolher deliberadamente renderizar HTML.
A abordagem da tabela de consulta — uma expressão regular para &name;, &#NNN; e &#xHHH;, e um mapa de nomes para caracteres
O decodificador de ToolAcre usa uma expressão regular limitada para encontrar uma referência no formato &name;, { ou {. As referências nomeadas são pesquisadas em uma tabela prática e explícita, incluindo amp, lt, gt, citações e tipografia comum. Um nome desconhecido é deixado como está escrito, em vez de adivinhado. Esta abordagem não cria elementos e não chama nenhum analisador HTML; ele simplesmente substitui substrings reconhecidas em uma string. A tabela é deliberadamente um subconjunto, nem todas as referências de caracteres nomeados HTML.
Tratamento de referências numéricas — análise de pontos de código decimais e hexadecimais e conversão deles em strings, incluindo caracteres astrais
Para uma referência numérica, analise decimal após &# ou hexadecimal após &#x e, em seguida, transforme o ponto de código numérico em um caractere com String.fromCodePoint. Um valor astral como 0x1F600 produz um emoji, não dois caracteres independentes para impressão. A implementação também mapeia valores históricos do intervalo de controle do Windows-1252 como os navegadores fazem; zero, pontos de código substitutos e valores acima de U+10FFFF tornam-se um caractere de substituição. Esse tratamento de erros explícito evita que um número inválido trave o decodificador.
Exemplo resolvido: decodificando uma string que mistura &, © e 😀 - cada correspondência resolvida a partir da tabela ou do número
Decodifique a entrada literal &, © e 😀: a primeira referência mapeia através da tabela nomeada para &, decimal 169 torna-se © e hexadecimal 1F600 torna-se 😀. Inclua um <img onerror="alert(1)"> bruto ao lado deles. O decodificador retorna essa sequência de aparência de tag como caracteres de string comuns; não cria uma imagem nem executa um evento. Ao colocar o resultado em uma página real posteriormente, use um coletor de texto seguro em vez de pegar a string decodificada e atribuí-la de volta ao innerHTML.
O que a abordagem de tabela não fará — referências herdadas sem ponto e vírgula e peculiaridades de recuperação de erros do analisador, a menos que seja implementada deliberadamente
A abordagem de pesquisa intencionalmente não reproduz as regras de recuperação herdadas sem ponto e vírgula do analisador HTML. © sem ponto e vírgula pode permanecer inalterado. A tabela com nome fixo também omite muitas das mais de duas mil referências nomeadas HTML5. Essas limitações são compensações honestas para um decodificador pequeno e previsível; aceitar apenas referências terminadas explícitas evita tratar a prosa arbitrária contendo um "e" comercial como marcação. Verifique os nomes suportados documentados da ferramenta se a compatibilidade total do navegador for essencial.
O que isso não cobre – higienização de HTML que você pretende renderizar, o que é um problema diferente
A decodificação de referências não limpa HTML para exibição. Se o texto decodificado contiver uma sequência <script>, continuará sendo perigoso se uma parte diferente de um aplicativo a inserir posteriormente como marcação. Contextos como um atributo HTML, uma string JavaScript e um URL precisam cada um de sua própria codificação e política de saída. ToolAcre retorna texto; não pode tornar seguro um futuro inseguro.
Conclusão: trate a entrada como dados - como o escapador de entidade HTML decodifica com uma tabela de pesquisa em vez do analisador HTML, para que sua entrada permaneça como texto
Trate a entrada como dados. HTML o escapador de entidade é decodificado com uma tabela e aritmética de ponto de código, não um truque innerHTML, portanto, cargas úteis com aparência de marcação permanecem caracteres inertes dentro da ferramenta. Experimente as três referências e, em seguida, inspecione o texto decodificado e como você planeja usá-lo em seguida: o limite de segurança será perdido se você analisá-lo novamente como HTML.