title: Secure way of embedding json in a script tag
body: <p>Let's say I have following script tag in my html document: </p>
  
  <pre><code>&lt;script type="application/json" id="stuff"&gt;
      {
          "unicorns": "awesome",
          "abc": [1, 2, 3]
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>and I'm parsing this JSON in my application. Someone told me that ...</p>
  
  <blockquote>
    <p>This method of embedding json in a script tag has a potential security issue. Assuming the json data originated from user input, it is possible to craft a data member that will in effect break out of the script tag and allow direct injection into the dom. See here:</p>
  </blockquote>
  
  <pre><code>&lt;script type="application/json" id="stuff"&gt;
  {
      "unicorns": "awesome",
      "abc": [1, 2, 3],
      "badentry": "blah &lt;/script&gt;&lt;div id='baddiv'&gt;I should not exist.&lt;/div&gt;&lt;script type="application/json" id='stuff'&gt; ",
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>I need to embedd a JSON in a script tag, but I don't know how I should do that, without leaking security vulnerables.</p>
  
  <p>Thanks for helping.</p>