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.
fusion-plugin-csrf-protection-react's People
Forkers
kevingrandon ganemone rtsao nadiia lhorie derekjuber mlmorg uberopensourcebot angus-c albertywu rajeshsegu ajboghfusion-plugin-csrf-protection-react's Issues
Use Buildkite for CI
Upgrade versions of fusion-react and fusion-plugin-csrf-protection
Fix flow types
Expose withFetch instead of withCsrfProtection
withFetch
makes more sense, is easier to use, and looks better.
Add initial implementation
Upgrade `fusion-plugin-csrf-protection` dependency to 1.0.7
Type of issue
Bug.
Description
The current (1.0.3 and 1.0.4-0) version of this module depends on fusion-plugin-csrf-protection:1.0.3
which does not yet have this commit in it.
Current behavior
flow check
fails with errors in the fusion-plugin-csrf-protection
dependency.
Expected behavior
Flow passes.
Workaround
I did work around this by adding the working version of the dependency in package.json -> resolutions
.
Add Token dependencies to readme
Problem/Rationale
Documentation regarding Fusion API is out of date given recent changes to leverage new Dependency Injection architecture.
Solution/Change/Deliverable
Update documentation
Add LICENSE
Action Required: Fix Renovate Configuration
There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.
Error type: Preset name not found within published preset config (monorepo:angularmaterial). Note: this is a nested preset so please contact the preset author if you are unable to fix it yourself.
Migrate to new fusion-plugin api
Update fusion-plugin-csrf-protection to 0.3.1
Need to expose tokens from fusion-plugin-csrf-protection
Update dependencies
Fix docs to reflect `FetchForCsrfToken`
Migrate fusion-plugin-csrf-protection-react to DI
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.