Strumenti per sviluppatori · HTML escaper di entità
Decodifica di entità HTML senza innerHTML: come funziona un decodificatore della tabella di ricerca
· Come funziona
html sicurezza codifica
Il trucco popolare di decodificare le entità assegnandole a innerHTML esegue l'input attraverso il parser HTML, che è esattamente ciò che non desideri. Questo post spiega l'approccio più sicuro basato su tabelle e come gestisce i riferimenti denominati, decimali ed esadecimali.
Il decodificatore che ha eseguito un <img onerror>: un caso concreto in cui "basta decodificarlo" è diventato l'esecuzione di uno script
L'input comune element.innerHTML = a una riga fa più che decodificare &. Se l'input contiene anche <img src=x onerror=...>, il browser crea un elemento immagine e un attributo del gestore eventi. A seconda di come il nodo è collegato e caricato, ciò può trasformare un collegamento di formattazione nell'esecuzione di uno script. Una stringa incollata tipo HTML dovrebbe rimanere dati quando l'unico compito è risolvere i riferimenti ai caratteri, non essere analizzata in un albero DOM.
Cosa fa effettivamente innerHTML con una stringa: analisi, creazione di elementi e attributi del gestore di eventi, non solo sostituzione di entità
innerHTML invoca il parser HTML: i tag diventano nodi, gli attributi acquisiscono il significato del browser e una successiva lettura di textContent elimina il markup dal risultato. Un tag <strong> che intendevi conservare come input letterale può svanire con la formattazione del testo. Un elemento staccato non è una garanzia generale di sicurezza; il codice spesso reinserisce quella sottostruttura o utilizza il risultato HTML altrove. Se devi visualizzare input non attendibili, assegna textContent e disinfetta solo quando scegli deliberatamente di eseguire il rendering di HTML.
L'approccio della tabella di ricerca: un'espressione regolare per &name;, &#NNN; e &#xHHH; e una mappa dai nomi ai caratteri
Il decodificatore di ToolAcre utilizza un'espressione regolare limitata per trovare un riferimento nel formato &name;, { o {. I riferimenti nominati vengono cercati in una pratica tabella esplicita, inclusi amp, lt, gt, virgolette e tipografia comune. Un nome sconosciuto viene lasciato così com'è scritto anziché indovinato. Questo approccio non crea elementi e non chiama alcun parser HTML; sostituisce semplicemente le sottostringhe riconosciute in una stringa. La tabella è deliberatamente un sottoinsieme, non tutti i riferimenti a caratteri con nome HTML.
Gestione di riferimenti numerici: analisi di punti di codice decimali ed esadecimali e conversione in stringhe, inclusi caratteri astrali
Per un riferimento numerico, analizza il decimale dopo &# o l'esadecimale dopo &#x, quindi trasforma il punto del codice numerico in un carattere con String.fromCodePoint. Un valore astrale come 0x1F600 produce un emoji, non due caratteri stampabili indipendenti. L'implementazione mappa anche i valori storici dell'intervallo di controllo Windows-1252 come fanno i browser; zero, i punti di codice surrogati e i valori superiori a U+10FFFF diventano un carattere sostitutivo. Questa gestione esplicita degli errori impedisce a un numero non valido di bloccare il decodificatore.
Esempio realizzato: decodificare una stringa che mescola &, © e 😀: ogni corrispondenza risolta dalla tabella o dal numero
Decodifica l'input letterale &, © e 😀: il primo riferimento esegue la mappatura attraverso la tabella denominata in &, il decimale 169 diventa © e l'esadecimale 1F600 diventa 😀. Includi un <img onerror="alert(1)"> grezzo accanto a loro. Il decodificatore restituisce la sequenza simile al tag come normali caratteri di stringa; non crea un'immagine né esegue un evento. Quando si inserisce il risultato in una pagina reale in un secondo momento, utilizzare un sink di testo sicuro anziché prendere la stringa decodificata e riassegnarla a innerHTML.
Cosa non farà l'approccio tabellare: riferimenti legacy senza punto e virgola e stranezze di recupero degli errori del parser, a meno che non siano implementati deliberatamente
L'approccio di ricerca non riproduce intenzionalmente le regole di ripristino senza punto e virgola legacy del parser HTML. &copia senza punto e virgola potrebbe rimanere intatta. La tabella con nome fisso omette inoltre molti degli oltre duemila riferimenti con nome HTML5. Tali limitazioni sono onesti compromessi per un piccolo decodificatore prevedibile; accettare solo riferimenti terminati espliciti evita di trattare la prosa arbitraria contenente una e commerciale come markup. Controlla i nomi supportati documentati dello strumento se è essenziale la compatibilità completa del browser.
Ciò che questo non copre: la sanificazione di HTML che intendi rendere, che è un problema diverso
La decodifica dei riferimenti non disinfetta HTML per la visualizzazione. Se il testo decodificato contiene una sequenza <script>, rimane pericoloso se una parte diversa di un'applicazione la inserisce successivamente come markup. Contesti come un attributo HTML, una stringa JavaScript e URL necessitano ciascuno della propria codifica e policy di output. ToolAcre restituisce testo; non può rendere sicuro un futuro insicuro.
Conclusione: tratta l'input come dati: come decodifica l'escape di entità HTML con una tabella di ricerca anziché con il parser HTML, in modo che l'input rimanga testo
Tratta l'input come dati. L'escape di entità HTML decodifica con una tabella e un'aritmetica di punti di codice, non con un trucco innerHTML, quindi i payload che sembrano markup rimangono caratteri inerti all'interno dello strumento. Prova i tre riferimenti, quindi controlla sia il testo decodificato sia il modo in cui prevedi di utilizzarlo in seguito: il limite di sicurezza viene perso se lo rianalizzi come HTML.