JSONをサーバーとフロント側で安全に共有する

  • 90
    いいね
  • 5
    コメント

こんな感じかなと思いつつ、ベスト・プラクティスってありますか?

追記: @ngyuki さんがコメントしてくださったものの方がよさそうなのでそちらを紹介しておきます

属性値として設定してHTML escapeする

server
this.render("index", {
  initialData: JSON.stringify(initialData)
});
handlebars
<script id="initial-data" type="text/plain" data-json="{{initialData}}"></script>
browser
var initialState = JSON.parse(document.getElementById('initial-data').getAttribute('data-json'));

  • 最初に書いていたもの

JSON.stringifyしたのをscriptタグ内に入れつつscriptタグを閉じられるのを防ぐために</をエスケープする

  • server(node)
this.render("index", {
  initialData: JSON.stringify(initialData).replace(/<\//g, '<\\/')
});
<!-- handlebars -->
<script id="initial-data" type="application/json">{{{initialData}}}</script>
  • browser
var initialState = JSON.parse(document.getElementById('initial-data').innerText);

Reactでserver-side-renderingしようとする時に必要になったので...