6

このような簡単なプレゼンテーションがあります

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

item.html には、次のような html が含まれています。

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

ただし、結果の html は画像をロードしません。

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

いくつかの検索の後、angularjs はクロスサイト スクリプティングを回避するためにこれを行っているように見えますが、YouTube から直接画像を読み込むことができました。

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

さらに、ng-bind-html-unsafe を使用してすべての画像を読み込むことができました。

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

ng-bind-html-unsafe を使用すると、ngSanitize モジュールはもう必要ありません。つまり、コードの安全性が低くなりますか? 外部ソースから画像をロードするユースケースがあります。

私の質問に来ます：

  1. 私が上で述べたこととは別に、ng-bind-html と ng-bind-html-unsafe の違いは何ですか。これに関するドキュメントはありますか？何も見つかりませんでした。

  2. unsafe ディレクティブを使用せずに、ホスト サーバーと外部サーバーからイメージをロードするにはどうすればよいですか?

ありがとう！

4

2 に答える 2

4

  1. あなたが言ったことにこれ以上付け加えることはありません。

    ng-bind-html(サービスを使用して) サニタイズされた後、HTML コンテンツを angular アプリにロードできます$sanitise。一方、ng-bind-html-unsafeサニタイズせずに HTML コンテンツを読み込むことができます。

    サニタイズ プロセスは、提供された HTML コンテンツの各要素を、既知の HTML タグ/要素のリストでチェックすることで構成されます。リストにないタグ/要素は削除されます。それとは別に、特定の HTML 属性 ( などsrc) にはさらにいくつかの検証があります。

    あなたの場合、AngularJSのURI正規表現と一致しないため、要素<img src="icons/youtube.png" alt="Youtube"/>には有効な属性がありません:src/^((ftp|https?):\/\/|mailto:|tel:|#)/

    詳細については、 ngBindHtml、ngBindHtmlUnsafe、および$sanitize (およびAngularJS ソース コード)を確認してください。

  2. 特に、読み込んでいる HTML を制御しない場合は、そうではないと思います。ngBindHtmlUnsafeドキュメントに記載されているように:

    ngBindHtml ディレクティブの制限が厳しすぎる場合、およびバインド先のコンテンツのソースを完全に信頼する場合にのみ、このディレクティブを使用する必要があります。

    つまり、ロードしている HTML コンテンツのソースを信頼することがすべてです。最後のケースでは、いつでも HTML コンテンツを自分で処理/「サニタイズ」できますが、特にコンテンツが動的である場合、それを達成するのは簡単ではないようです。

于 2013-01-16T23:34:31.683 に答える