JavaScript
HTML5

エスケープ処理とは

エスケープ処理

エスケープ処理をしないと、セキュリティが、、、とはよく聞くものの、なんじゃそりゃ状態だったので、調べてみました。

エスケープ処理とは

特殊文字や記号を一定の規則に従って別の文字に置き換えること
参考:エスケープ処理とは

例えば

console.log('test1test2');

このようなコードを実行した場合、出力結果は

test1test2

となります。

これを、アレンジして出力したいとします。

例えば

test1
test2

と表示したいと思い、下記を実行してみました。すると、どうなるでしょう。

console.log('test1
test2');
Uncaught SyntaxError: Invalid or unexpected token

エラーが出てしまいました。

キーボードで入力した改行が、コード上の文字列には反映されず、PCに改行するという行動の指示にしかならなかったからです。

改行の他にも、'(シングルクウォーテーション)や"(ダブルクウォーテーション)などもエスケープすることによって

console.log('I'm Taro.');

このようなコードもエラーを吐くことなく実行できるようになります。

なぜエスケープする必要があるのか

とはいえ、別に出力結果を改行する必要なかったり、シングルクウォーテーションの中にシングルクウォーテーションを入れる必要がなければ、いらないのでは?と思う方もいるかもしれません。

私も最初はそう思いました。普通にjs書いてる分には必要ないかなと。

では、次のような状況の時を考えてみましょう。

ページ内にユーザが入力するフォームを設置しました。
エスケープ処理をしないとどういう危険性があるか。
文字を入力するところに、コードを書くことができ、最悪の場合サイトを壊されてしまいます。

これは避けたいですね。

まとめ

というわけで、エスケープ処理とは文字を変換することであり、入力フォームが悪用されないための最低限のセキュリティ対策であることがわかりました。
この記事は、私がわからないことを調べた備忘録です。もし、なにか間違っていたり、エスケープ処理をするにあたり気をつけたほうがよい注意点等ありましたらコメントいただきたいです。