specialblend/react-process-env

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

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