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.
yarn add fusion-plugin-csrf-protection-react
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);
// 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, []);
}
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.
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.
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.
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 []
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.
import {SessionToken} from 'fusion-tokens';
The canonical token for an implementation of a session. For type information,
see the SessionToken
docs. Required.
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.
import {withFetch} from 'fusion-plugin-csrf-protection-react';
A higher order component that adds the fetch
prop to a component.