Perché AngularJS esclude gli attributi dati quando si utilizza ng-bind-html?

Question

Sto utilizzando un div ContentEditable per consentire agli utenti di formattare i loro articoli. Faccio qualche elaborazione sul contenuto html e lo mantengo.

Sto usando ng-bind-html per rendere il risultato quando gli spettatori vogliono leggere l'articolo. Non voglio usare $sce.trustAsHtml perché voglio ancora che AngularJS disinfetti l'input dell'utente e perché non mi fido di tutti gli input. Tutto quello che voglio è per la sanitizzazione di AngularJS per consentire alcuni attributi sugli elementi. Sembra striscia ID e attributi dei dati. (ma mantiene classe e titolo).

Gli attributi dei dati sono considerati dannosi? Come può un utente malintenzionato usarli per attaccare l'utente finale? E c'è un modo per usarli in sicurezza e lasciare che Angular non li tolga?

Ecco un esempio:

article.body = '<p data-guid="afasfa-afasfafas-faf-asasf" class="guid-tagged">Yes this is my article</p>'; 
<article ng-bind-html='article.body'></article> 

Ecco cosa uscite angolari all'interno del tag articolo (notare il spogliato fuori dati- attributo):

<p class="guid-tagged">Yes this is my article</p> 

Grazie

Answer 1

Come accennato nel commento , ng-bind-html passa i dati attraverso un disinfettante. Questo disinfettante rimuove un numero di attributi da tutti gli input passati. Questo problema può aiutare a spiegare di più: ngSanitize issue concerning whitelisting attributes. Questo part of the source code include tutti gli attributi considerati validi e pertanto non viene modificato da ngSanitize.

Answer 2

Mentre l'equipaggio Angular e ngSanitize risolve questo problema, ho trovato this thread helpful per creare una soluzione alternativa. In particolare, la risposta si riferisce a una proprietà dinamicamente definita .

Associazione a is-open con una tale proprietà, sono stato in grado di collegare i gestori cliccare sul tag di ancoraggio dopo ngSanitize aveva finito di sanificazione.

Ecco l'HTML dopo essere stato disinfettato, nota che sto usando cite per memorizzare l'id di ancoraggio di destinazione poiché è uno degli attributi che ngSanitize ignora. (Si potrebbe provare a utilizzare il href ma ho voluto lasciare che da sola):

Please see <a href='#' cite='#another_faq'>here</a>

Il codice nel setter della proprietà (si veda il riferimento SO sopra) poi manipola gli eventi DOM che credo sia in contrasto con la metodologia angolare, ma a volte è necessario smettere di sbattere la testa e farlo funzionare:

if (isOpened) $('p.faq.answer').eq(item.position).find('a[cite]').each -> $(this).bind 'click',() -> $($(this).attr('cite')).click()

e quindi assicurarsi di avere l'ancora adeguata con l'obiettivo di id #another_faq, in questo caso.