コピー2019.05.02Angularなどのフロントエンドフレームワークでは、多くの場合HTMLを出力しようとすると自動で文字列にエスケープするセキュリティシステムが組み込まれています。これをサニタイジングといい、クロスサイトスクリプティング(XSS)対策のためには必須です。Angularの場合は、Sanitizerというものがデフォルトでサニタイジングを行ってくれます。https://angular.io/api/core/Sanitizerとはいえ特に投稿フォームなどユーザーからの入力を表示する仕組みのないサイトの場合は、XSSのことを特に気にする必要はありません。それに、管理者側で用意したHTML文書をそのままビューにバインドさせたい場合などは、勝手なサニタイズはかえって迷惑です。ご安心ください、この自動サニタイズ処理、ちゃんとキャンセルできます。今回はAngularのtemplateにそのままHTML文書を表示する方法を書いていきます。この記事ではAngular7を扱っています。Angularはバージョンによってコードの書き方が大きく異なることがあります。AngularJSとの勘違いにご注意を!目次AngularでHTML文書をそのまま表示する参考リンクAngularでHTML文書をそのまま表示するやり方は簡単で、DomSanitizerオブジェクトのbypassSecurityTrustHtmlメソッドを使ってセキュリティ処理をパスさせる返り値のSafeHTNLオブジェクトをinnerHTMLプロパティにバインドだけです。[innerHTML]="safeHtml"></div>プロパティバインディングします。Binding)プロパティバインディングでHTMLタグを含む文字列にバインドした場合、デフォルトでサニタイズされる挙動を確認。逆に意図的にサニタイズさせない方法を説明する。そのクラスから生成されたインスタンス自身を指すものです。javaとかならthis,swiftだとまんまself...PHPCakePHP3のcontainとは?EagerLoadingを行う便利なメソッドCakePHP3のcontainメソッドは、EagerLoadingを自動で行ってくれる便利なメソッドです。CakePHP3のcontainメソッドは、引数に指定したアソシエーション先テーブルのデータを...MySQL【MySQL】日本語(ひらがな、カタカナ)を一文字でも含むレコードを取得する大したことはない内容ですが、ググっても分かりにくかったのでまとめます。...PHPMAMPでCakePHP3のローカル開発環境をサクッと構築!【PHP】CakePHP3を使った業務を行うことになり、さあ実行環境をどう作ろうかと考えていました。DockerかVagrantを使おうかなどとも考えていましたが、よく考えたら本番環境はLAMPだったのでMAMPを使ってささっと済ませることにしま...AWSCloud9でPython3環境構築入門!【AWS】PyQさんのおかげもあってPythonの文法や、簡単なWebアプリの開発周りについてはなんとなくわかってきました。なんでそろそろポートフォリオ作りたいなと思い、まずPyQから離れてプログラムを書き始めようと思ったわけです。...JavaScriptJavaScriptの非同期処理をできる限り正確に理解するプログラミング初心者が詰まりやすいポイントとして、非同期処理はよくあげられるかと思います。コメントをキャンセルメールアドレスが公開されることはありません。*サイト上に表示された文字を入力してください。【Swift】frameとboundsの違いは?UIViewにどう影響するのか【Swift】オプショナル型とは?4種類のアンラップ方法と共に解説!【Angular】html文書をエスケープしないでそのままtemplateに表示するアーカイブ2019年9月2019年5月2019年4月2019年3月2019年2月カテゴリーAngularAWSCSSDockerExcelJavaScriptMySQLPHPProgrammingPythonSwiftタイトルとURLをコピーしました。