Alternativa sicura a pericolosamenteSetInnerHTML

Question

Mi piacerebbe avere un blog dinamico sul mio sito (che utilizza React). Inizialmente, stavo per archiviare i post in HTML grezzo nel mio database e generare il contenuto utilizzando pericolosamenteSetInnerHTML. Sono comunque preoccupato per le implicazioni sulla sicurezza. Mentre la mia app non ha dati sensibili, non sono abbastanza esperto di XSS per conoscere tutti i pericoli che avrei aperto la mia app.

Sono curioso di sapere se esiste un modo performante e sicuro per caricare dinamicamente le pagine di blog all'interno della mia app. Sarebbe utile usare https://github.com/odysseyscience/react-router-proxy-loader in questo caso? Avere una cartella di post di blog JSX separata dal resto della mia app e caricarla utilizzando questo (ovviamente, non sono sicuro di come funziona react-router-proxy-loader).

Sono aperto a suggerimenti.

Grazie,

Kevin

Answer 1

Se XSS è la preoccupazione principale, è possibile utilizzare DOMPurify per disinfettare il codice HTML prima di inserirla nel DOM tramite dangerouslySetInnerHTML. Sono solo 10K minificati. And it works in Node too.

Answer 2

https://facebook.github.io/react/tips/dangerously-set-inner-html.html

"Il nome prop dangerouslySetInnerHTML viene scelto intenzionalmente da far paura. ..."

"Dopo aver compreso appieno le implicazioni di sicurezza e sanificazione correttamente i dati ..."

Immagino che se ti fidi del tuo CMS/Server (e non riceverai da una terza parte), che ha disinfettato i dati (anche questo passaggio è fatto), puoi inserire usando dangerouslySetInnerHTML.

Come diceva Morhaus, forse usare DOMPurify in quanto (bonus) probabilmente gestisce questo sfortunato bit: "così l'HTML fornito deve essere ben formato (cioè passare la validazione XML)." Sospetto che alcuni contenuti che utilizzano la versione non XML di HTML5 potrebbero essere altrimenti un problema. (Nota: non l'ho ancora usato io stesso, dato che sono nuovo come te.)

Answer 3

Se sei sicuro l'HTML di input è sicuro (senza rischio XSS) ma potrebbe essere malformato (ad es. casuale < nel testo), e si vuole evitare che la vostra applicazione di fallire a causa del cambiamento DOM inaspettato, allora si potrebbe provare questo:

function sanitize(html) { 
    var doc = document.createElement('div'); 
    doc.innerHTML = html; 
    return doc.innerHTML; 
} 

^{(Basato sul https://stackoverflow.com/a/14216406/115493)}

Ma se avete la il minimo dubbio che il tuo HTML potrebbe non essere-XSS-safe, u vedi DOMPurify come menzionato sopra.

Answer 4

Sono di fronte allo stesso problema e sono terminato con una soluzione migliore. se il vostro qualcosa di input come qui di seguito e soluzione funziona per voi utilizzando lodash

<em>paragraph text example:</em> 

mia soluzione:

import _ from 'lodash'; 

const createMarkup = encodedHtml => ({ 
    __html: _.unescape(encodedHtml), 
}); 

/* eslint-disable react/no-danger */ 
const Notes = ({ label }) => (
    <div> 
    <div dangerouslySetInnerHTML={createMarkup(label)} /> 
    </div> 
); 

Answer 5

Ho avuto un problema simile a reagire e sono imbattuto in un npm pacchetto html-react-parser che analizza il codice HTML nel tuo testo e rimuove gli script pericolosi che possono essere utilizzati per il dirottamento.