/serialize-server-state

A fast, secure serializer for server JSON state.

Primary LanguageJavaScriptMIT LicenseMIT

serialize-server-state

A fast, secure serializer for server JSON state.

serialize-server-state versions serialize-server-state available on NPM Current test status PRs are welcome serialize-server-state issues serialize-server-state stars serialize-server-state forks serialize-server-state license serialize-server-state is maintained


Getting started

Install the dependencies

In your terminal:

$ yarn add serialize-server-state
# or
$ npm install serialize-server-state

Write your code

See below for the Redux Server Rendering example adapted to use the serialize-server-state package:

const serialize = require("serialize-server-state");

function renderFullPage(html, preloadedState) {
  return `
    <!doctype html>
    <html>
      <head>
        <title>Redux Universal Example</title>
      </head>
      <body>
        <div id="root">${html}</div>
        <script>
          window.__PRELOADED_STATE__ = ${serialize(preloadedState)};
        </script>
        <script src="/static/bundle.js"></script>
      </body>
    </html>
    `;
}

Motivation

This package attempts to act as a balance between security and performance.

When server rendering JSON state it can be very easy to stumble upon cross-site scripting issues so care is needed. See the Redux Security Considerations for discussion on this topic.

Packages such as jsesc and serialize-javascript exist and handle a wide range of security issues very well (from XSS to unicode issues) but are not very performant - for a lot of use-cases these packages almost offer too much.

If you are attempting to render state which you know to be JSON serializable, and will be assigning to a value within a script context, then this package might be for you.

serialize-server-state is up to 2x faster than the above packages for serialization, and implements the optimally performant deserialization technique by rendering the state as a string within JSON.parse(), see this article on Redux state transfer performance.

This package mitigates XSS by following the WHATWG HTML Specification recommendation and gracefully handles awkward characters such as line separators with the appropriate escaping.

Note: Please always assess your use-case for security before using this package.

Benchmark

$ yarn bench

jsesc x 125 ops/sec ±1.97% (79 runs sampled)
serialize-javascript x 334 ops/sec ±1.96% (88 runs sampled)
serialize-server-state x 646 ops/sec ±1.17% (89 runs sampled)
The fastest option is serialize-server-state

Machine specs:

$ system_profiler SPSoftwareDataType SPHardwareDataType

Software:

    System Software Overview:

      System Version: macOS 12.6.2 (21G320)
      Kernel Version: Darwin 21.6.0
      Boot Volume: Macintosh HD
      Boot Mode: Normal
      Secure Virtual Memory: Enabled
      System Integrity Protection: Enabled

Hardware:

    Hardware Overview:

      Model Name: MacBook Air
      Model Identifier: MacBookAir7,2
      Processor Name: Dual-Core Intel Core i5
      Processor Speed: 1.8 GHz
      Number of Processors: 1
      Total Number of Cores: 2
      L2 Cache (per Core): 256 KB
      L3 Cache: 3 MB
      Hyper-Threading Technology: Enabled
      Memory: 8 GB
      System Firmware Version: 476.0.0.0.0
      OS Loader Version: 540.120.3~22
      SMC Version (system): 2.27f2

Contributing

Please check out the CONTRIBUTING docs.

Changelog

Please check out the releases page.


License

serialize-server-state is licensed under the MIT License.