fusion-plugin-csrf-protection-react v1.0.3

fusion-plugin-csrf-protection-react

Provides a modified fetch that is automatically secure against CSRF attacks for non-idempotent HTTP methods.

This plugin handles csrf protection by adding a server side middleware that checks for a valid csrf token on requests for non-idempotent HTTP methods (e.g. POST). It generates a csrf secret once per session based on a combination of a timestamp and a server side stored secret and stores this using the provided session plugin (usually via an encrypted cookie). It uses this csrf secret to generate and validate csrf tokens per request.

It also provides a React HOC that exposes that fetch method to React components.

Table of contents

• Installation
• Usage
• Setup

• API

  • Registration API
    • CsrfProtection
    • FetchToken
  • Dependencies
    • CsrfExpireToken
    • CsrfIgnoreRoutesToken
    • FetchForCsrfToken
    • SessionToken
  • Service API
    • withFetch

Installation

yarn add fusion-plugin-csrf-protection-react

Usage

import React from 'react';
import {withFetch} from 'fusion-plugin-csrf-protection-react';

class HelloComponent extends React.Component {
  componentDidMount() {
    this.props.fetch('/get-data').then(res => {
      console.log('response', res);
    });
  }
  render() { 
    return <div>Hello World</div>
  }
}

export default withFetch(HelloComponent);

Setup

// src/main.js
import React from 'react';
import {FetchToken, SessionToken} from 'fusion-tokens';
import App from 'fusion-react';
import Session from 'fusion-plugin-jwt';
import CsrfProtection, {
  FetchForCsrfToken,
  CsrfExpireToken,
  CsrfIgnoreRoutesToken,
} from 'fusion-plugin-csrf-protection-react';
import fetch from unfetch;

export default () => {
  const app = new App(<div></div>);
  app.register(SessionToken, Session);
  app.register(FetchForCsrfToken, fetch);
  app.register(FetchToken, CsrfProtection);
  if (__BROWSER__) {
    app.register(FetchForCsrfToken, fetch);
    // see usage example above
    app.register(someToken, pluginUsingFetch);
  } 
  // optional
  app.register(CsrfExpireToken, 60 * 60 * 24); 
  // optional
  __NODE__ && app.register(CsrfIgnoreRoutesToken, []);
}

API

Registration API

CsrfProtection

import CsrfProtection from 'fusion-plugin-csrf-protection-react';

The csrf protection plugin. Typically, it should be registered to the FetchToken. Provides the fetch api and a server side middleware for validating csrf requests.

FetchToken

import {FetchToken} from 'fusion-tokens';

The canonical token for an implementation of fetch. This plugin is generally registered on that token. For more, see the fusion-tokens repo.

Dependencies

CsrfExpireToken

import {CsrfExpireToken} from 'fusion-plugin-csrf-protection-react';

The number of seconds for csrf tokens to remain valid. Optional.

Types

type CsrfExpire = number;

Default value

The default expire is 86400 seconds, or 24 hours.

CsrfIgnoreRoutesToken

import {CsrfIgnoreRoutesToken} from 'fusion-plugin-csrf-protection-react';

A list of routes to ignore csrf protection on. This is rarely needed and should be used with caution.

Types

type CsrfIgnoreRoutes = Array<string>;

Default value

Empty array []

FetchForCsrfToken

import {FetchForCsrfToken} from 'fusion-plugin-csrf-protection-react';

An implementation of fetch to be used by the fusion-plugin-csrf-protection-react. Usually this is simply a polyfill of fetch, or can even be a reference to window.fetch. It is useful to exist in the DI system however for testing.

For type information, see the FetchToken docs. Required.

SessionToken

import {SessionToken} from 'fusion-tokens';

The canonical token for an implementation of a session. For type information, see the SessionToken docs. Required.

Service API

const response: Response = fetch('/test', {
  method: 'POST',  
})

fetch: (url: string, options: Object) => Promise - Client-only. A decorated fetch function that automatically does pre-flight requests for CSRF tokens if required.

See https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API for more on the fetch api.

withFetch

import {withFetch} from 'fusion-plugin-csrf-protection-react';

A higher order component that adds the fetch prop to a component.