16521


サーバーサイドプログラムが生成した値をJavascriptに渡す際、直接scriptタグ内に変数を出力すべきか、<head>の<meta>タグのcontentとして持たせるべきか決めかねています。

具体例として、CSRF対策用のトークンを使って非同期通信などでデータを取得する際、最初は次のようにしてデータをHTMLに直接出力していました。

[code]

    <script>
    var config = {
        api_url: '<?php echo $apiUrl;?>',
        token: '<?php echo $csrfToken;?>',
    };
    </script>
    
[/code]

複数のリンクされたJSファイルからこの情報を利用するため、グローバル変数を定義する必要がありました。（ブラウザ要件によりconstは使えません）

しかし使用しているフレームワーク(Laravel)の[公式ドキュメント](http://laravel.com/docs/master/routing#csrf-
x-csrf-token)によるとこのような変数を用いず、<meta>のcontentを使うよう説明がありました。

[code]

    <meta name="csrf-token" content="<?php echo $token;?>">
    
    // jQueryでの使用例
    <script>
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    </script>
    
[/code]

たしかにこちらの方法のほうが書き換えられる心配が少ないのでグローバル変数を使うよりも綺麗にかけるので良いのですが、Javascript
の定数を宣言するために積極的に meta タグを利用すべきなのでしょうか？

似たものとして例を挙げると
APIサーバーのURL、認証用のアプリケーションIDやワンタイムパスワード、ログイン中のユーザーIDなどがあると思います。これらの値を複数のJSファイルで使いまわす可能性がある場合どのような形で定義すべきかのルールや傾向などありましたら教えて下さい。


CC BY-SA 3.0
2015-09-11T02:08:41.247
16497
2015-09-11T11:46:23.720
2015-09-11T09:08:30.097
8000
10083
question
javascript security
クライアント側のJavascriptにトークン等を渡したい時、どうやってHTMLに埋め込むべきか


うろ覚えですが「このデータはこれで送信しないとエラー扱いになる」というような  
厳密な規定の仕様は無かったような気がします…

metaタグや平文のjavascriptはそれぞれデータの持ち方に大きな違いが有ります。

「javascriptの変数だから」という切り分け方よりも  
その受け渡したい「データがどういった属性や性質等を持つか」によって  
適合しやすい方法へ切り分けるべきかと思います。

平文のjavascriptへの埋め込みはjavascriptでしか使わないデータや  
数式とかjavascriptの関数を埋め込むような使い方に向いています。

認証IDやトークン等は文字長が比較的少なく  
クライアント側javascript以外にサーバー側アプリケーションや  
ネットワーク間の機器(キャッシュサーバー等)も使用することが有ります。  
こういった言語や機械の垣根を超えた使われ方をする少量データで  
外部に漏れても殆ど困らないものはmetaタグに向いています。

漏れて困るセッションID等やサイト内のあちこちで横断的に使い回すデータならクッキーに。

項目数やデータ量が多い構造的なデータだとxmlかjsonで。

質問にある使い方で例文にある「URLとトークンIDの2つだけ」の埋め込みであれば  
metaタグに埋め込む方が適切だと思います。


CC BY-SA 3.0
2015-09-11T11:46:23.720
16521
2015-09-11T11:46:23.720
9262
16497
answer