Edited at

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

More than 3 years have passed since last update.

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

追記: @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しようとする時に必要になったので...