To help you get started, we've collected the most common ways that @nuxt/devalue is being used within popular public projects.

nuxt / nuxt.js / packages / vue-renderer / src / renderers / ssr.js View on Github

if (meta) {
      const BODY_PREPEND =
        meta.meta.text({ pbody: true }) +
        meta.link.text({ pbody: true }) +
        meta.style.text({ pbody: true }) +
        meta.script.text({ pbody: true }) +
        meta.noscript.text({ pbody: true })

      if (BODY_PREPEND) {
        APP = `${BODY_PREPEND}${APP}`
      }
    }

    // Serialize state
    const serializedSession = `window.${this.serverContext.globals.context}=${devalue(renderContext.nuxt)};`
    if (shouldInjectScripts) {
      APP += ``
    }

    // Calculate CSP hashes
    const { csp } = this.options.render
    const cspScriptSrcHashes = []
    if (csp) {
      // Only add the hash if 'unsafe-inline' rule isn't present to avoid conflicts (#5387)
      const containsUnsafeInlineScriptSrc = csp.policies && csp.policies['script-src'] && csp.policies['script-src'].includes('\'unsafe-inline\'')
      if (csp.unsafeInlineCompatibility || !containsUnsafeInlineScriptSrc) {
        const hash = crypto.createHash(csp.hashAlgorithm)
        hash.update(serializedSession)
        cspScriptSrcHashes.push(`'${csp.hashAlgorithm}-${hash.digest('base64')}'`)
      }

View more ways to use @nuxt/devalue

@nuxt/devalue

> Forked from devalue to log errors on non-serializable properties rather than throwing Error.

Like JSON.stringify, but handles

• cyclical references (obj.self = obj)
• repeated references ([value, value])
• undefined, Infinity, NaN, -0
• regular expressions
• dates
• Map and Set
• .toJSON() method for non-POJOs

Try it out on runkit.com.

Goals:

• Performance
• Security (see XSS mitigation)
• Compact output

Non-goals:

• Human-readable output
• Stringifying functions or arbritary non-POJOs

Usage

import devalue from '@nuxt/devalue';

let obj = { a: 1, b: 2 };
obj.c = 3;

devalue(obj); // '{a:1,b:2,c:3}'

obj.self = obj;
devalue(obj); // '(function(a){a.a=1;a.b=2;a.c=3;a.self=a;return a}({}))'

If devalue encounters a function or a non-POJO, it will throw an error.

XSS mitigation

Say you're server-rendering a page and want to serialize some state, which could include user input. JSON.stringify doesn't protect against XSS attacks:

const state = {
  userinput: ``;

Which would result in this:

Using devalue, we're protected against that attack:

const template = `
`;

This, along with the fact that devalue bails on functions and non-POJOs, stops attackers from executing arbitrary code. Strings generated by devalue can be safely deserialized with eval or new Function:

const value = (0,eval)('(' + str + ')');

Other security considerations

While devalue prevents the XSS vulnerability shown above, meaning you can use it to send data from server to client, you should not send user data from client to server using the same method. Since it has to be evaluated, an attacker that successfully submitted data that bypassed devalue would have access to your system.

When using eval, ensure that you call it indirectly so that the evaluated code doesn't have access to the surrounding scope:

{
  const sensitiveData = 'Setec Astronomy';
  eval('sendToEvilServer(sensitiveData)'); // pwned :(
  (0,eval)('sendToEvilServer(sensitiveData)'); // nice try, evildoer!
}

Using new Function(code) is akin to using indirect eval.

See also

• lave by Jed Schmidt
• arson by Ben Newman
• tosource by Marcello Bastéa-Forte
• serialize-javascript by Eric Ferraiuolo

License

MIT