エンジニアのひよこ_level10

【毎日更新!】新卒4年目エンジニアブログです!

【HTML】クロスサイトスクリプティング?なぜ文字をエスケープする必要があるのか【920日目】

文字をエスケープさせる?

HTMLを書くときに、ユーザーの文字入力はエスケープさせないといけないと聞いたことはありませんか。

Laravelで【{{ }}】をつかって、【{!! !!}】を使ってはいけないと言われたことはないですか。

SpringBootで【th:text】を使って、【th:utext】を使ってはいけないと言われたことはないですか。

これは何でしょうか。

エスケープするって?

<p>りんご</p>

このような文字があれば、

&lt;p&gt;りんご&lt;/p&gt;

このように変換します。

文字の意味

&lt;でも、ブラウザには<と表示されます。

ltは(less than) gtは(greater than)の略だったと思いますφ(・

でも、なぜこのようにする必要があるのでしょうか。

ユーザーの入力でタグが書かれたら困る。

例えば、<p></p>と書いたら、タグと捉えることが出来ます。

もし、Twitterのプロフィールやつぶやきがエスケープされなけば、
<p>りんご</p>と書いたら、pタグに囲まれた『りんご』という文字が表示されてしまいます。

<b>りんご</b>と書いたら、太字の『りんご』と表示されるかもしれません。

一見便利そうに見えるかも知れません。
でも、悪用することも出来てしまいます。

もし、Twitterで悪用したら・・・?

もし私が悪用するなら?

Twitter<script> タグを使います。

scriptタグを書いて、その中に自社の商品を買うようなプログラムを書きます。
するとどうでしょう。私のつぶやきを見た瞬間に、自社の商品をみんなが買うのです。

あるいは、無限Alertタグを書けば、その人はタイムラインを開いた瞬間に無限Alertが。

このように、ユーザーの入力で悪用が出来てしまいます。 なので、ユーザーの入力などはエスケープして文字にしてから、出力をすることで、スクリプトを書けないようにします。

一見便利に見えるスクリプト入力可能にすることも、悪用が出来てしまうので、気をつけましょうねφ(・