react-process-env

express utility to safely inject variables from process.env (node.js) into window.env (react)

Install

npm install react-process-env

Quick Start

// server.js
const fs = require('fs')
const path = require('path')
const express = require('express')
const memoize = require('lodash.memoize')
const { inject } = require('react-process-env')

const resolveIndex = memoize(() => fs.readFile(path.join(__dirname, 'index.html')))

const payload = {
    FOO: process.env.FOO,
    BAR: process.env.BAR,
}

const app = express()
const injectEnv = inject(payload, resolveIndex)
/**
* Injects payload into `window.env` on `index.html`
*/
app.use('/', injectEnv)

// App.js
import React from 'react'
import { resolve } from 'react-process-env'

export default () => {
    /**
    * Reads window.env.FOO on `express` (production), or process.env.FOO on `react-scripts start` (development)
    */
    const myFoo = resolve('FOO', process.env);
}

:warning: note on resolve:

if you want resolve to work in both dev (react-scripts start) and production (node server.js), pass process.env as second argument to resolve, or do something like myFoo = process.env.FOO || resolveEnv('FOO).

Security Considerations

:warning: Do NOT pass ANY SECRET DATA in payload

The injected payload will be PUBLIC in index.html, so don't pass anything you don't want the world to see.

:warning: Do NOT pass process.env directly as payload

It's a security risk. If you pass process.env directly, it will throw an assertion error.

Cross-site scripting (XSS) attack

• Scalar values only - anything else will throw an assertion error.
• Non-scalar keys will automatically be cast to strings.
• The payload will be encoded into base64 before injecting into page to prevent malicious payloads from executing.

Members

Constants

Functions

encodeData ⇒ string

Stringify and encode payload into base64

Kind: global variable
Returns: string - encoded payload

| Param | Type | Description | | --- | --- | --- | | payload | object | payload |

ERROR_INJECT_PROCESS_ENV : string

Assertion error thrown when passing process.env directly into any of the inject methods

Kind: global variable

ERROR_INJECT_NON_SCALAR_PAYLOAD : string

Assertion error thrown when passing a non-scalar value into any of the inject methods

Kind: global variable

renderScript ⇒ string

Render payload into script tag

Kind: global variable
Returns: string - script tag

| Param | Type | Description | | --- | --- | --- | | payload | object | payload |

wrapScript : function

Wraps body with script tag

Kind: global constant

| Param | Type | | --- | --- | | body | body |

toBase64(payload) ⇒ string

Encode payload into base64

Kind: global function
Returns: string - base64 payload

| Param | Type | Description | | --- | --- | --- | | payload | object | payload |

fromBase64(payload) ⇒ string

Decode payload from base64 to ascii

Kind: global function
Returns: string - ascii payload

| Param | Type | Description | | --- | --- | --- | | payload | object | payload |

isProcessEnv(payload) ⇒ boolean

Returns true is payload is process.env

Kind: global function
Returns: boolean - check

| Param | Type | Description | | --- | --- | --- | | payload | object | payload |

checkPayload(payload) ⇒ *

Check payload before injecting

Kind: global function
Returns: * - payload

| Param | Type | Description | | --- | --- | --- | | payload | object | payload |

resolve(property, processEnv, window) ⇒ *

Resolve property from process.env (react-scripts/development), or window.env (express/production)

Kind: global function
Returns: * - value of the resolved property

| Param | Type | Description | | --- | --- | --- | | property | string | name of property to resolve | | processEnv | object | process.env | | window | object | global/window |

injectScript(payload, body) ⇒ string

Inject rendered script tag into head of HTML body

Kind: global function
Returns: string - HTML body with script tag

| Param | Type | Description | | --- | --- | --- | | payload | object | payload | | body | string | HTML body |

inject(payload, resolver) ⇒ function

Create express callback that injects script into resolved HTML body

Kind: global function
Returns: function - express callback

| Param | Type | Description | | --- | --- | --- | | payload | object | payload | | resolver | function | async callback to resolve the HTML body |