Cross Site Request Forgery (CSRF)

Introduction

Now that we have routing set up, we need a way to secure our application.

We will start by adding cross-site request forgery CSRF protection to our application.

What is Cross-Site Request Forgery (CSRF)?

Cross-Site Request Forgery, often abbreviated as CSRF, is a type of cyber attack that tricks a user into performing actions they didn’t intend to do when they are signed into a website.

How does it work?

Imagine you log into your bank account to check your balance.

CSRF 01

While you are logged in, you receive an email from who you think is a friend. It has a link to a funny cat video.

You love funny cat videos (who doesn’t??), so you click on the link and watch the video. It really is hilarious.

CSRF 03

Here’s the critical part.

Because you are already logged into your bank account, the bank’s website trusts that any requests made during this session are genuinely from you.

However, hidden in the email link was also a request to transfer money from your account to the attacker.

CSRF 04

Because the bank’s website sees you are logged in, it goes ahead and authorises the transaction.

When you return to look at your balance, you see that your money has been lost.

How can we protect against CSRF?

One way to protect against CSRF attacks is to use a CSRF token.

This is a unique string of random characters that the app generates for each user session. Every time a user makes a request to the server, the token is sent along with it.

Before processing any request, the server checks that the token is valid and that it matches the user’s session. If it doesn’t, the request is rejected.

Let’s add this now.

Add CSRF protection

Luckily, adding CSRF protection to our application is relatively easy.

Open app/root.tsx.

Add the following imports to the top of your app/root.tsx file:

import { Outlet, useLoaderData } from 'react-router'
import { ParallaxProvider } from 'react-scroll-parallax'
import { type Route } from './+types/root.ts'
import { type loader } from './__root.server.tsx'
import { GeneralErrorBoundary } from './components/error-boundary.tsx'
import FooterMenuRight from './components/organisms/Footer/FooterMenuRight'
import HeaderWithSearch from './components/organisms/HeaderWithSearch'
import Document from './components/shared-layout/Document.tsx'
import { ThemeSwitch, useTheme } from './routes/resources+/theme-switch.tsx'
import { useNonce } from './utils/nonce-provider.ts'
import rootLinkElements from './utils/providers/rootLinkElements.ts'
import { AuthenticityTokenProvider } from 'remix-utils/csrf/react'
import { EpicToaster } from './components/ui/sonner.tsx'
import { useToast } from './components/toaster.tsx'

Wrap all the JSX returned by the App component with the AuthenticityTokenProvider, then pass a csrfToken from the data object to it:

export default function App() {
  const data = useLoaderData<typeof loader | null>()
  const nonce = useNonce()
  const theme = useTheme()

  return (
    <AuthenticityTokenProvider token={data?.csrfToken ?? ''}>
      <ParallaxProvider>
        <Document theme={theme} nonce={nonce} honeyProps={data?.honeyProps}>
          <div className="flex h-screen flex-col justify-between">
            <HeaderWithSearch />

            <div className="flex-1">
              <Outlet />
            </div>

            <div className="container flex justify-between pb-5">
              <ThemeSwitch userPreference={data?.requestInfo.userPrefs.theme} />
            </div>

            <FooterMenuRight />
          </div>
        </Document>
      </ParallaxProvider>
    </AuthenticityTokenProvider>
  )
}

Next, add a new component called EpicToaster carefully in the space shown below. Add it just above the closing </Document> tag:

export default function App() {
  const data = useLoaderData<typeof loader | null>()
  const nonce = useNonce()
  const theme = useTheme()
  useToast(data?.toast)

  return (
    <AuthenticityTokenProvider token={data?.csrfToken ?? ''}>
      <ParallaxProvider>
        <Document theme={theme} nonce={nonce} honeyProps={data?.honeyProps}>
          <div className="flex h-screen flex-col justify-between">
            <HeaderWithSearch />

            <div className="flex-1">
              <Outlet />
            </div>

            <div className="container flex justify-between pb-5">
              <ThemeSwitch userPreference={data?.requestInfo.userPrefs.theme} />
            </div>

            <FooterMenuRight />
          </div>
          <EpicToaster
            closeButton
            position="bottom-right"
            theme={theme}
            expand
            richColors
            duration={5000}
          />
        </Document>
      </ParallaxProvider>
    </AuthenticityTokenProvider>
  )
}

Save your changes.
Remember to organise the imports at the top of app/root.tsx by using the VS Code keyboard shortcut SHIFT + ALT + O (Windows) or SHIFT + OPT + O (Mac)
Let’s check for a CSRF token when someone tries to login to the website. If they try to login without a valid CSRF token, we will redirect them to the home page and display a toast notification to inform the user.

Open the file app/routes/_auth+/login.tsx.

Add the following imports to the top of the file:


19 collapsed lines
1
import { getFormProps, getInputProps, useForm } from '@conform-to/react'
2
import { getZodConstraint, parseWithZod } from '@conform-to/zod'
3
import { type SEOHandle } from '@nasa-gcn/remix-seo'
4
import { startAuthentication } from '@simplewebauthn/browser'
5
import { useOptimistic, useState, useTransition } from 'react'
6
import { data, Form, Link, useNavigate, useSearchParams } from 'react-router'
7
import { HoneypotInputs } from 'remix-utils/honeypot/react'
8
import { z } from 'zod'
9
import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
10
import { CheckboxField, ErrorList, Field } from '#app/components/forms.tsx'
11
import { Spacer } from '#app/components/spacer.tsx'
12
import { Icon } from '#app/components/ui/icon.tsx'
13
import { StatusButton } from '#app/components/ui/status-button.tsx'
14
import { login, requireAnonymous } from '#app/utils/auth.server.ts'
15
import {
16
  ProviderConnectionForm,
17
  providerNames,
18
} from '#app/utils/connections.tsx'
19
import { checkHoneypot } from '#app/utils/honeypot.server.ts'
20
import { getErrorMessage, useIsPending } from '#app/utils/misc.tsx'
21
import { PasswordSchema, UsernameSchema } from '#app/utils/user-validation.ts'
22
import { type Route } from './+types/login.ts'
23
import { handleNewSession } from './login.server.ts'
24
import { AuthenticityTokenInput } from 'remix-utils/csrf/react'
25
import { CSRFError } from 'remix-utils/csrf/server'
26
import { csrf } from '~/utils/csrf.server'
27
import { redirectWithToast } from '#app/utils/toast.server.ts'

Next, find the action function around line 52 in the same file.

Add the following block of code just after its opening bracket:

52
export async function action({ request }: Route.ActionArgs) {
53
  try {
54
    await csrf.validate(request)
55
  } catch (error) {
56
    if (error instanceof CSRFError) {
57
      return redirectWithToast(`/`, {
58
        description: 'CSRF token is invalid. Please try again in a new window',
59
        type: 'error',
60
      })
61
    }
62
    return redirectWithToast(`/`, {
63
      description: 'Something went wrong. Please try again in a new window',
64
      type: 'error',
65
    })
66
  }
67

68
  await requireAnonymous(request)
69
  const formData = await request.formData()
70
  await checkHoneypot(formData)
71
  const submission = await parseWithZod(formData, {
33 collapsed lines
72
    schema: (intent) =>
73
      LoginFormSchema.transform(async (data, ctx) => {
74
        if (intent !== null) return { ...data, session: null }
75

76
        const session = await login(data)
77
        if (!session) {
78
          ctx.addIssue({
79
            code: z.ZodIssueCode.custom,
80
            message: 'Invalid username or password',
81
          })
82
          return z.NEVER
83
        }
84

85
        return { ...data, session }
86
      }),
87
    async: true,
88
  })
89

90
  if (submission.status !== 'success' || !submission.value.session) {
91
    return data(
92
      { result: submission.reply({ hideFields: ['password'] }) },
93
      { status: submission.status === 'error' ? 400 : 200 },
94
    )
95
  }
96

97
  const { session, remember, redirectTo } = submission.value
98

99
  return handleNewSession({
100
    request,
101
    session,
102
    remember: remember ?? false,
103
    redirectTo,
104
  })
105
}

Find the LoginPage component around line 104 in the same file. Look carefully for the Form element in the JSX being returned from this function, and add in the AuthenticityTokenInput component just below the HoneypotInputs component:

104
export default function LoginPage({ actionData }: Route.ComponentProps) {
14 collapsed lines
105
const isPending = useIsPending()
106
const [searchParams] = useSearchParams()
107
const redirectTo = searchParams.get('redirectTo')
108

109
const [form, fields] = useForm({
110
  id: 'login-form',
111
  constraint: getZodConstraint(LoginFormSchema),
112
  defaultValue: { redirectTo },
113
  lastResult: actionData?.result,
114
  onValidate({ formData }) {
115
    return parseWithZod(formData, { schema: LoginFormSchema })
116
  },
117
  shouldRevalidate: 'onBlur',
118
})
119

120
return (
121
  <div className="flex min-h-full flex-col justify-center pt-20 pb-32">
122
    <div className="mx-auto w-full max-w-md">
8 collapsed lines
123
      <div className="flex flex-col gap-3 text-center">
124
        <h1 className="text-h1">Welcome back!</h1>
125
        <p className="text-body-md text-muted-foreground">
126
          Please enter your details.
127
        </p>
128
      </div>
129
      <Spacer size="xs" />
130

131
      <div>
132
        <div className="mx-auto w-full max-w-md px-8">
133
          <Form method="POST" {...getFormProps(form)}>
134
            <AuthenticityTokenInput />
135
            <HoneypotInputs />
136
            <Field
137
              labelProps={{ children: 'Username' }}
138
              inputProps={{
139
                ...getInputProps(fields.username, { type: 'text' }),
140
                autoFocus: true,
141
                className: 'lowercase',
142
                autoComplete: 'username',
143
              }}
144
              errors={fields.username.errors}
145
            />
48 collapsed lines
146

147
            <Field
148
              labelProps={{ children: 'Password' }}
149
              inputProps={{
150
                ...getInputProps(fields.password, {
151
                  type: 'password',
152
                }),
153
                autoComplete: 'current-password',
154
              }}
155
              errors={fields.password.errors}
156
            />
157

158
            <div className="flex justify-between">
159
              <CheckboxField
160
                labelProps={{
161
                  htmlFor: fields.remember.id,
162
                  children: 'Remember me',
163
                }}
164
                buttonProps={getInputProps(fields.remember, {
165
                  type: 'checkbox',
166
                })}
167
                errors={fields.remember.errors}
168
              />
169
              <div>
170
                <Link
171
                  to="/forgot-password"
172
                  className="text-body-xs font-semibold"
173
                >
174
                  Forgot password?
175
                </Link>
176
              </div>
177
            </div>
178

179
            <input
180
              {...getInputProps(fields.redirectTo, { type: 'hidden' })}
181
            />
182
            <ErrorList errors={form.errors} id={form.errorId} />
183

184
            <div className="flex items-center justify-between gap-6 pt-3">
185
              <StatusButton
186
                className="w-full"
187
                status={isPending ? 'pending' : (form.status ?? 'idle')}
188
                type="submit"
189
                disabled={isPending}
190
              >
191
                Log in
192
              </StatusButton>
193
            </div>
194
          </Form>
31 collapsed lines
195
          <hr className="my-4" />
196
          <div className="flex flex-col gap-5">
197
            <PasskeyLogin
198
              redirectTo={redirectTo}
199
              remember={fields.remember.value === 'on'}
200
            />
201
          </div>
202
          <hr className="my-4" />
203
          <ul className="flex flex-col gap-5">
204
            {providerNames.map((providerName) => (
205
              <li key={providerName}>
206
                <ProviderConnectionForm
207
                  type="Login"
208
                  providerName={providerName}
209
                  redirectTo={redirectTo}
210
                />
211
              </li>
212
            ))}
213
          </ul>
214
          <div className="flex items-center justify-center gap-2 pt-6">
215
            <span className="text-muted-foreground">New here?</span>
216
            <Link
217
              to={
218
                redirectTo
219
                  ? `/signup?redirectTo=${encodeURIComponent(redirectTo)}`
220
                  : '/signup'
221
              }
222
            >
223
              Create an account
224
            </Link>
225
          </div>
226
        </div>
227
      </div>
228
    </div>
229
  </div>
230
)
231
}

Open app/root.tsx.

We will deliberately add an invalid CSRF token to the AuthenticityTokenProvider to test our new code.

Replace the token prop with the following:

22
export default function App() {
23
  const data = useLoaderData<typeof loader | null>()
24
  const nonce = useNonce()
25
  const theme = useTheme()
26
  useToast(data?.toast)
27

28
  return (
29
    <AuthenticityTokenProvider token={'invalid'}>
25 collapsed lines
30
      <ParallaxProvider>
31
        <Document theme={theme} nonce={nonce} honeyProps={data?.honeyProps}>
32
          <div className="flex h-screen flex-col justify-between">
33
            <HeaderWithSearch />
34

35
            <div className="flex-1">
36
              <Outlet />
37
            </div>
38

39
            <div className="container flex justify-between pb-5">
40
              <ThemeSwitch userPreference={data?.requestInfo.userPrefs.theme} />
41
            </div>
42

43
            <FooterMenuRight />
44
          </div>
45
          <EpicToaster
46
            closeButton
47
            position="bottom-right"
48
            theme={theme}
49
            expand
50
            richColors
51
            duration={5000}
52
          />
53
        </Document>
54
      </ParallaxProvider>
55
    </AuthenticityTokenProvider>
56
  )
57
}

Next, in your browser, click on the Login button in the top right corner of the screen.

Login with the following details:

Username: kody Password: kodylovesyou
When you click ‘Login’, you should be redirected to the home page and see a toast notification informing you that the CSRF token is invalid:

Summary

We’ve added a strong security feature to our application that is crucial for you to write about in your assignment.

Next steps

In the next step, we will secure our application against spambots by adding a ‘honeypot’ field to our forms.