XSS対策や"{{}}"などの表示の方法
アプリ制作教材アプリを作っているわけです。
サンプルアプリを作るのは楽しいのですが、多少は技術的説明を書かない訳には行かない訳で四苦八苦しています。
(ソースだけ寄越せという方も圧倒的に多いかもですが)
さて、説明だけならともかく、Angularに関係するようなコードやXSSスクリプトと疑われそうなソースを表示するのは、かなりマズいです。
特にAngular関係の部分はビルド自体通らないので絶対に対処しないとマズいです。
もっと良い方法があるかもしれませんが、対処の一例をご紹介です。
例１：html内に"{{strText1}}"を記述する必要があるがエラー扱いされる。
解説１：
"{{strText1}}"と言うのは、strText1と言う変数の内容をHTML上に自動的に表示させるための記述方法なのですが、それを説明するにはどうするか？と言う問題です。
今回は2つの変数、stSt="{{"とstEn="}}"を用意して、{{stSt}}strText1{{stEn}}と書きました。
例２：ソースコードの表示時にXSSスクリプトの疑いは避けたいが、面倒な事はしたくない。
解説２：
XSSスクリプトとはHTMLを動的に生成する際に、埋め込んだスクリプトまで実行し、色々と良からぬことが出来てしまうような、そんなコードです。
初めて知ったのですが、幸いにしてAngularにはこの対策をする方法がありまして、以下のような記述で避けることが出来ました。
①.ts側に"chp1_ts"と言う変数を用意して、ソースコードをセットする。
②.html側で以下のように記述する。
<p>タグの場合
<p [innerHTML]="chp1_ts"></p>
参考サイト
Angularでhtmlエスケープをせずにhtmlをそのまま表示させる
https://pgmemo.tokyo/data/archives/1899.html
