Fusion.js plugins enable secure application development, including:
Most of these require no configuration from you.
By default, any non-idempotent HTTP method is protected by this plugin.
A CSRF (cross-site request forgery) attack happens if a victim visits a malicious website and that website triggers a spoofed request via Javascript to execute unwanted actions on a web application in which the victim is currently authenticated. CSRF protection ensures that a malicious site cannot trigger such requests by requiring a token to be associated with state-changing requests. This token cannot be spoofed thanks to security restrictions built into how browsers deal with cross-site Javascript-based requests.
Some examples of CSRF attacks include a maliciously crafted Facebook link that triggers expensive operations on a user's behalf, or one that forges a request to your backend. You should never disable CSRF protection.
It's possible to create a whitelist of URLs where CSRF protection is disabled if rare exceptions need to be made. For example, it is critical for error logging requests to be accepted by the server, rather than being blocked if they're missing a CSRF token, and error logging requests from Fusion.js are done with POST requests, which are subject to CSRF protection.
To add this exception to the whitelist, use the CsrfIgnoreRoutesToken
configuration value:
// src/app.js
import {CsrfIgnoreRoutesToken} from 'fusion-plugin-csrf-protection';
app.register(CsrfIgnoreRoutesToken, ['/_errors']);
When authoring plugins that affect the server-rendered template, you should always prefer using the fusion-plugin-react-helmet-async
plugin over using ctx.template
outside of React.
In the unlikely case that you need to add values to the ctx.template.head
and ctx.template.body
arrays, these values must be sanitized HTML values, which are produced by the html
template tag. Sanitized HTML values are actually not strings at all. This restriction exists to prevent potential XSS attacks. You should always use html
when hard-coding HTML into the template:
import {html} from 'fusion-core';
export default __NODE__ &&
createPlugin({
middleware() {
return (ctx, next) => {
ctx.template.head.push(
html`
<meta
name="viewport"
content="width=device-width, initial-scale=1"
/>
`
);
};
},
});
The html
template tag automatically escapes interpolated values via the escape
utility function.
import {escape} from 'fusion-core'; // note: this is not the same as the global.escape function!
There's another function called dangerouslySetHTML
which disables protection against XSS attack. Needless to say, you should never use this function, unless you have taken care to manually call escape
on ALL user data, and added tests to ensure your custom sanitization code works correctly.