Qual è il modo migliore per gestire il contenuto html generato dall'utente che verrà visualizzato dal pubblico?

Question

Nella mia applicazione Web consento ai contenuti generati dagli utenti di essere pubblicati per il consumo pubblico simili a StackOverflow.

Qual è la migliore pratica per consegnarlo?

mie attuali misure per la gestione dei contenuti generati dagli utenti sono:

1. Io uso MarkItUp per consentire agli utenti un modo semplice per formattare il codice HTML.

2. Dopo che un utente ha presentato appenderci cambiamenti ho eseguito attraverso un HTML Sanitizer(scorrere fino alla bottem) che utilizza una lista bianca approccio.

3. Se il processo di sanitizzazione ha rimosso qualsiasi contenuto creato dall'utente, I non salva il contenuto. Ho quindi restituire il contenuto modificato con un messaggio di avviso , "Alcuni tag di contenuto illegali rilevati e rimosso ricontrollare il tuo lavoro e riprovare."

4. Se il contenuto passa attraverso il processo di sanificazione modo pulito, risparmio il contenuto HTML grezzo al database .

5. Quando si esegue il rendering sul client, solo passare l'html non elaborato dal db alla pagina .

Answer 1

Questo è un approccio del tutto ragionevole. Per le applicazioni tipiche sarà del tutto sufficiente.

La parte più difficile dell'HTML in white-listing è l'attributo style e embed/object. Esistono motivi legittimi per cui qualcuno potrebbe voler inserire gli stili CSS in un blocco altrimenti non attendibile di testo formattato o, ad esempio, un video di YouTube incorporato. Questo problema si presenta più frequentemente con i feed. Non ci si può fidare del blocco di testo arbitrario contenuto in una voce di feed, ma non si vuole spogliarsi, ad es. La sintassi che evidenzia CSS o video flash, perché ciò cambierebbe radicalmente il contenuto e potenzialmente confonderebbe chiunque lo leggesse. Dato che i CSS possono contenere cose pericolose come i comportamenti in IE, potresti dover analizzare il CSS se decidi di consentire l'attributo style. E con embed/object potresti aver bisogno di nomi host in white-list.

Addenda:

Nel peggiore dei casi, HTML fuga tutto in vista può portare a un'esperienza utente molto povera. È molto meglio usare qualcosa come uno dei parser HTML5 per passare attraverso il DOM con la tua whitelist. Questo è molto più flessibile in termini di presentazione dell'output igienizzato ai propri utenti.Si può anche fare cose come:

<div class="sanitized"> 
    <div class="notice"> 
    This was sanitized for security reasons. 
    </div> 
    <div class="raw"><pre> 
    &lt;script&gt;alert("XSS!");&lt;/script&gt; 
    </pre></div> 
</div> 

poi nascondere la roba .raw con i CSS, e utilizzare jQuery per associare un gestore di scegliere al .sanitizeddiv che alterna tra .raw e .notice:

CSS:

.raw { 
    display: none; 
} 

jQuery:

$('.sanitized').click(function() { 
    $(this).find('.notice').toggle(); 
    $(this).find('.sanitized').toggle(); 
}); 

Answer 2

La lista bianca è una buona mossa. Qualsiasi soluzione di lista nera è incline a far passare più di quanto dovrebbe, perché non riesci a pensare a tutto. Ho visto alcuni tentativi di usare le liste nere (ad esempio The Code Project), e se riescono a catturare tutto, in genere causano ancora problemi aggiuntivi come la sostituzione dei caratteri nel codice in modo che non possa essere utilizzato senza ripristinarlo manualmente prima .

Il metodo più sicuro sarebbe:

1. HTML codificare tutto il testo.

2. Abbina una serie di tag e attributi consentiti e decodifica quelli.

Uso di un'espressione regolare si può anche richiedere che ogni tag di apertura ha un tag di chiusura, in modo che un tag non chiusa non può rovinare la pagina.

Si dovrebbe essere in grado di farlo in qualcosa come dieci linee di codice, quindi il codice che hai collegato sembra eccessivamente complicato.