How to safely escape JSON inside HTML SCRIPT elements
15 days ago
- #PHP
- #HTML
- #JSON
- Script tags in HTML have special parsing rules that can break webpages if not handled correctly.
- To safely embed JSON in script tags, replace `<` with `\x3C` or `\u003C` in JSON strings.
- In PHP, use `json_encode($data, JSON_HEX_TAG | JSON_UNESCAPED_SLASHES)` for safe JSON embedding.
- In WordPress, use `wp_json_encode` with the same flags for safe JSON embedding.
- The HTML standard recommends escaping specific sequences like `<!--` as `\x3C!--` and `</script>` as `\x3C/script`.
- Script tags can contain any language or data, but their parsing rules can lead to unexpected states like 'script data double escaped'.
- Avoid the 'script data double escaped' state by ensuring `<` does not appear in the script tag content.
- PHP's `JSON_HEX_TAG` flag escapes all `<` and `>` to `\u003C` and `\u003E`, ensuring safe embedding.
- Additional PHP flags like `JSON_UNESCAPED_UNICODE` and `JSON_UNESCAPED_LINE_TERMINATORS` can be used for cleaner JSON output in UTF-8 contexts.
- JavaScript strings now accept characters like U+2028 and U+2029, making JSON embedding safer in modern browsers.