How to Keep a JSON Data Block from Ending Early

A JSON value can pass validation and still break when pasted inside an HTML script data block. If a string contains </script>, the HTML parser can close the element before your code reads the JSON. Preserve the value by preparing it for that HTML placement after formatting.

Check the JSON before embedding it

Use this fictional note to reproduce the problem.

{"note":"</script><p>Bring a pen</p>"}

1. Open the JSON Formatter and Validator and paste the example into Paste your JSON.
2. Choose 2 spaces under Indent. Leave Minify and Sort keys alphabetically unchecked, then press Format JSON.
3. Confirm that the output still contains the full note, including the closing script tag inside its string.

The current tool accepts this input and reports valid formatted JSON. Its output retains the literal angle brackets. The separate API example formatting guide covers reviewing field values and types before sharing a payload.

Understand why the HTML element ends early

A block with type="application/json" stores data for your code to read. That type does not stop the HTML parser from recognizing the closing script tag. With the unprepared example embedded as its content, the element text stops at {"note":". The following paragraph becomes page markup, and parsing the truncated text as JSON throws an error. The HTML standard defines both data blocks and script-content parsing. HTML script content rules

JSON serialization alone does not protect its output for every HTML placement. OWASP recommends using a serializer or encoder documented for the exact destination when JSON must be embedded. Use your framework’s documented JSON data-block helper when one is available. OWASP JSON embedding guidance

Serialize for the data block at the final output step

For this small JavaScript server example, serialize the object first, then replace every literal less-than sign with the JSON Unicode escape for that character.

const data = { note: "</script><p>Bring a pen</p>" };
const jsonForHtml = JSON.stringify(data).replace(/</g, "\\u003c");

The replacement string in the JavaScript source contains two backslashes so that its resulting value contains one literal backslash. The prepared JSON remains valid and recovers the same note when parsed. JSON permits this Unicode escape form for characters inside strings. JSON string escape rules

The resulting HTML data block for this example is shown below.

<script type="application/json" id="page-data">{"note":"\u003c/script>\u003cp>Bring a pen\u003c/p>"}</script>

Keep this preparation at the final serialization step. The formatter parses and rebuilds JSON, so running the prepared JSON through it again restores the literal less-than signs. Complete your content edits and formatting before preparing the HTML output.

Read back the value and compare it

After the data element exists, read its text and parse the JSON.

const restored = JSON.parse(
  document.getElementById("page-data").textContent
);
console.log(restored.note);

The result should be the original note, including its literal markup characters. In a local browser check, the prepared block preserved that exact value and created no paragraph from it. Check the actual rendered page too, since template processing can change the emitted content. Compare the recovered value with the original and confirm that the JSON remains entirely inside its data element.