<p data-line="0" class="code-line">Webフロントエンドのフレームワークでデータバインディング機能利用時、デフォルトでは出力値がエスケープ処理（サニタイズ）される。<br>
エスケープしないようにさせる方法のメモ（特別な理由がない限り利用非推奨）</p>
<h1 id="react" data-line="4" class="code-line">
<a class="header-anchor-link" href="#react" aria-hidden="true"></a> React</h1>
<ul data-line="5" class="code-line">
<li data-line="5" class="code-line">
<code>dangerouslySetInnerHTML</code>属性の利用</li>
</ul>
<h1 id="vue.js" data-line="7" class="code-line">
<a class="header-anchor-link" href="#vue.js" aria-hidden="true"></a> Vue.js</h1>
<ul data-line="8" class="code-line">
<li data-line="8" class="code-line">
<code>v-html</code>ディレクティブの利用</li>
<li data-line="9" class="code-line">
<code>render</code>関数における<code>domProps</code>や<code>domPropsInnerHTML</code>の利用</li>
</ul>
<h1 id="angular" data-line="11" class="code-line">
<a class="header-anchor-link" href="#angular" aria-hidden="true"></a> Angular</h1>
<ul data-line="12" class="code-line">
<li data-line="12" class="code-line">1.x系：<code>ng-bind-html</code>ディレクティブの利用</li>
<li data-line="13" class="code-line">2.0以降：<code>DomSanitizer.bypassSecurityTrustHtml</code>関数の利用</li>
</ul>
<h1 id="%E5%8F%82%E8%80%83%E3%83%BB%E5%BC%95%E7%94%A8" data-line="15" class="code-line">
<a class="header-anchor-link" href="#%E5%8F%82%E8%80%83%E3%83%BB%E5%BC%95%E7%94%A8" aria-hidden="true"></a> 参考・引用</h1>
<p data-line="17" class="code-line">詳解セキュリティコンテスト ~CTFで学ぶ脆弱性攻略の技術~<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__30fe4f4ddf001" src="https://embed.zenn.studio/card#zenn-embedded__30fe4f4ddf001" data-content="https%3A%2F%2Famzn.to%2F3lEAcgY" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://amzn.to/3lEAcgY" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://amzn.to/3lEAcgY</a></p>


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

angular

React

Vue.js

Angular

参考・引用

Discussion