Strumenti per sviluppatori · HTML WYSIWYG editor
Da DOM al markup: come la serializzazione innerHTML modella il HTML che ottieni
· Come funziona
html entità-html flusso di lavoro dello sviluppatore
Spiega le regole seguite dai browser quando si trasforma un albero DOM in una stringa HTML, dall'escape e dalle entità agli elementi void e alle virgolette degli attributi, e perché l'output dell'editor ha questo aspetto.
Perché <br> ritorna come <br /> in questo disinfettante
Un frammento di origine contenente `<br>` lascia questo disinfettante come `<br />`. Questo risultato non è la prova che ogni browser serializza HTML con una barra. È una scelta deliberata nel riscrittore di stringhe di ToolAcre, il cui ramo di elementi void emette uno spazio e una barra per gli elementi br e hr consentiti.
La distinzione impedisce una falsa spiegazione comune. La superficie visiva viene letta tramite innerHTML, ma l'origine copiata viene quindi tokenizzata e ricostruita dal codice dell'applicazione. Ciò che gli utenti ricevono riflette sia la stringa DOM creata dal browser sia le convenzioni di output più ristrette di ToolAcre, inclusi alias, attributi filtrati e tag bilanciati.
Inserimento di token e riscrittura della lista consentita: questa non è la serializzazione innerHTML del browser
Il tokenizzatore esegue la scansione dei caratteri senza costruire nodi DOM o chiamare DOMParser. Riconosce testo, commenti, dichiarazioni, tag di inizio, tag di fine e corpi di elementi di testo non elaborato. La sanificazione ripete quella sequenza piatta, mantenendo le strutture consentite, scartando involucri sconosciuti ed eliminando i contenitori pericolosi con il loro contenuto.
Di conseguenza, l'ortografia originale non viene preservata. I nomi in lettere miste diventano minuscoli; b diventa forte, i diventa em, strike e del diventano s, e ins diventa u. L'output viene rigenerato dai token accettati anziché restituito come sottostringa originale, quindi la formattazione dell'origine e i dettagli non supportati scompaiono in base alla progettazione.
Escape di testo e attributi normalizzando entità conosciute
Il testo viene prima decodificato dall'entità e poi nuovamente sottoposto a escape. Le e commerciali diventano `&`, i segni di minore e maggiore di diventano `<` e `>` e i caratteri di controllo proibiti svaniscono. Questo ordine mantiene stabile un `&` esistente tra i passaggi ripetuti invece di trasformarlo in `&amp;`.
I valori degli attributi seguono un percorso di escape più rigoroso che include anche virgolette doppie, virgolette singole, parentesi angolari e e commerciali. Le entità conosciute vengono decodificate prima che vengano emessi gli attributi accettati. I test individuano l'idempotenza per le query di testo e di collegamento, ma il codice non promette la conservazione dell'ortografia di ciascuna entità autoriale come un riferimento denominato rispetto a un riferimento numerico.
Elementi vuoti e tag di chiusura bilanciati nel riscrittore personalizzato
Solo br e hr sono entrambi consentiti e classificati come void nell'insieme di output. Non ricevono mai tag di chiusura. Per gli elementi consentiti non nulli, uno stack aperto registra l'annidamento. Una chiusura incrociata come forte intorno a em fa sì che gli elementi interni si chiudano per primi, producendo markup equilibrato anziché preservare un ordine malformato.
Gli elementi non chiusi vengono chiusi alla fine, mentre i tag di chiusura isolati vengono ignorati. Questa è la politica di bilanciamento del riscrittore, non un'implementazione completa del ripristino degli errori HTML5 del browser. La fonte stessa mette in guardia sulle differenze del parser, motivo per cui l’output non deve essere commercializzato come un disinfettante universale per input ostili.
Gli attributi sono consentiti e quotati; l'ordine di origine da solo non costituisce il contratto
Nessun sacchetto di attributi generici sopravvive. I paragrafi e i titoli non lo consentono; i collegamenti consentono href e titolo; le abbreviazioni consentono il titolo; le virgolette consentono di citare; gli elenchi ordinati consentono l'inizio e il tipo. Ogni valore emesso è racchiuso tra virgolette doppie e anche i collegamenti accettati ottengono `rel="noopener noreferrer nofollow"`.
L'ordine degli attributi segue i token accettati e il campo rel aggiunto, ma fare affidamento sull'ordine sarebbe fragile. Il significato risiede nei nomi e nei valori consentiti. Un inizio intero non valido viene eliminato, gli schemi href o citate non sicuri vengono rifiutati e gli attributi sconosciuti generano motivi di rimozione invece di diventare silenziosamente parte del markup pubblicato.
Esempio funzionante: trasferimento di uno snippet attraverso il disinfettante di ToolAcre
Prova `<B class="loud">A & B<br></B><a href="javascript:alert(1)">open</a>`. La classe viene rimossa, B viene mappata su strong, la e commerciale esistente rimane una e commerciale con escape, br si chiude automaticamente e il collegamento non sicuro perde il suo href pur mantenendo il testo del collegamento visibile.
La modalità Pretty source posiziona quindi gli elementi di blocco supportati sulle linee e sugli elementi secondari dell'elenco di rientri. Lascia insieme il contenuto in linea e preserva il testo all'interno di pre. La formattazione è un passaggio di leggibilità sull'output già riscritto; non è un secondo parser di sicurezza e non ripristina gli spazi bianchi rimossi dalla normalizzazione precedente.
Cosa non copre: serializzazione del browser, XML o XHTML
Questo articolo non descrive le garanzie di serializzazione del browser nativo, XMLSerializer, la sintassi XHTML o le regole facoltative dei tag di chiusura HTML in generale. Documenta le convenzioni osservabili in questo repository. Le attestazioni su ` ` in particolare vengono omesse perché la tabella delle entità locali, non un serializzatore generale del browser, determina i riferimenti denominati riconosciuti.
Il generatore di anteprime disinfetta ancora una volta e avvolge il frammento in un documento completo a tema luminoso. Copia HTML restituisce il frammento; Scarica HTML restituisce quel documento. Quelli sono artefatti intenzionalmente diversi. Leggere l'etichetta dell'azione prima di dare per scontato che un file scaricato sia identico in byte all'origine copiata.
Conclusione: il serializzatore è coerente, il tuo input no: riassume come prevedere l'output dell'editor e come l'editor HTML WYSIWYG di ToolAcre mostra ciò che il browser produce effettivamente
Prevedere ToolAcre seguendo le sue fasi: tokenizzare la stringa, decodificare le entità supportate, applicare alias di elementi e liste consentite, ispezionare gli URL, bilanciare i tag accettati, eseguire l'escape dell'output e, facoltativamente, stamparlo in modo carino. Quella sequenza spiega il risultato effettivo in modo più accurato rispetto a dire che innerHTML preserva o serializza semplicemente la fonte dell'autore.
Utilizzare la modalità sorgente per osservare la riscrittura con un piccolo dispositivo prima di elaborare una bozza lunga. Il disinfettante rifiuta i documenti superiori a 500,000 caratteri, quindi l'immissione di dimensioni eccessive fallisce anziché congelare la scheda. Mantieni la politica HTML della destinazione separata dal sottoinsieme volutamente compatto di questo editor.