web-dev-qa-db-ja.com

Ng-bind-html-unsafeを削除した状態で、どうすればHTMLを挿入できますか？

私は$sanitizeプロバイダーとng-bind-htm-unsafeディレクティブを使って私のコントローラーがDIVにHTMLを挿入できるようにしています。

しかし、私はそれを機能させることができません。

<div ng-bind-html-unsafe="{{preview_data.preview.embed.html}}"></div>

AngularJSから削除されたためです（ありがとう）。

しかしng-bind-html-unsafeがないと、このエラーになります。

http://errors.angularjs.org/undefined/$sce/unsafe

htmlangularjs
261
metalaureate
  1. Sanitize.jsがロードされていることを確認する必要があります。たとえば、 https://ajax.googleapis.com/ajax/libs/angularjs /[LAST_VERSION]/angular-sanitize.min.js からロードします。
  2. ngSanitizeにappモジュールを含める必要があります。例：var app = angular.module('myApp', ['ngSanitize']);
  3. 元のhtmlの内容をng-bind-htmlでバインドするだけです。あなたのコントローラーで他に何もする必要はありません。解析と変換はngBindHtmlディレクティブによって自動的に行われます。 （これに関するHow does it workセクションを読んでください： $ sce ）。したがって、あなたの場合は<div ng-bind-html="preview_data.preview.embed.html"></div>がその仕事をするでしょう。
119
p.matsinopoulos

Alexが提案しているように、スコープ内で関数を宣言するのではなく、単純なフィルタに変換できます。

angular.module('myApp')
    .filter('to_trusted', ['$sce', function($sce){
        return function(text) {
            return $sce.trustAsHtml(text);
        };
    }]);

それからあなたはこのようにそれを使うことができます：

<div ng-bind-html="preview_data.preview.embed.html | to_trusted"></div>

そして、これが実用的な例です： http://jsfiddle.net/leeroy/6j4Lg/1/ /

346
Leeroy Brun

他のコメントの1つとしてAngular 1.2.0 ...を使用していることを示しました。ng-bind-html-unsafeは推奨されていません。

代わりに、このようなことをしたいでしょう。

<div ng-bind-html="preview_data.preview.embed.htmlSafe"></div>

コントローラに$sceサービスをインジェクトし、HTMLを "trusted"としてマークします。

myApp.controller('myCtrl', ['$scope', '$sce', function($scope, $sce) {
  // ...
  $scope.preview_data.preview.embed.htmlSafe = 
     $sce.trustAsHtml(preview_data.preview.embed.html);
}

あなたは1.2.0-rc3またはそれ以降を使うことを望むでしょう。 （彼らは バグ "rc3の" - "ウォッチャー"が信頼できるHTML上で正しく動作するのを妨げていました。）

274
ijprest

私にとっては、最も簡単で柔軟な解決策は次のとおりです。

<div ng-bind-html="to_trusted(preview_data.preview.embed.html)"></div>

そしてあなたのコントローラに機能を追加します。

$scope.to_trusted = function(html_code) {
    return $sce.trustAsHtml(html_code);
}

コントローラの初期化に$sceを追加することを忘れないでください。

110
Alex

私の考えでは、これに対する最善の解決策はこれです。

  1. たとえばcommon.module.jsファイルに含めることができるカスタムフィルタを作成します - アプリケーション全体で使用されます。

    var app = angular.module('common.module', []);

// html filter (render text as html)
app.filter('html', ['$sce', function ($sce) { 
    return function (text) {
        return $sce.trustAsHtml(text);
    };    
}])

  2. 使用法：

    <span ng-bind-html="yourDataValue | html"></span>

さて、ng-bind-htmlディレクティブがその機能の一部としてtrustAsHtmlを使わないのはよくわかりません。

とにかく - それが私のやり方です - 67％の時間、それは常に効いています。

63
Paul

あなたがあなた自身の単純で安全でないhtml束縛を作成することができます、もちろんあなたがユーザー入力を使うならば、それはセキュリティ上のリスクである可能性があります。

App.directive('simpleHtml', function() {
  return function(scope, element, attr) {
    scope.$watch(attr.simpleHtml, function (value) {
      element.html(scope.$eval(attr.simpleHtml));
    })
  };
})
7
Jason Goemaat

Ng-bind-html-unsafeの中で{{}}を使う必要はありません。

<div ng-bind-html-unsafe="preview_data.preview.embed.html"></div>

ここに例があります： http://plnkr.co/edit/R7JmGIo4xcJoBc1v4iki?p=preview

{{}}演算子は、本質的にはng-bindの単なる簡略表現です。したがって、試していたのはバインディング内のバインディングに相当しますが、これは機能しません。

5
ksimons

厳密なコンテキストエスケープを完全に無効にして、ng-html-bindを使用してhtmlを挿入することができます。これは安全ではないオプションですが、テスト時に役立ちます。

AngularJSの$sce の例：

angular.module('myAppWithSceDisabledmyApp', []).config(function($sceProvider) {
  // Completely disable SCE.  For demonstration purposes only!
  // Do not use in new projects.
  $sceProvider.enabled(false);
});

上記のconfigセクションをあなたのアプリに添付することで、ng-html-bindにhtmlをインジェクトすることができます。

SCEを使用すると、コーディングのオーバーヘッドを少なくして、セキュリティ上の多くの利点を得ることができます。 SCEを無効にしたアプリケーションを使用して自分でセキュリティを保護するか、または後の段階でSCEを有効にすることは非常に困難です。 SCEが導入される前に作成された既存のコードが多数あり、それらを一度に1つのモジュールに移行している場合は、SCEを無効にすることをお勧めします。

2
Sean Fahey

あなたはこのようなフィルタを使うことができます

angular.module('app').filter('trustAs', ['$sce', 
    function($sce) {
        return function (input, type) {
            if (typeof input === "string") {
                return $sce.trustAs(type || 'html', input);
            }
            console.log("trustAs filter. Error. input isn't a string");
            return "";
        };
    }
]);

使用法

<div ng-bind-html="myData | trustAs"></div>

それは他のリソースタイプ、例えばiframeのソースリンクや他の宣言されたタイプに使用することができます ここ

2
BotanMan

私は同じような問題を抱えています。それでもgithubでホストされているマークダウンファイルからコンテンツを取得できませんでした。

App.jsで$ sceDelegateProviderにホワイトリスト（追加されたgithubドメインを含む）を設定した後、それは魅力のように働きました。

説明：別のURLからコンテンツを読み込む場合は、信頼できるものとしてラップする代わりにホワイトリストを使用してください。

ドキュメント： $ sceDelegateProvider および ngInclude （外部HTMLフラグメントの取得、コンパイルおよび組み込み用）

2
Lahmizzar