SvelteKit shield reference
Arcjet Shield protects your application against common attacks, including the OWASP Top 10.
Configuration
Shield is configured by specifying which mode you want it to run in.
The configuration definition is:
type ShieldOptions = { mode?: "LIVE" | "DRY_RUN";};
The arcjet
client is configured with one or more shield
rules which take
one or many ShieldOptions
.
Per route
This configures shield on a single route.
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 load(event: RequestEvent) { const decision = await aj.protect(event);
if (decision.isDenied()) { return error(403, "You are suspicious!"); }
return {};}
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 load(event) { const decision = await aj.protect(event);
if (decision.isDenied()) { return error(403, "You are suspicious!"); }
return {};}
Hooks
This will run on every request to your SvelteKit app - see the SvelteKit Hooks docs for details.
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);}
Avoiding double protection with hooks
If you use Arcjet in hooks and individual routes, you need to be careful that Arcjet is not running multiple times per request. This can be avoided by excluding the individual routes before running Arcjet in the hook.
For example, if you already have a shield rule defined in the API route
at /api/arcjet
, you can exclude it from the hook like this:
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> { // Ignore routes that extend the Arcjet rules // - they will call `.protect` themselves const filteredRoutes = ["/api/arcjet"]; if (filteredRoutes.includes(event.url.pathname)) { // return - route will handle protection return resolve(event); }
// Ensure every other route is protected with shield const decision = await aj.protect(event);
if (decision.isDenied()) { return error(403, "Forbidden"); }
// Continue with the route return resolve(event);}
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 }) { // Ignore routes that extend the Arcjet rules // - they will call `.protect` themselves const filteredRoutes = ["/api/arcjet"]; if (filteredRoutes.includes(event.url.pathname)) { // return - route will handle protecttion return resolve(event); }
// Ensure every other route is protected with shield const decision = await aj.protect(event);
if (decision.isDenied()) { return error(403, "Forbidden"); }
// Continue with the route return resolve(event);}
Decision
The quick start example will deny requests that are determined to be suspicious, immediately returning a response to the client using SvelteKit’s server hook.
Arcjet also provides a single protect
function that is used to execute your
protection rules. This requires a RequestEvent
property which is the event
context as passed to the request handler.
This function returns a Promise
that resolves to an
ArcjetDecision
object. This contains the following properties:
id
(string
) - The unique ID for the request. This can be used to look up the request in the Arcjet dashboard. It is prefixed withreq_
for decisions involving the Arcjet cloud API. For decisions taken locally, the prefix islreq_
.conclusion
(ArcjetConclusion
) - The final conclusion based on evaluating each of the configured rules. If you wish to accept Arcjet’s recommended action based on the configured rules then you can use this property.reason
(ArcjetReason
) - An object containing more detailed information about the conclusion.results
(ArcjetRuleResult[]
) - An array ofArcjetRuleResult
objects containing the results of each rule that was executed.ip
(ArcjetIpDetails
) - An object containing Arcjet’s analysis of the client IP address. See IP analysis in the SDK reference for more information.
See the SDK reference for more details about the rule results.
You check if a deny conclusion has been returned by a shield rule by using
decision.isDenied()
and decision.reason.isShield()
respectively.
You can iterate through the results and check whether a shield rule was applied:
for (const result of decision.results) { console.log("Rule Result", result);}
This example will log the full result as well as the shield rule:
Create a new API route at /src/routes/api/arcjet/+server.ts
:
import { env } from "$env/dynamic/private";import arcjet, { fixedWindow, shield } from "@arcjet/sveltekit";import { error, json, type RequestEvent } from "@sveltejs/kit";
const aj = arcjet({ key: env.ARCJET_KEY!, rules: [ fixedWindow({ mode: "LIVE", window: "1h", max: 60, }), shield({ mode: "LIVE", }), ],});
export async function GET(event: RequestEvent) { const decision = await aj.protect(event);
for (const result of decision.results) { console.log("Rule Result", result);
if (result.reason.isRateLimit()) { console.log("Rate limit rule", result); }
if (result.reason.isShield()) { console.log("Shield rule", result); } }
if (decision.isDenied()) { return error(403, "Forbidden"); }
return json({ message: "Hello world" });}
Create a new API route at /src/routes/api/arcjet/+server.js
:
import arcjet, { fixedWindow, shield } from "@arcjet/sveltekit";import { error, json } from "@sveltejs/kit";
const aj = arcjet({ key: env.ARCJET_KEY, rules: [ fixedWindow({ mode: "LIVE", window: "1h", max: 60, }), shield({ mode: "LIVE", }), ],});
export async function GET(event) { const decision = await aj.protect(event);
for (const result of decision.results) { console.log("Rule Result", result);
if (result.reason.isRateLimit()) { console.log("Rate limit rule", result); }
if (result.reason.isShield()) { console.log("Shield rule", result); } }
if (decision.isDenied()) { return error(403, "Forbidden"); }
return json({ message: "Hello world" });}
Error handling
Arcjet is designed to fail open so that a service issue or misconfiguration does
not block all requests. The SDK will also time out and fail open after 500ms
when NODE_ENV
is production
and 1000ms otherwise. However, in most cases,
the response time will be less than 20-30ms.
If there is an error condition, Arcjet will return an
ERROR
type and you can check the reason
property for more information, like
accessing decision.reason.message
.
import { env } from "$env/dynamic/private";import arcjet, { shield } from "@arcjet/sveltekit";import { error, json, type RequestEvent } from "@sveltejs/kit";
const aj = arcjet({ key: env.ARCJET_KEY!, rules: [ shield({ mode: "LIVE", }), ],});
export async function GET(event: RequestEvent) { const decision = await aj.protect(event);
if (decision.isErrored()) { // Fail open by logging the error and continuing console.warn("Arcjet error", decision.reason.message); // You could also fail closed here for very sensitive routes //return error(503, { message: "Service unavailable" }); }
if (decision.isDenied()) { return error(403, { message: "You are suspicious!" }); }
return json({ message: "Hello world" });}
import { env } from "$env/dynamic/private";import arcjet, { shield } from "@arcjet/sveltekit";import { error, json } from "@sveltejs/kit";
const aj = arcjet({ key: env.ARCJET_KEY, rules: [ shield({ mode: "LIVE", }), ],});
export async function GET(event) { const decision = await aj.protect(event);
if (decision.isErrored()) { // Fail open by logging the error and continuing console.warn("Arcjet error", decision.reason.message); // You could also fail closed here for very sensitive routes //return error(503, { message: "Service unavailable" }); }
if (decision.isDenied()) { return error(403, { message: "You are suspicious!" }); }
return json({ message: "Hello world" });}