Skip to content

Instantly share code, notes, and snippets.

@voxpelli

voxpelli/html-safe-json-2.js

Last active August 25, 2021 14:45
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save voxpelli/ff7a83406078ba2d68b738e63cad6498 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save voxpelli/ff7a83406078ba2d68b738e63cad6498 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. voxpelli revised this gist Aug 25, 2021. No changes.
  2. voxpelli revised this gist Aug 25, 2021. 1 changed file with 38 additions and 0 deletions.
    38 changes: 38 additions & 0 deletions react-test.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,38 @@
    const React = require('react');
    const { renderToStaticMarkup } = require('react-dom/server');

    const JSON_ESCAPE = {
    '&': '\\u0026',
    '>': '\\u003e',
    '<': '\\u003c',
    '\u2028': '\\u2028',
    '\u2029': '\\u2029'
    };

    const JSON_ESCAPE_REGEXP = /[\u2028\u2029&><]/g;

    function escapeJSONString(value) {
    return value.replace(JSON_ESCAPE_REGEXP, match => JSON_ESCAPE[match]);
    }

    function escapedJSONStringify(obj) {
    return escapeJSONString(JSON.stringify(obj));
    }

    const data = "</script><script>console.log('hejsan2')</script><script>";

    // outputs: <script type="application/ld+json">"</script><script>console.log('hejsan2')</script><script>"</script>
    // which won't parse as expected + will log 'hejsan2' to the console
    console.log(renderToStaticMarkup(React.createElement('script', {
    type: 'application/ld+json',
    dangerouslySetInnerHTML: { __html: `${JSON.stringify(data)}` }
    })));

    // outputs: <script type="application/ld+json">"\u003c/script\u003e\u003cscript\u003econsole.log('hejsan2')\u003c/script\u003e\u003cscript\u003e"</script>
    // which can be parsed as expected + won't log anything
    // parsing it: JSON.parse(`"\u003c/script\u003e\u003cscript\u003econsole.log('hejsan2')\u003c/script\u003e\u003cscript\u003e"`)
    // results in: "</script><script>console.log('hejsan2')</script><script>"
    console.log(renderToStaticMarkup(React.createElement('script', {
    type: 'application/ld+json',
    dangerouslySetInnerHTML: { __html: `${escapedJSONStringify(data)}` }
    })));
  3. voxpelli revised this gist Aug 25, 2021. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions html-safe-json.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,5 @@
    // Extracted from https://github.com/ember-fastboot/ember-cli-fastboot/blob/909c1417ceeb8a5c92bb952b0d59be02bfdca546/packages/fastboot/src/ember-app.js#L406-L420
    // Discussion in https://github.com/ember-fastboot/fastboot/pull/85

    const JSON_ESCAPE = {
    '&': '\\u0026',
  4. voxpelli revised this gist Aug 25, 2021. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion html-safe-json-2.js
    View file
    Original file line number Diff line number Diff line change
    @@ -10,6 +10,6 @@ const JSON_ESCAPE = {

    const JSON_ESCAPE_REGEXP = /[\u2028\u2029&><]/g;

    const escapeJSONString = (obj) =>
    const jsonStringifyForScriptTag = (obj) =>
    JSON.stringify(obj)
    .replace(JSON_ESCAPE_REGEXP, match => JSON_ESCAPE[match]);
  5. voxpelli created this gist Aug 25, 2021.
    15 changes: 15 additions & 0 deletions html-safe-json-2.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,15 @@
    // My own take

    const JSON_ESCAPE = {
    '&': '\\u0026',
    '>': '\\u003e',
    '<': '\\u003c',
    '\u2028': '\\u2028',
    '\u2029': '\\u2029'
    };

    const JSON_ESCAPE_REGEXP = /[\u2028\u2029&><]/g;

    const escapeJSONString = (obj) =>
    JSON.stringify(obj)
    .replace(JSON_ESCAPE_REGEXP, match => JSON_ESCAPE[match]);
    17 changes: 17 additions & 0 deletions html-safe-json.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,17 @@
    // Extracted from https://github.com/ember-fastboot/ember-cli-fastboot/blob/909c1417ceeb8a5c92bb952b0d59be02bfdca546/packages/fastboot/src/ember-app.js#L406-L420

    const JSON_ESCAPE = {
    '&': '\\u0026',
    '>': '\\u003e',
    '<': '\\u003c',
    '\u2028': '\\u2028',
    '\u2029': '\\u2029'
    };

    const JSON_ESCAPE_REGEXP = /[\u2028\u2029&><]/g;

    function escapeJSONString(string) {
    return string.replace(JSON_ESCAPE_REGEXP, function(match) {
    return JSON_ESCAPE[match];
    });
    }