HTML_html/css_WEB-ITnose を動的にバインドする

Web フロントエンド開発では、特にコンテンツ管理システム (CMS: Content Management System) の略語) などで、バックエンドからの HTML 文字列を動的にバインドしたり、ページ DOM 表示に動的スプライシングしたりする必要に遭遇することがよくあります。ニーズはどこにでもあります。

angular の読者はまず ngBindHtml を思い浮かべるでしょう。そうです、angular は、innerHTML を使用して計算された式の結果を DOM にバインドするための命令を提供します。しかし、問題はそれほど単純ではありません。 Web セキュリティにおいて、XSS (クロスサイト スクリプティング、スクリプト インジェクション攻撃) は、Web アプリケーションにおける典型的なコンピュータ セキュリティ脆弱性です。 XSS 攻撃とは、実行可能なクライアント側コードを Web ページに挿入し、ブラウザーによって実行されて攻撃の目的を達成することを指し、攻撃が成功すると、ユーザーの機密情報が取得される可能性があります。ユーザー エクスペリエンスを変更し、ユーザーやその他の違法な行為を誘発し、場合によっては XSS 攻撃を、サーバーやデータベースへの SQL インジェクション攻撃、クリック ハイジャック、相対リンク ハイジャックなどの他の攻撃方法と組み合わせてフィッシングを実行することで、被害がもたらされます。巨大で、Web セキュリティの最大の敵でもあります。 Web セキュリティの問題の詳細については、ウィキ https://en.wikipedia.org/wiki/Cross-site_scripting を参照してください。

Angular では、追加された HTML コンテンツはデフォルトでは信頼されません。追加された HTML コンテンツについては、まず $sce.trustAsHtml を使用して、これが信頼できる HTML コンテンツであることを Angular に伝える必要があります。そうしないと、$sce:unsafe 例外エラーが発生します。

Error: [$sce:unsafe] Attempting to use an unsafe value in a safe context.

これは、単純な Angular リンクをバインドするデモです:

HTML:

JavaScript:

angular.module("com.ngbook.demo", []) .controller("DemoCtrl", ["$sce", function($sce) { var vm = this; var html = 'hello angular'; vm.html = $sce.trustAsHtml(html); return vm; }]);

単純な静的 HTML の場合、この問題は解決されます。ただし、複雑な HTML の場合、ここでの複雑さは、Angular の式と命令を含む HTML テンプレートを指します。これらの場合、大きな DOM 表示をバインドするだけでなく、Angular の強力な双方向バインディング メカニズムを取得することも期待されます。 ngBindHhtml は、双方向バインディングの $scope に関連付けられません。HTML に ngClick、ngHref、ngSHow、ngHide などの angular 命令がある場合、これらのボタンをクリックしても、バインディングの式は何も反応しません。式は更新されません。たとえば、最後のリンクを ng-href="demo.link" に変更しようとすると、リンクは解析されず、元の HTML 文字列が DOM に表示されたままになります。

Angular のすべての命令を有効にするには、コンパイルにプレリンクとポストリンクが含まれており、動作する前に特定の動作に関連付けられる必要があります。ほとんどの場合、コンパイルは angular の起動時に自動的にコンパイルされます。ただし、動的に追加されたテンプレートの場合は、手動でコンパイルする必要があります。 Angular は、この関数を実装するための $compile サービスを提供します。以下はより一般的なコンパイル例です:

HTML:

change

JavaScript:

angular.module("com.ngbook.demo", []) .directive("dyCompile", ["$compile", function($compile) { return { replace: true, restrict: 'EA', link: function(scope, elm, iAttrs) { var DUMMY_SCOPE = { $destroy: angular.noop }, root = elm, childScope, destroyChildScope = function() { (childScope || DUMMY_SCOPE).$destroy(); }; iAttrs.$observe("html", function(html) { if (html) { destroyChildScope(); childScope = scope.$new(true); var content = $compile(html)(scope); root.replaceWith(content); root = content; } scope.$on("$destroy", destroyChildScope); }); } }; }]) .controller("DemoCtrl", [function() { var vm = this; vm.html = '

hello : angular

'; vm.link = 'https://angular.io/'; var i = 0; vm.change = function() { vm.html = '

change after : ' + (++i) + '

'; }; }]);