Dlaczego AngularJS eliminuje atrybuty danych podczas używania ng-bind-html?

Question

Używam div elementu contentEditable, aby umożliwić użytkownikom formatowanie artykułów. Zajmuję się przetwarzaniem treści html i utrzymuję ją.

Używam ng-bind-html do renderowania wyniku, gdy widz chce przeczytać artykuł. Nie chcę używać $sce.trustAsHtml, ponieważ nadal chcę, aby AngularJS zdezynfekował dane wejściowe użytkownika i ponieważ nie mam zaufania do wszystkich danych wejściowych. Wszystko, czego chcę, to odkażanie AngularJS, aby umożliwić pewne atrybuty na elementach. Wydaje się, że usuwa identyfikatory i atrybuty danych. (ale zachowuje klasę i tytuł).

Czy atrybuty danych są uważane za szkodliwe? W jaki sposób atakujący może ich użyć do ataku na użytkownika końcowego? I czy istnieje sposób na ich bezpieczne użycie i niech Angular ich nie rozwiąże?

Oto przykład:

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> 

Oto co kątowe wyjścia wewnątrz znacznika artykułu (zawiadomienie okorowane data- atrybut):

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

Dzięki

Answer 1

Jak wspomniano w komentarzu , ng-bind-html przekazuje dane przez dezynfekcję. Ten środek dezynfekujący usuwa szereg atrybutów ze wszystkich wprowadzonych w nim danych wejściowych. Ten problem może pomóc wyjaśnić więcej: ngSanitize issue concerning whitelisting attributes. Ten part of the source code zawiera wszystkie atrybuty uważane za ważne, a zatem nie zostały nietknięte przez ngSanitize.

Answer 2

Podczas gdy załoga Angular i ngSanitize rozwiązuje ten problem, znalazłem this thread helpful, aby utworzyć obejście. W szczególności odpowiedź dotyczy dynamicznie zdefiniowanej właściwości Właściwość.

Wiązanie is-open z takiej nieruchomości, udało mi się dołączyć kliknij teleskopowe tagów kotwicznych po ngSanitize skończył odkażania.

Oto HTML po oczyszczeniu, pamiętaj, że używam cite do przechowywania docelowego identyfikatora zakotwiczenia, ponieważ jest to jeden z atrybutów, które ngSanitize ignoruje. (Można spróbować użyć href ale chciałem zostawić to w spokoju):

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

kod w seter dla właściwości (patrz odwołuje SO powyżej), a następnie manipuluje zdarzeń DOM, które moim zdaniem jest sprzeczne kątowej metodologia ale czasami trzeba przestać walić głową i zmusić go do pracy:

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

a następnie upewnij się, że masz odpowiednie zakotwiczenie z docelowym id #another_faq, w tym przypadku.