AngularJS上級編
- 6. HTMLの動的生成($compile)
- jQuery編
© 2014 Sub-Labohttp://jsfiddle.net/subuta/Em9Nd/
セレクトボックスの選択内容に
応じて、HTMLタグ(ラッパー)
を変更する。その後、現在の入
力値(_value)をもとにコンテナ
(#tag-container)内のHTMLを動
的に変更する。(赤)
インプットボックスの値
(_value)が変更された場合、
コンテナ(#tag-container)内の
HTMLを動的に変更する。(緑)
- 7. HTMLの動的生成($compile)
- jQuery編の補足
© 2014 Sub-Labohttp://jsfiddle.net/subuta/Em9Nd/
ちなみにこの方法だと、テキス
トボックス内にタグが入力され
るとそのまま評価されてしまい
ます。H1タグとか(赤)なら見た
目の問題で済みますが以下を入
力してみると。。。
<script>alert(“hello");</script>
!
よってこの方法の場合は、セキュ
リティの観点で対策が必要だと
いえます。
http://ja.wikipedia.org/wiki/クロスサイトスクリプティング
- 8. HTMLの動的生成($compile)
- AngularJS編
© 2014 Sub-Labohttp://jsfiddle.net/subuta/bqLkb/
セレクトボックスの選択内容に
応じて、HTMLタグ(ラッパー)
を変更する。その後、現在の
入力値(_value)をもとに
HTML(_html)を動的に変更す
る。(赤)
インプットボックスの値
(_value)が変更された場合、
HTML(_html)を動的に変更す
る。(緑)
- 9. HTMLの動的生成($compile)
- AngularJS編の補足
© 2014 Sub-Labohttp://jsfiddle.net/subuta/bqLkb/
AngularJSの場合は以下(赤)を
入力しても実行されません。
<script>alert(“hello");</script>
!
これは$sanitizeというモジュー
ルによって、危険なHTMLタグ
が無毒化(sanitize)されてから表
示されるように設計されている
ためです。
https://docs.angularjs.org/api/ngSanitize/service/$sanitize