🚀

データバインディング機能でエスケープさせない方法

2023/04/20に公開

Webフロントエンドのフレームワークでデータバインディング機能利用時、デフォルトでは出力値がエスケープ処理(サニタイズ)される。
エスケープしないようにさせる方法のメモ(特別な理由がない限り利用非推奨)

React

  • dangerouslySetInnerHTML属性の利用

Vue.js

  • v-htmlディレクティブの利用
  • render関数におけるdomPropsdomPropsInnerHTMLの利用

Angular

  • 1.x系:ng-bind-htmlディレクティブの利用
  • 2.0以降:DomSanitizer.bypassSecurityTrustHtml関数の利用

参考・引用

詳解セキュリティコンテスト ~CTFで学ぶ脆弱性攻略の技術~
https://amzn.to/3lEAcgY

Discussion