Arcjet Shield for SvelteKit

Arcjet Shield protects your application against common attacks, including the OWASP Top 10.

What is Arcjet?

Arcjet helps developers protect their apps in just a few lines of code. Implement rate limiting, bot protection, email validation, and defense against common attacks.

Quick start

This guide will show you how to configure Arcjet for a SvelteKit app.

1. Install SDK

In your project root, run the following command to install the SDK:

npm i @arcjet/sveltekit

pnpm add @arcjet/sveltekit

yarn add @arcjet/sveltekit

2. Set your key

Create a free Arcjet account then follow the instructions to add a site and get a key. Add it to a .env.local file in your SvelteKit project root:

ARCJET_KEY=ajkey_yourkey

3. Protect every route

If you wish to enable Arcjet Shield across your entire SvelteKit application, you can install the SDK as a hook. SvelteKit hooks run before every request, allowing Arcjet to protect your entire application before your code runs.

Create a file called hooks.server.ts in your project (inside src):

import { env } from "$env/dynamic/private";
import arcjet, { shield } from "@arcjet/sveltekit";
import { error, type RequestEvent } from "@sveltejs/kit";

const aj = arcjet({
  key: env.ARCJET_KEY!, // Get your site key from https://app.arcjet.com
  rules: [
    // Protect against common attacks with Arcjet Shield
    shield({
      mode: "LIVE", // will block requests. Use "DRY_RUN" to log only
    }),
  ],
});

export async function handle({
  event,
  resolve,
}: {
  event: RequestEvent;
  resolve: (event: RequestEvent) => Response | Promise<Response>;
}): Promise<Response> {
  const decision = await aj.protect(event);

  if (decision.isDenied()) {
    return error(403, "Forbidden");
  }

  return resolve(event);
}

Create a file called hooks.server.js in your project (inside src):

import { env } from "$env/dynamic/private";
import arcjet, { shield } from "@arcjet/sveltekit";
import { error } from "@sveltejs/kit";

const aj = arcjet({
  key: env.ARCJET_KEY, // Get your site key from https://app.arcjet.com
  rules: [
    // Protect against common attacks with Arcjet Shield
    shield({
      mode: "LIVE", // will block requests. Use "DRY_RUN" to log only
    }),
  ],
});

export async function handle({ event, resolve }) {
  const decision = await aj.protect(event);

  if (decision.isDenied()) {
    return error(403, "Forbidden");
  }

  return resolve(event);
}

4. Start app

Start your app and load http://localhost:5173. Refresh the page and you will see the requests showing up in the Arcjet dashboard. Your entire application is protected.

5. Simulate a suspicious request

To see Arcjet Shield in action, try making a request with the special header x-arcjet-suspicious set to true. After 5 requests, Arcjet Shield will be triggered and will block the request. This simulates the threshold being reached and is a constant, so you can use it as part of your tests.

curl -v -H "x-arcjet-suspicious: true" http://localhost:5173

The default response for a blocked request is a 403 Forbidden which you will see when you make the 6th request:

# ...5 requests made previously
curl -v -H "x-arcjet-suspicious: true" http://localhost:5173
...
> GET / HTTP/2
> Host: localhost:5173
> User-Agent: curl/8.4.0
> Accept: */*
> x-arcjet-suspicious: true
>
< HTTP/2 403
< content-type: application/json; charset=utf-8
< date: Tue, 09 Jan 2024 13:43:04 GMT
< etag: "7a3v9j8es220"
< vary: Accept-Encoding
< content-length: 72
<
* Connection #0 to host localhost left intact
{"message":"Forbidden"}%

FAQs

Do I need to run any infrastructure e.g. Redis?

No, Arcjet handles all the infrastructure for you so you don't need to worry about deploying global Redis clusters, designing data structures to track rate limits, or keeping security detection rules up to date.

What is the performance overhead?

Arcjet SDK tries to do as much as possible asynchronously and locally to minimize latency for each request. Where decisions can be made locally or previous decisions are cached in-memory, latency is usually <1ms.

When a call to the Arcjet API is required, such as when tracking a rate limit in a serverless environment, there is some additional latency before a decision is made. The Arcjet API has been designed for high performance and low latency, and is deployed to multiple regions around the world. The SDK will automatically use the closest region which means the total overhead is typically no more than 20-30ms, often significantly less.

What happens if Arcjet is unavailable?

Where a decision has been cached locally e.g. blocking a client, Arcjet will continue to function even if the service is unavailable.

If a call to the Arcjet API is needed and there is a network problem or Arcjet is unavailable, the default behavior is to fail open and allow the request. You have control over how to handle errors, including choosing to fail close if you prefer. See the reference docs for details.

How does Arcjet protect me against DDoS attacks?

Network layer attacks tend to be generic and high volume, so these are best handled by your hosting platform. Most cloud providers include network DDoS protection by default.

Arcjet sits closer to your application so it can understand the context. This is important because some types of traffic may not look like a DDoS attack, but can still have the same effect. For example, a customer making too many API requests and affecting other customers, or large numbers of signups from disposable email addresses.

Network-level DDoS protection tools find it difficult to protect against this type of traffic because they don't understand the structure of your application. Arcjet can help you to identify and block this traffic by integrating with your codebase and understanding the context of the request e.g. the customer ID or sensitivity of the API route.

Volumetric network attacks are best handled by your hosting provider. Application level attacks need to be handled by the application. That's where Arcjet helps.

What next?

Arcjet can be used with specific rules on individual routes or as general protection on your entire application. You can customize bot protection, rate limiting for your API and minimize fraudulent registrations with the signup form protection.

Arcjet Shield reference Full details about Arcjet shield.

Example app Check out our SvelteKit example code in GitHub.

Bot protection Protect your app from bots and scrapers.

Rate limiting Protect your app from abuse.

Email validation Minimize fraudulent registrations.

Signup form protection Protect your signup form from abuse.

SDK reference SvelteKit SDK reference guide.

Get help

Need help with anything? Email us or join our Discord to get support from our engineering team.