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

evalのリスク

 普段はサーバーサイドですが、フロントエンドの仕事も少し増えたので、Javascript勉強中にevalすごく便利!と思ったら、とてもリスクがあることを知ったので、メモとして残しておこうと思いました。
 もうすでにネット上でたくさん情報は転がっているので、当たり前じゃん!というツッコミもあるかと思いますが。。。

やりたかったこと

以下のような仕組みを実装しようと試みました。

  • 動的にObjectのキーと値を生成する。
  • 生成したObjectにキーを指定して、値を取得する。

ダメな例

実証例のため、はちゃめちゃなコードですが、ご了承を。。。

ng.html
<body>
    名前:<input type="text" id="name" value="NG NAME"></input>
    年齢:<input type="text" id="age" value="NG AGE"></input>
    <input type="button" id="btn" value="送信"></input>
    <div id="output"></div>

    <script>
        window.addEventListener('DOMContentLoaded',function(){

            function init(){
                const ids = ['name', 'age'];
                const MyObj = {};

                // ids配列の値をidとして、各要素を取得。
                // idをMyObjのキーとして、要素の値を設定する。
                for(let i = 0, ilen = ids.length; i < ilen; i++){
                    const elm = document.getElementById(ids[i]);
                    eval('MyObj.'+ids[i]+'="'+elm.value+'";');
                    document.getElementById('output').textContent += eval('MyObj.'+ids[i]);
                }
                const btn = document.getElementById('btn');
                btn.addEventListener('click', init, false);
            }
            init();
        });
    </script>
</body>

初期表示時点ではこのような感じ。

eval_ng.png

下記のように入力して、送信。

eval_ng2.png

eval_ng3.png

これで任意のコードが実行できてしまう。。。

解決策

ブラケット構文を使用しましょう!

ok.html
    for(let i = 0, ilen = ids.length; i < ilen; i++){
        const elm = document.getElementById(ids[i]);
        MyObj[ids[i]] = elm.value;
        document.getElementById('output').textContent += MyObj[ids[i]];
    }

eval_ok1.png

変数に入っている値をキーとして使用できるのは、とても便利ですね。

evalはパフォーマンスにも影響があるそうなので、上記のリスクも踏まえるとevalを使用するのはなるべく避けた方がよさそうです!

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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした