ng wiążą-html nie ładuje obraz src

mam prostego przedstawienia, jak tong wiążą-html nie ładuje obraz src

<div id="{{item.id}}" ng-repeat="item in itemList"> 
     <div ng-bind-html="item.html"></div> 
</div>

item.html zawiera HTML jak poniżej:

<a href="http://www.youtube.com"><img src="icons/youtube.png" alt="Youtube"/></a>

Jednak wynikowy HTML nie Załaduj obraz:

<a href="http://www.youtube.com"><img alt="Youtube"/></a>

Po pewnym wyszukiwaniu wygląda jak angularjs robi to, aby uniknąć skryptów cross-site, ale byłem ab le, aby załadować obraz bezpośrednio z youtube.

<a href="http://www.youtube.com"><img src="http://img.youtube.com/vi/9bZkp7q19f0/0.jpg" alt="Youtube"/></a>

Co więcej, udało mi się załadować wszystkie obrazy za pomocą ng-bind-html-dangerous.

<div id="{{item.id}}" ng-repeat="item in itemList"> 
     <div ng-bind-html-unsafe="item.html"></div> 
    </div>

Jeśli używam ng-bind-html-niebezpieczne, nie muszę już moduł ngSanitize, czyli mój kod jest mniej bezpieczne? Mam przypadki użycia, w których ładuję obrazy ze źródeł zewnętrznych.

Jadąc do moich pytań:

Jaka jest różnica między NG-bind-html i oprócz tego, co już wspomniano powyżej ng-bind-html-niebezpieczne. Czy jest jakaś dokumentacja na ten temat? Nie mogłem znaleźć żadnego.
Jak wykonać ładowanie obrazów z serwera hosta i serwerów zewnętrznych, bez konieczności stosowania dyrektywy "niebezpieczne"?

Dzięki!

Źródło

2013-01-16 pkrish

Nie ma o wiele więcej do dodania do tego, co powiedziałeś.

ng-bind-html Umożliwia ładowanie treści HTML do aplikacji kątowej po jej oczyszczeniu (przy użyciu usługi $sanitise). Z drugiej strony, ng-bind-html-unsafe pozwala ładować dowolne treści HTML bez sanityzacji.

Proces dezynfekcji polega na sprawdzeniu każdego elementu dostarczonej zawartości HTML za pomocą listy dobrze znanych znaczników/elementów HTML. Każdy tag/element, którego nie ma na liście, jest następnie usuwany. Poza tym istnieje kilka innych walidacji na temat określonych atrybutów HTML (takich jak src).

W twoim przypadku element <img src="icons/youtube.png" alt="Youtube"/> nie posiada ważnego atrybutu src ponieważ nie pasuje URI regexp angularjs”: /^((ftp|https?):\/\/|mailto:|tel:|#)/

Aby uzyskać więcej informacji sprawdź ngBindHtml, ngBindHtmlUnsafe i $sanitize (i AngularJS source code)
Uważam, że nie ma ... szczególnie jeśli nie kontrolujesz HTML, w który ładujesz.Jak podano w dokumentacji ngBindHtmlUnsafe:

Należy wykorzystać tę dyrektywę tylko jeśli dyrektywa ngBindHtml jest zbyt restrykcyjne i kiedy absolutnie zaufać źródło treści jesteś wiązania.

Chodzi więc o zaufanie do źródła treści HTML, którą ładujesz. W ostatnim przypadku zawsze możesz sam/sam "oczyścić" treść HTML, ale nie wydaje się to łatwe, szczególnie jeśli zawartość jest dynamiczna.

Źródło

2013-01-16 23:34:31 bmleite

Wymieniłem URI z ikony/youtube.png do pełnego URL http: //localhost/test/icons/youtube.png i byłem w stanie wykorzystać NG-bind-html. Teraz zauważam kolejny dziwny efekt uboczny. Użycie wersji dezynfekowanej usuwa wewnętrzne informacje o stylu z elementu div zawartego w pliku item.html. – pkrish

Przejrzałem dokumenty $ sanitize i wygląda na to, że są zgodne z projektem. Ale nie rozumiem, dlaczego. – pkrish

Nenad odpowiedział na takie pytanie ostatnio. Poprzez wywołanie $ sce.trustAsHtml ($ scope.html) będziesz mógł oznaczyć kod HTML jako prawidłowy, aby ng-bind-html go zaakceptował. Nawet jeśli img src jest względny, a zatem w przeciwnym razie zostałby oznaczony jako nieważny.

You can find his post here

Źródło

2013-11-11 14:44:44

ng wiążą-html nie ładuje obraz src

Odpowiedz

Powiązane problemy