Arcjet filters let you block requests using
Wireshark-like display
filter
expressions over HTTP headers, IP addresses, and other request fields. This
allows you to quickly enforce rules like allow/deny by country, network, or
user-agent.
What is Arcjet?
Arcjet helps developers protect their apps in just a few lines of code. Bot detection. Rate limiting. Email validation. Attack protection. Data redaction. A developer-first approach to security.Quick start
Section titled “Quick start”This guide shows how to protect your
1. Install Arcjet
Section titled “1. Install Arcjet”Run the following command to install the SDK in your project:
bun add @arcjet/bunThe package @arcjet/bun is made for Bun’s own HTTP server.
If you use Bun’s Node.js compatibility layer,
use @arcjet/node instead.
deno add npm:@arcjet/denonpm install @arcjet/fastifypnpm add @arcjet/fastifyyarn add @arcjet/fastifynpm install @arcjet/nestpnpm add @arcjet/nestyarn add @arcjet/nestnpm install @arcjet/nextpnpm add @arcjet/nextyarn add @arcjet/nextnpm install @arcjet/nodepnpm add @arcjet/nodeyarn add @arcjet/nodenpm install @arcjet/react-routerpnpm add @arcjet/react-routeryarn add @arcjet/react-routernpm install @arcjet/remixpnpm add @arcjet/remixyarn add @arcjet/remixnpm install @arcjet/sveltekitpnpm add @arcjet/sveltekityarn add @arcjet/sveltekitnpx astro add @arcjet/astropnpm astro add @arcjet/astroyarn astro add @arcjet/astroThis automatically installs and configures the Arcjet Astro integration in your project. Learn more about how this works in the Astro docs . Alternatively, you can follow the manual installation instructions.
Manual installation instruction
In your project root, run the following command:
npm add @arcjet/astropnpm add @arcjet/astroyarn add @arcjet/astroUpdate your Astro configuration file:
import { defineConfig } from "astro/config";import node from "@astrojs/node";import arcjet from "@arcjet/astro";
// https://astro.build/configexport default defineConfig({ adapter: node({ mode: "standalone", }), env: { // We recommend enabling secret validation validateSecrets: true, }, integrations: [ // Add the Arcjet Astro integration arcjet(), ],});2. Set your key
Section titled “2. Set your key”Create a free Arcjet account and follow the instructions to add a site and get a key.
The Arcjet Astro integration reads your Arcjet key from the ARCJET_KEY
environment variable. During development, add your key to a .env.local file
in your project root. Astro will automatically load the environment
variables from this file, learn more in the
Astro docs.
# Get your site key from https://app.arcjet.comARCJET_KEY=ajkey_yourkeyBun automatically loads environment variables from certain files.
Arcjet integrations read from ARCJET_* environment variables.
Create a .env.local file in the root of your project and add your key:
# Run in development mode; leave this unset in production.ARCJET_ENV=development# Get your site key at <https://app.arcjet.com>.ARCJET_KEY=ajkey_yourkeyDeno loads environment variables with the --env-file flag.
The Arcjet Deno integration reads your key from the ARCJET_KEY variable.
Create a .env file in the root of your project and add your key:
# Run in development mode; leave this unset in production.ARCJET_ENV=development# Get your site key at <https://app.arcjet.com>.ARCJET_KEY=ajkey_yourkeyNode.js loads environment variables with the --env-file flag.
Arcjet integrations read from ARCJET_* environment variables.
Create a .env.local file in the root of your project and add your key:
# Run in development mode; leave this unset in production.ARCJET_ENV=development# Get your site key at <https://app.arcjet.com>.ARCJET_KEY=ajkey_yourkeyNestJS loads environment variables with the @nestjs/config
module.
Arcjet integrations read from ARCJET_* environment variables.
Create a .env file in the root of your project and add your key:
Add your key to a .env file in your project root.
# Run in development mode; leave this unset in production.ARCJET_ENV=development# Get your site key at <https://app.arcjet.com>.ARCJET_KEY=ajkey_yourkeyNext.js automatically loads environment variables from certain files.
Arcjet integrations read from ARCJET_* environment variables.
Create a .env.local file in the root of your project and add your key:
# Get your site key at <https://app.arcjet.com>.ARCJET_KEY=ajkey_yourkeyNode.js loads environment variables with the --env-file flag.
Arcjet integrations read from ARCJET_* environment variables.
Create a .env.local file in the root of your project and add your key:
# Run in development mode; leave this unset in production.ARCJET_ENV=development# Get your site key at <https://app.arcjet.com>.ARCJET_KEY=ajkey_yourkeyReact Router loads environment variables for you in development and expects
you to define them in your hosting platform in production.
Arcjet integrations read from ARCJET_* environment variables.
Create a .env file in the root of your project and add your key:
# Run in development mode; leave this unset in production.ARCJET_ENV=development# Get your site key at <https://app.arcjet.com>.ARCJET_KEY=ajkey_yourkeyRemix loads environment variables for you in development and expects you to
define them in your hosting platform in production.
Arcjet integrations read from ARCJET_* environment variables.
Create a .env file in the root of your project and add your key:
# Run in development mode; leave this unset in production.ARCJET_ENV=development# Get your site key at <https://app.arcjet.com>.ARCJET_KEY=ajkey_yourkeySvelteKit loads environment variables for you in development and expects
you to define them in your hosting platform in production.
Arcjet integrations read from ARCJET_* environment variables.
Create a .env file in the root of your project and add your key:
# Run in development mode; leave this unset in production.ARCJET_ENV=development# Get your site key at <https://app.arcjet.com>.ARCJET_KEY=ajkey_yourkey3. Add filters
Section titled “3. Add filters”Arcjet protection runs on HTTP requests. You can add Arcjet to your Deno server to protect routes.
Create an index.ts file with the following code:
import arcjet, { filter } from "@arcjet/deno";
// Get your Arcjet key at <https://app.arcjet.com>.// Set it as an environment variable instead of hard coding it.const arcjetKey = Deno.env.get("ARCJET_KEY");
if (!arcjetKey) { throw new Error("Cannot find `ARCJET_KEY` environment variable");}
const aj = arcjet({ characteristics: ['http.request.headers["user-agent"]', "ip.src"], key: arcjetKey, rules: [ filter({ // This will deny any traffic using a VPN, Tor, that matches the curl // user agent, or that has no user agent deny: [ 'ip.src.vpn or ip.src.tor or lower(http.request.headers["user-agent"]) matches "curl" or len(http.request.headers["user-agent"]) eq 0', ], // Block requests with `LIVE`, use `DRY_RUN` to log only. mode: "LIVE", }), ],});
Deno.serve( { port: 3000 }, aj.handler(async function (request) { const decision = await aj.protect(request);
if (decision.isDenied()) { return new Response("Forbidden", { status: 403 }); }
return new Response("Hello world"); }),);Define filters in your astro.config.mjs file:
import node from "@astrojs/node";import arcjet, { filter } from "@arcjet/astro";import { defineConfig } from "astro/config";
export default defineConfig({ adapter: node({ mode: "standalone" }), env: { validateSecrets: true }, integrations: [ arcjet({ characteristics: ['http.request.headers["user-agent"]', "ip.src"], rules: [ filter({ // This will deny any traffic using a VPN, Tor, that matches the curl // user agent, or that has no user agent deny: [ 'ip.src.vpn or ip.src.tor or lower(http.request.headers["user-agent"]) matches "curl" or len(http.request.headers["user-agent"]) eq 0', ], // Block requests with `LIVE`, use `DRY_RUN` to log only. mode: "LIVE", }), ], }), ],});Arcjet protection runs on HTTP requests. That is useful for dynamic routes in Astro as those are rendered per request. It is not useful for static routes as those are pre-rendered at build time.
Make sure the root route is dynamic.
This can be done by exporting prerender as false in the root page
frontmatter:
---export const prerender = false---
<html lang="en">…Astro uses middleware to intercept requests and responses. That’s where Arcjet can be added.
Create a middleware.js file in the src/ folder with the following code:
import aj from "arcjet:client";import { defineMiddleware } from "astro:middleware";
export const onRequest = defineMiddleware(async function (context, next) { // Arcjet can be used in Astro middleware but only on requests that are not // prerendered. if (context.isPrerendered) { console.info( "Cannot run Arcjet on prerendered request for `%s`", context.request.url, ); return next(); }
const decision = await aj.protect(context.request);
if (decision.isDenied()) { return Response.json({ error: "Forbidden" }, { status: 403 }); }
return next();});Create a middleware.ts file in the src/ folder with the following code:
import aj from "arcjet:client";import { defineMiddleware } from "astro:middleware";
export const onRequest = defineMiddleware(async function (context, next) { // Arcjet can be used in Astro middleware but only on requests that are not // prerendered. if (context.isPrerendered) { console.info( "Cannot run Arcjet on prerendered request for `%s`", context.request.url, ); return next(); }
const decision = await aj.protect(context.request);
if (decision.isDenied()) { return Response.json({ error: "Forbidden" }, { status: 403 }); }
return next();});Arcjet protection runs on HTTP requests. Next.js uses middleware to handle requests. That’s where Arcjet can be added.
Create a middleware.js file in your project
(in src/ if you have it, next to app/)
with the following code:
import arcjet, { createMiddleware, filter } from "@arcjet/next";
// Get your Arcjet key at <https://app.arcjet.com>.// Set it as an environment variable instead of hard coding it.const arcjetKey = process.env.ARCJET_KEY;
if (!arcjetKey) { throw new Error("Cannot find `ARCJET_KEY` environment variable");}
const aj = arcjet({ characteristics: ['http.request.headers["user-agent"]', "ip.src"], key: arcjetKey, rules: [ filter({ // This will deny any traffic using a VPN, Tor, that matches the curl // user agent, or that has no user agent deny: [ 'ip.src.vpn or ip.src.tor or lower(http.request.headers["user-agent"]) matches "curl" or len(http.request.headers["user-agent"]) eq 0', ], // Block requests with `LIVE`, use `DRY_RUN` to log only. mode: "LIVE", }), ],});
export default createMiddleware(aj);
export const config = { matcher: ["/((?!_next/static|_next/image|favicon.ico).*)"],};Create a middleware.ts file in your project
(in src/ if you have it, next to app/)
with the following code:
import arcjet, { createMiddleware, filter } from "@arcjet/next";
// Get your Arcjet key at <https://app.arcjet.com>.// Set it as an environment variable instead of hard coding it.const arcjetKey = process.env.ARCJET_KEY;
if (!arcjetKey) { throw new Error("Cannot find `ARCJET_KEY` environment variable");}
const aj = arcjet({ characteristics: ['http.request.headers["user-agent"]', "ip.src"], key: arcjetKey, rules: [ filter({ // This will deny any traffic using a VPN, Tor, that matches the curl // user agent, or that has no user agent deny: [ 'ip.src.vpn or ip.src.tor or lower(http.request.headers["user-agent"]) matches "curl" or len(http.request.headers["user-agent"]) eq 0', ], // Block requests with `LIVE`, use `DRY_RUN` to log only. mode: "LIVE", }), ],});
export default createMiddleware(aj);
export const config = { matcher: ["/((?!_next/static|_next/image|favicon.ico).*)"],};Arcjet protection runs on HTTP requests. You can add Arcjet to your Bun server to protect routes.
Create an index.js file with the following code:
import arcjet, { filter } from "@arcjet/bun";import { env } from "bun";
// Get your Arcjet key at <https://app.arcjet.com>.// Set it as an environment variable instead of hard coding it.const arcjetKey = env.ARCJET_KEY;
if (!arcjetKey) { throw new Error("Cannot find `ARCJET_KEY` environment variable");}
const aj = arcjet({ characteristics: ['http.request.headers["user-agent"]', "ip.src"], key: arcjetKey, rules: [ filter({ // This will deny any traffic using a VPN, Tor, that matches the curl // user agent, or that has no user agent deny: [ 'ip.src.vpn or ip.src.tor or lower(http.request.headers["user-agent"]) matches "curl" or len(http.request.headers["user-agent"]) eq 0', ], // Block requests with `LIVE`, use `DRY_RUN` to log only. mode: "LIVE", }), ],});
export default { fetch: aj.handler(async function (request) { const decision = await aj.protect(request);
if (decision.isDenied()) { return new Response("Forbidden", { status: 403 }); }
return new Response("Hello world"); }), port: 3000,};Create an index.ts file with the following code:
import arcjet, { filter } from "@arcjet/bun";import { env } from "bun";
// Get your Arcjet key at <https://app.arcjet.com>.// Set it as an environment variable instead of hard coding it.const arcjetKey = env.ARCJET_KEY;
if (!arcjetKey) { throw new Error("Cannot find `ARCJET_KEY` environment variable");}
const aj = arcjet({ characteristics: ['http.request.headers["user-agent"]', "ip.src"], key: arcjetKey, rules: [ filter({ // This will deny any traffic using a VPN, Tor, that matches the curl // user agent, or that has no user agent deny: [ 'ip.src.vpn or ip.src.tor or lower(http.request.headers["user-agent"]) matches "curl" or len(http.request.headers["user-agent"]) eq 0', ], // Block requests with `LIVE`, use `DRY_RUN` to log only. mode: "LIVE", }), ],});
export default { fetch: aj.handler(async function (request) { const decision = await aj.protect(request);
if (decision.isDenied()) { return new Response("Forbidden", { status: 403 }); }
return new Response("Hello world"); }), port: 3000,};Arcjet protection runs on HTTP requests. You can add Arcjet to your Fastify server to protect routes.
Create an index.js file with the following code:
import arcjet, { filter } from "@arcjet/fastify";import Fastify from "fastify";
// Get your Arcjet key at <https://app.arcjet.com>.// Set it as an environment variable instead of hard coding it.const arcjetKey = process.env.ARCJET_KEY;
if (!arcjetKey) { throw new Error("Cannot find `ARCJET_KEY` environment variable");}
const aj = arcjet({ characteristics: ['http.request.headers["user-agent"]', "ip.src"], key: arcjetKey, rules: [ filter({ // This will deny any traffic using a VPN, Tor, that matches the curl // user agent, or that has no user agent deny: [ 'ip.src.vpn or ip.src.tor or lower(http.request.headers["user-agent"]) matches "curl" or len(http.request.headers["user-agent"]) eq 0', ], // Block requests with `LIVE`, use `DRY_RUN` to log only. mode: "LIVE", }), ],});
const fastify = Fastify({ logger: true });
fastify.get("/", async function (request, reply) { const decision = await aj.protect(request);
if (decision.isDenied()) { return reply.status(403).send("Forbidden"); }
return reply.status(200).send("Hello world");});
await fastify.listen({ port: 3000 });Create an index.ts file with the following code:
import arcjet, { filter } from "@arcjet/fastify";import Fastify from "fastify";
// Get your Arcjet key at <https://app.arcjet.com>.// Set it as an environment variable instead of hard coding it.const arcjetKey = process.env.ARCJET_KEY;
if (!arcjetKey) { throw new Error("Cannot find `ARCJET_KEY` environment variable");}
const aj = arcjet({ characteristics: ['http.request.headers["user-agent"]', "ip.src"], key: arcjetKey, rules: [ filter({ // This will deny any traffic using a VPN, Tor, that matches the curl // user agent, or that has no user agent deny: [ 'ip.src.vpn or ip.src.tor or lower(http.request.headers["user-agent"]) matches "curl" or len(http.request.headers["user-agent"]) eq 0', ], // Block requests with `LIVE`, use `DRY_RUN` to log only. mode: "LIVE", }), ],});
const fastify = Fastify({ logger: true });
fastify.get("/", async function (request, reply) { const decision = await aj.protect(request);
if (decision.isDenied()) { return reply.status(403).send("Forbidden"); }
return reply.status(200).send("Hello world");});
await fastify.listen({ port: 3000 });Arcjet protection runs on HTTP requests. NestJS uses guards to handle requests. That’s where Arcjet can be added. In this example a global guard is used.
Create a main.js file in the src/ folder with the following code:
import { ArcjetGuard, ArcjetModule, filter } from "@arcjet/nest";import { Module } from "@nestjs/common";import { ConfigModule } from "@nestjs/config";import { APP_GUARD, NestFactory } from "@nestjs/core";
// Get your Arcjet key at <https://app.arcjet.com>.// Set it as an environment variable instead of hard coding it.const arcjetKey = process.env.ARCJET_KEY;
if (!arcjetKey) { throw new Error("Cannot find `ARCJET_KEY` environment variable");}
@Module({ controllers: [], imports: [ ConfigModule.forRoot({ isGlobal: true }), ArcjetModule.forRoot({ characteristics: ['http.request.headers["user-agent"]', "ip.src"], isGlobal: true, key: arcjetKey, rules: [ filter({ // This will deny any traffic using a VPN, Tor, that matches the curl // user agent, or that has no user agent deny: [ 'ip.src.vpn or ip.src.tor or lower(http.request.headers["user-agent"]) matches "curl" or len(http.request.headers["user-agent"]) eq 0', ], // Block requests with `LIVE`, use `DRY_RUN` to log only. mode: "LIVE", }), ], }), ], providers: [{ useClass: ArcjetGuard, provide: APP_GUARD }],})class AppModule {}
async function bootstrap() { const app = await NestFactory.create(AppModule); await app.listen(3000);}
bootstrap();Create a main.ts file in the src/ folder with the following code:
import { ArcjetGuard, ArcjetModule, filter } from "@arcjet/nest";import { Module } from "@nestjs/common";import { ConfigModule } from "@nestjs/config";import { APP_GUARD, NestFactory } from "@nestjs/core";
// Get your Arcjet key at <https://app.arcjet.com>.// Set it as an environment variable instead of hard coding it.const arcjetKey = process.env.ARCJET_KEY;
if (!arcjetKey) { throw new Error("Cannot find `ARCJET_KEY` environment variable");}
@Module({ controllers: [], imports: [ ConfigModule.forRoot({ isGlobal: true }), ArcjetModule.forRoot({ characteristics: ['http.request.headers["user-agent"]', "ip.src"], isGlobal: true, key: arcjetKey, rules: [ filter({ // This will deny any traffic using a VPN, Tor, that matches the curl // user agent, or that has no user agent deny: [ 'ip.src.vpn or ip.src.tor or lower(http.request.headers["user-agent"]) matches "curl" or len(http.request.headers["user-agent"]) eq 0', ], // Block requests with `LIVE`, use `DRY_RUN` to log only. mode: "LIVE", }), ], }), ], providers: [{ useClass: ArcjetGuard, provide: APP_GUARD }],})class AppModule {}
async function bootstrap() { const app = await NestFactory.create(AppModule); await app.listen(3000);}
bootstrap();Arcjet protection runs on HTTP requests. You can add Arcjet to your Node server to protect routes.
Create an index.js file with the following code:
import http from "node:http";import arcjet, { filter } from "@arcjet/node";
// Get your Arcjet key at <https://app.arcjet.com>.// Set it as an environment variable instead of hard coding it.const arcjetKey = process.env.ARCJET_KEY;
if (!arcjetKey) { throw new Error("Cannot find `ARCJET_KEY` environment variable");}
const aj = arcjet({ characteristics: ['http.request.headers["user-agent"]', "ip.src"], key: arcjetKey, rules: [ filter({ // This will deny any traffic using a VPN, Tor, that matches the curl // user agent, or that has no user agent deny: [ 'ip.src.vpn or ip.src.tor or lower(http.request.headers["user-agent"]) matches "curl" or len(http.request.headers["user-agent"]) eq 0', ], // Block requests with `LIVE`, use `DRY_RUN` to log only. mode: "LIVE", }), ],});
const server = http.createServer(async function (request, response) { const decision = await aj.protect(request);
if (decision.isDenied()) { response.writeHead(403); response.end("Forbidden"); return; }
response.writeHead(200); response.end("Hello world");});
server.listen(3000);Create an index.ts file with the following code:
import http from "node:http";import arcjet, { filter } from "@arcjet/node";
// Get your Arcjet key at <https://app.arcjet.com>.// Set it as an environment variable instead of hard coding it.const arcjetKey = process.env.ARCJET_KEY;
if (!arcjetKey) { throw new Error("Cannot find `ARCJET_KEY` environment variable");}
const aj = arcjet({ characteristics: ['http.request.headers["user-agent"]', "ip.src"], key: arcjetKey, rules: [ filter({ // This will deny any traffic using a VPN, Tor, that matches the curl // user agent, or that has no user agent deny: [ 'ip.src.vpn or ip.src.tor or lower(http.request.headers["user-agent"]) matches "curl" or len(http.request.headers["user-agent"]) eq 0', ], // Block requests with `LIVE`, use `DRY_RUN` to log only. mode: "LIVE", }), ],});
const server = http.createServer(async function (request, response) { const decision = await aj.protect(request);
if (decision.isDenied()) { response.writeHead(403); response.end("Forbidden"); return; }
response.writeHead(200); response.end("Hello world");});
server.listen(3000);Arcjet protection runs on HTTP requests. React Router uses actions and loaders to handle requests to routes. That’s where Arcjet can be added.
Create a file such as home.tsx in the routes/ folder with the following code:
import arcjet, { filter } from "@arcjet/react-router";import type { ReactNode } from "react";import type { Route } from "../routes/+types/home";
// Get your Arcjet key at <https://app.arcjet.com>.// Set it as an environment variable instead of hard coding it.const arcjetKey = process.env.ARCJET_KEY;
if (!arcjetKey) { throw new Error("Cannot find `ARCJET_KEY` environment variable");}
const aj = arcjet({ characteristics: ['http.request.headers["user-agent"]', "ip.src"], key: arcjetKey, rules: [ filter({ // This will deny any traffic using a VPN, Tor, that matches the curl // user agent, or that has no user agent deny: [ 'ip.src.vpn or ip.src.tor or lower(http.request.headers["user-agent"]) matches "curl" or len(http.request.headers["user-agent"]) eq 0', ], // Block requests with `LIVE`, use `DRY_RUN` to log only. mode: "LIVE", }), ],});
export default function Home(): ReactNode { return <>Hello world</>;}
// This loader happens on GET requests, so this would be used for rate limiting.export async function loader( loaderArguments: Route.LoaderArgs,): Promise<undefined> { const decision = await aj.protect(loaderArguments);
if (decision.isDenied()) { throw new Response("Forbidden", { status: 403 }); }}Create a file such as home.jsx in the routes/ folder with the following code:
/** * @import { ReactNode } from "react" * @import { Route } from "../routes/+types/home" */
import arcjet, { filter } from "@arcjet/react-router";
// Get your Arcjet key at <https://app.arcjet.com>.// Set it as an environment variable instead of hard coding it.const arcjetKey = process.env.ARCJET_KEY;
if (!arcjetKey) { throw new Error("Cannot find `ARCJET_KEY` environment variable");}
const aj = arcjet({ characteristics: ['http.request.headers["user-agent"]', "ip.src"], key: arcjetKey, rules: [ filter({ // This will deny any traffic using a VPN, Tor, that matches the curl // user agent, or that has no user agent deny: [ 'ip.src.vpn or ip.src.tor or lower(http.request.headers["user-agent"]) matches "curl" or len(http.request.headers["user-agent"]) eq 0', ], // Block requests with `LIVE`, use `DRY_RUN` to log only. mode: "LIVE", }), ],});
/** * @returns {ReactNode} */export default function Home() { return <>Hello world</>;}
/** * This loader happens on GET requests, so this would be used for rate limiting. * * @param {Route.LoaderArgs} loaderArguments * @returns {Promise<undefined>} */export async function loader(loaderArguments) { const decision = await aj.protect(loaderArguments);
if (decision.isDenied()) { throw new Response("Forbidden", { status: 403 }); }}Arcjet protection runs on HTTP requests. Remix uses actions and loaders to handle requests to routes. That’s where Arcjet can be added.
Create a file such as home.tsx in the routes/ folder with the following
code:
import arcjet, { filter } from "@arcjet/remix";import type { LoaderFunctionArgs } from "@remix-run/node";import type { ReactNode } from "react";
// Get your Arcjet key at <https://app.arcjet.com>.// Set it as an environment variable instead of hard coding it.const arcjetKey = process.env.ARCJET_KEY;
if (!arcjetKey) { throw new Error("Cannot find `ARCJET_KEY` environment variable");}
const aj = arcjet({ characteristics: ['http.request.headers["user-agent"]', "ip.src"], key: arcjetKey, rules: [ filter({ // This will deny any traffic using a VPN, Tor, that matches the curl // user agent, or that has no user agent deny: [ 'ip.src.vpn or ip.src.tor or lower(http.request.headers["user-agent"]) matches "curl" or len(http.request.headers["user-agent"]) eq 0', ], // Block requests with `LIVE`, use `DRY_RUN` to log only. mode: "LIVE", }), ],});
export default function Home(): ReactNode { return <>Hello world</>;}
export async function loader( loaderArguments: LoaderFunctionArgs,): Promise<undefined> { const decision = await aj.protect(loaderArguments);
if (decision.isDenied()) { throw new Response("Forbidden", { status: 403 }); }}Create a file such as home.jsx in the routes/ folder with the following
code:
/** * @import { LoaderFunctionArgs } from "@remix-run/node" * @import { ReactNode } from "react" */
import arcjet, { filter } from "@arcjet/remix";
// Get your Arcjet key at <https://app.arcjet.com>.// Set it as an environment variable instead of hard coding it.const arcjetKey = process.env.ARCJET_KEY;
if (!arcjetKey) { throw new Error("Cannot find `ARCJET_KEY` environment variable");}
const aj = arcjet({ characteristics: ['http.request.headers["user-agent"]', "ip.src"], key: arcjetKey, rules: [ filter({ // This will deny any traffic using a VPN, Tor, that matches the curl // user agent, or that has no user agent deny: [ 'ip.src.vpn or ip.src.tor or lower(http.request.headers["user-agent"]) matches "curl" or len(http.request.headers["user-agent"]) eq 0', ], // Block requests with `LIVE`, use `DRY_RUN` to log only. mode: "LIVE", }), ],});
/** * @returns {ReactNode} */export default function Home() { return <>Hello world</>;}
/** * @param {LoaderFunctionArgs} loaderArguments * @returns {Promise<undefined>} */export async function loader(loaderArguments) { const decision = await aj.protect(loaderArguments);
if (decision.isDenied()) { throw new Response("Forbidden", { status: 403 }); }}Arcjet protection runs on HTTP requests. That is useful for SvelteKit server routes (also known as API routes) and server hooks as those have control over HTTP responses. That’s where Arcjet can be added.
Create a file hooks.server.ts in the src/ folder with the following
code:
import { env } from "$env/dynamic/private";import arcjet, { filter } from "@arcjet/sveltekit";import { type RequestEvent, error } from "@sveltejs/kit";
interface HandleProperties { event: RequestEvent; resolve: Resolve;}
type Resolve = (event: RequestEvent) => Promise<Response> | Response;
// Get your Arcjet key at <https://app.arcjet.com>.// Set it as an environment variable instead of hard coding it.const arcjetKey = env.ARCJET_KEY;
if (!arcjetKey) { throw new Error("Cannot find `ARCJET_KEY` environment variable");}
const aj = arcjet({ characteristics: ['http.request.headers["user-agent"]', "ip.src"], key: arcjetKey, rules: [ filter({ // This will deny any traffic using a VPN, Tor, that matches the curl // user agent, or that has no user agent deny: [ 'ip.src.vpn or ip.src.tor or lower(http.request.headers["user-agent"]) matches "curl" or len(http.request.headers["user-agent"]) eq 0', ], // Block requests with `LIVE`, use `DRY_RUN` to log only. mode: "LIVE", }), ],});
export async function handle(properties: HandleProperties): Promise<Response> { const decision = await aj.protect(properties.event);
if (decision.isDenied()) { return error(403, "Forbidden"); }
return properties.resolve(properties.event);}Create a file hooks.server.js in the src/ folder with the following
code:
/** * @import { RequestEvent } from '@sveltejs/kit'; */
/** * @typedef HandleProperties * @property {RequestEvent} event * @property {Resolve} resolve */
/** * @callback Resolve * @param {RequestEvent} event * @returns {Promise<Response> | Response} */
import { env } from "$env/dynamic/private";import arcjet, { filter } from "@arcjet/sveltekit";import { error } from "@sveltejs/kit";
// Get your Arcjet key at <https://app.arcjet.com>.// Set it as an environment variable instead of hard coding it.const arcjetKey = env.ARCJET_KEY;
if (!arcjetKey) { throw new Error("Cannot find `ARCJET_KEY` environment variable");}
const aj = arcjet({ characteristics: ['http.request.headers["user-agent"]', "ip.src"], key: arcjetKey, rules: [ filter({ // This will deny any traffic using a VPN, Tor, that matches the curl // user agent, or that has no user agent deny: [ 'ip.src.vpn or ip.src.tor or lower(http.request.headers["user-agent"]) matches "curl" or len(http.request.headers["user-agent"]) eq 0', ], // Block requests with `LIVE`, use `DRY_RUN` to log only. mode: "LIVE", }), ],});
/** * @param {HandleProperties} properties * @returns {Promise<Response>} */export async function handle(properties) { const decision = await aj.protect(properties.event);
if (decision.isDenied()) { return error(403, "Forbidden"); }
return properties.resolve(properties.event);}4. Start server
Start your Deno server:
deno run --allow-env --allow-net --allow-read --env-file --watch index.tsYou can also omit the --allow* flags so that Deno will prompt for the needed
permissions.
4. Start app
npm run devpnpm run devyarn run dev4. Start server
bun run --hot index.jsbun run --hot index.ts4. Start server
node --env-file=.env.local --watch index.jsnode --env-file=.env.local --watch index.ts4. Start app
npm run startpnpm run startyarn run start4. Start app
npm run devpnpm run devyarn run dev4. Start server
node --env-file=.env.local --watch index.jsnode --env-file=.env.local --watch index.ts4. Start app
npm run devpnpm run devyarn run dev4. Start app
npm run devpnpm run devyarn run dev4. Start app
npm run devpnpm run devyarn run dev5. Try it out
Section titled “5. Try it out”Make a curl request from your terminal to your app:
curl --head http://localhost:3000curl --head http://localhost:3000curl --head http://localhost:3000curl --head http://localhost:3000curl --head http://localhost:3000curl --head http://localhost:3000curl --head http://localhost:4321curl --head http://localhost:5173curl --head http://localhost:5173curl --head http://localhost:5173You should get a 403 Forbidden response.
The Curl request could result in a 200 OK if you have a .curlrc somewhere
(probably ~/.curlrc) that sets a user-agent field to something other than
Curl.
Try changing the filter expression to match "chrome" or "firefox" and visit
your app with different browsers.
These requests should also show in the Arcjet dashboard.
Make sure you configured ARCJET_KEY correctly if things don’t show up.
See the Filters reference to learn more about the expression language.
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?
Section titled “What next?”Explore
Section titled “Explore”Arcjet can be used with specific rules on individual routes or as general protection on your entire application. You can setup rate limiting for your API, minimize fraudulent registrations with the signup form protection and more.
Get help
Section titled “Get help”Need help with anything? Email support@arcjet.com to get support from our engineering team.