react-process-env

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);
}

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

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.

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

encodeData ⇒ string

Stringify and encode payload into base64

ERROR_INJECT_PROCESS_ENV : string

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

ERROR_INJECT_NON_SCALAR_PAYLOAD : string

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

renderScript ⇒ string

Render payload into script tag

Constants

wrapScript : function

Wraps body with script tag

Functions

toBase64(payload) ⇒ string

Encode payload into base64

fromBase64(payload) ⇒ string

Decode payload from base64 to ascii

isProcessEnv(payload) ⇒ boolean

Returns true is payload is process.env

checkPayload(payload) ⇒ *

Check payload before injecting

resolve(property, processEnv, window) ⇒ *

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

injectScript(payload, body) ⇒ string

Inject rendered script tag into head of HTML body

inject(payload, resolver) ⇒ function

Create express callback that injects script into resolved HTML body

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