19

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

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

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

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

しかし使用しているフレームワーク(Laravel)の公式ドキュメントによるとこのような変数を用いず、<meta>のcontentを使うよう説明がありました。

<meta name="csrf-token" content="<?php echo $token;?>">

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

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

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

1
  • 「javascriptでグローバル変数を使うべきかmetaタグを使うべきか」では何をしたいのかがわからないと思い、タイトルを変更してみました。
    – unarist
    Commented 2015年9月11日 9:09

1 件の回答 1

4

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

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

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

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

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

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

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

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

2
  • CSRFトークンはJavascript以外からも利用されるのでmetaを利用するということですね。ちなみにAPIがJSONPを利用していてJavascript専用である場合でもそのAPIのURLにはmetaを使うべきなのでしょうか?また、scriptタグで設定用の変数を定義する場合は何らかの上書き防止の工夫をするべきでしょうか?
    – Nuages
    Commented 2015年9月12日 9:58
  • Nuages さん、Javascript専用であれば「Javascriptで使用する」と明示的になるので直接javascriptに埋め込む方が良いと思います。 固定値の変数(定数)を使い回す場合、変数名と設定場所を工夫することは多いですね。 普通の開発会社ではプロジェクトで開発する場合の共通のネーミングルールと設定する場所を開発標準で決めてあります。 javascriptでただの定数にそれ以上の上書き防止措置を取ることは、ほとんどありません。 Commented 2015年9月14日 10:03

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。