Cross-Site Request Forgery (CSRF)

A CSRF token is a secure random token (synchronizer token or challenge token) that is used to prevent CSRF attacks.

To add it:

CSRF middleware has to be added inside the server.js file present in the server folder. Refer to the section on adding middlewares on the server. on how to do it.

server/server.js

import csrf from "csurf"
const csrfMiddleware = csrf({ cookie: { maxAge: 30 * 24 * 60 * 60 * 1000 } })

export function addMiddlewares(app) {
  app.use(csrfMiddleware)
}

Add an input tag inside the Body element in the file server/document.js. Checkout the custom document to read more about custom templating offered by Catalyst.

server/server.js

import React from "react"
import { Head, Body } from "catalyst"

function Document(props) {
    const { req } = props
    const csrf = typeof req.csrfToken === "function" && req.csrfToken()
    return (
        <html lang="en">
            <Head {...props} />
            <Body {...props}>
                <input type="hidden" id="_csrf" name="_csrf" value={csrf} />
            </Body>
        </html>
    )
}
export default Document