@particular./micro-cors-http-proxy

🎮 Minimal HTTP Proxy implementation to support secure whitelisting and CORS

Built with Micro! 🤩

🛠 Setup

Create a .env at the project root with the following credentials:

PROXY_ORIGIN_WHITELIST=*.mysite.com,*.mycrmplaform.io,*.mycommerceplaform.com,*.now.sh
PROXY_DESTINATION_WHITELIST=api.mygateway.com,api.myshippingplatform.com,api.mycommerceplaform.com,*.whatever.net

PROXY_ORIGIN_WHITELIST is a comma separated list of patterns to match against the incoming requests 'Origin' header (ex. localhost,*.myawesomesite.com,*.now.sh)

PROXY_DESTINATION_WHITELIST is a comma separated list of patterns to match against the URI you are proxying requests to. (ex. api.somethingsecure.com,*.somotherapi.com)

Optional Additional Parameters const proxyReplacePrefix = process.env.PROXYREPLACE || 'PROXY_REPLACE' const proxyReplaceMatchPrefix = process.env.PROXY_REPLACE_MATCH || 'setting'

PROXY_PREFIX=proxy
PROXY_REPLACE_MATCH=setting
PROXY_REPLACE=PROXY_REPLACE_

PROXY_PREFIX will default to 'proxy' and is used in the URI patterns to determine where to find the encoded uri to proxy request to (ie. https://12345678.ngrok.io/<<<PROXY_PREFIX>>>/https%3A%2F%2Fapi.somethingsecure.com%2Fadmin%2Fcustomers.json)

PROXY_REPLACE_MATCH will default to 'setting' and used within HTTP_HEADERS sent to the proxy to support Mustache like syntax {{<<PROXY_REPLACE_MATCH>>.something_secure}} to replace something_secure with a value found in your process.env (preceeded by your PROXY_REPLACE prefix)

PROXY_REPLACE will default to 'PROXY_REPLACE_' and is the prefix used to look for other keys in your process.env that it will then use to override matched HTTP_HEADER values with

Example

PROXY_REPLACE_MATCH=setting
PROXY_REPLACE=PROXY_REPLACE_
PROXY_REPLACE_SOMETHING_SECURE=1XXXXXxxxxxXXXXXxxxxxXXXXXxxxxx1

Which will then take something like the following HTTP_HEADER sent to the proxy:

{ 'X-Shopify-Access-Token', '{{setting.something_secure}}' }

And before the request is proxied to the destination will inject your process.env value to send along in the proxied request:

{ 'X-Shopify-Access-Token', '1XXXXXxxxxxXXXXXxxxxxXXXXXxxxxx1' }

📦 Package

Run the following command to build the app

yarn install

Start the development server

yarn dev

The server will typically start on PORT 3000. If not, you'll need to restart ngrok to point to whatever server port you've started here.

⛽️ Usage

To send requests to the proxy, the calling implementation should use encodeURIComponent to encode the portion of the URI after the PROXY_PREFIX.

Once your server is up and running, you can send GET, DELETE, OPTIONS, PATCH, PUT and POST requests to it, ensuring that you are URIencoding the value after your PROXY_PREFIX. (ex. https://<<<NGROK_URL>>>/<<<PROXY_PREFIX>>>/https%3A%2F%2Fapi.somewheresecure.com%2Fsomemethod)

Sample call using jQuery.get() below:

const sampleEndpoint = `https://12345678.ngrok.io/proxy/${encodeURIComponent(
  'https://23456789.myshopify.com/admin/customers.json'
)}`

$.ajax({
  url: sampleEndpoint,
  type: 'GET',
  cors: true,
  beforeSend: xhr => {
    xhr.setRequestHeader(
      'X-Shopify-Access-Token',
      '{{setting.something_secure}}'
    )
  }
})
  .done(console.log)
  .fail(console.error)

🚀 Deploy

You can easily deploy this function to now.

Contact Adam Grohs @ Particular. for any questions.