Escape html comments in json #408
Conversation
mpkorstanje
force-pushed
the
fix-escape-html-in-json
branch
4 times, most recently
from
bfd7716 to
2f8f853
Compare
In brief, explained in more detail by Jon Surrel[1], both `</script>` and `<!--` are interpreted by the html render. We caught the first one, but not the second. The W3C recommendation is to escape the `<` instead with `\x3C`[2]. 1. https://sirre.al/2025/08/06/safe-json-in-script-tags-how-not-to-break-a-site/ 2. https://html.spec.whatwg.org/multipage/scripting.html#restrictions-for-contents-of-script-elements
mpkorstanje
force-pushed
the
fix-escape-html-in-json
branch
from
2f8f853 to
fdbb90c
Compare
mpkorstanje
requested review from
clrudolphi,
davidjgoss,
gasparnagy and
luke-hill
|
👋 I'm glad you found the post helpful and acted on it! I should mention an error in the post that could affect this change. In short, I'd recommend using the Unicode escape sequence I have updated the post and added a note about the different escape sequences.
eval( String.raw`"\x3C"` )
// '<'
JSON.parse( String.raw`"\x3C"` )
// Uncaught SyntaxError: Bad escaped character in JSON at position 2 (line 1 column 3)
eval( String.raw`"\u003C"` )
// '<'
JSON.parse( String.raw`"\u003C"` )
// '<'Depending on how the JSON is used, that may be fine. For example, printing the JSON as a JavaScript object means that the JSON strings are just JavaScript strings: <!DOCTYPE html>
<script>
console.log(
// raw printed JSON vvvvvv
`The "\x3C" character: ${ "\x3C" }`
)
</script>Or if the JSON is a string literal in JavaScript, that's also likely fine: <!DOCTYPE html>
<script>
console.log(
// printed JSON in JavaScript string vvvvvv
`The "\x3C" character: ${ JSON.parse( '"\x3C"' ) }`
)
</script>However if the JSON is actually expected to be JSON, then hex escapes like <script type="application/json">
"\x3C"
</script>
<script>
console.log(
JSON.parse( document.querySelector( 'script' ).textContent )
)
</script>While this is just fine with the Unicode escape sequence: <script type="application/json">
"\u003C"
</script>
<script>
console.log(
JSON.parse( document.querySelector( 'script' ).textContent )
)
</script> |
|
Cheers! The pro-active follow up is much appreciated. How did you even find us? 😄
This is the case that applies to us. We're filling in this part of the template with a comma separated list of json objects. So on evaluation that's all JavaScript. Though we should probably rename the |
Referrer traffic in my stats. A benefit of your nicely linking to my post (thank you) is that I get insight and can follow up like this. |
4 participants
🤔 What's changed?
In brief, explained in more detail by Jon Surrel[1], both
</script>and<!--are interpreted by the html render. We caught the first one, but not the second.The W3C recommendation is to replace the
<with\x3C[2] instead of escaping the/.🏷️ What kind of change is this?
📋 Checklist: