Help us understand the problem. What is going on with this article?

エスケープ処理とは

More than 1 year has passed since last update.

エスケープ処理

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

エスケープ処理とは

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

例えば

console.log('test1test2');

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

test1test2

となります。

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

例えば

test1
test2

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

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

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

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

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

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

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

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

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

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

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

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

これは避けたいですね。

まとめ

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

T_zou
日々ぶち当たるバグや不具合、知らない機能の備忘録として使ってます。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away