Docs

Introduction

What is rune

Philosophy

Why rune

Architecture

Getting Started

Installation

Quick start

Project structure

The dev loop

Tutorial: build an app

1. Create the app

2. Pages & routes

3. Layouts

4. State with Mimir

5. SSR & data

6. API routes

7. Styling

8. Build & deploy

Core Concepts

The application object

Rendering pipeline

Hydration

The build manifest

Configuration (ekko.json)

Permissions

Conventions

Routing

File-based routing

Dynamic routes

The router (useRouter)

Navigation & Link

Guards & redirects

Programmatic routes

Server-Side Rendering

Overview

The ssr() function

Strategies (eager/lazy)

SSR → hydration

Caching & invalidation

SEO

Mimir, state management

Overview

Atoms

Reading & writing

Selectors (derived state)

Subscriptions & the store

SSR & hydration

Persistence & sessions

Patterns & recipes

Pitfalls

Pages & Layouts

Pages

Layouts

Error & not-found

API Routes

Defining routes

Request & response

Middleware

helmet

cors

rateLimit

bodyLimit

validateContentType

csrf

requestId

timeout

errorHandler

httpsRedirect

secureCookies

ipFilter

safePath

Validation & options

Styling & Theming

SCSS

Theming (light/dark)

Asgard integration

No flash (no-FOUC)

Building & Deploying

The build

Static assets

Production deploy

API Reference

ekko:rune

ekko:rune/router

ekko:rune/mimir

ekko:rune/seo

ekko:ssr / css

ekko.json schema

CLI commands

Guides

Rune app from scratch

Recipes

Dark mode

Forms

Data fetching

Authentication

Pagination

FAQ (use cases)

`helmet()`

Harden every response with a set of sensible security headers. The single most valuable middleware for any public site, and the one to add first.

helmet request flow

Use case

A browser will do risky things unless a response tells it not to: sniff a response's content type, render your page inside a hostile <iframe>, leak the full referrer to third parties, or load scripts from anywhere. helmet sets the headers that turn those defaults off, in one line, for the whole app.

How it works

It runs on every response and adds the standard hardening headers before next():

X-Content-Type-Options: nosniff , stop MIME sniffing.
X-Frame-Options: DENY , block clickjacking via framing.
X-XSS-Protection: 0 , disable the legacy, buggy auditor (CSP is the real defence).
Referrer-Policy: strict-origin-when-cross-origin , trim the referrer cross-site.
Content-Security-Policy: default-src 'self' , only load your own assets by default.
Strict-Transport-Security (HSTS) , force HTTPS on repeat visits.
A restrictive Permissions-Policy , deny camera, microphone, geolocation, payment.

Configuration

Option	Default	Notes
`frameguard`	`"DENY"`	`X-Frame-Options` value (`"SAMEORIGIN"` to allow same-origin framing).
`contentSecurityPolicy`	`"default-src 'self'"`	A CSP string, or `false` to omit the header.
`hsts.maxAge`	`31536000`	HSTS max-age (seconds); `includeSubDomains` is always added.
`permissionsPolicy`	`camera=(), microphone=(), geolocation=(), payment=()`	The `Permissions-Policy` value.

Example

00000000001
2
3
4
5
6
7
8
9
10
11
import { helmet } from "ekko:web";
 
app.use(helmet());
 
// customise for a page that embeds third-party assets:
app.use(helmet({
  frameguard: "SAMEORIGIN",
  contentSecurityPolicy: "default-src 'self'; img-src 'self' data:; style-src 'self' 'unsafe-inline'",
  hsts: { maxAge: 63072000 },
  permissionsPolicy: "camera=(), microphone=(), geolocation=()",
}));

Notes

A rune docs or marketing site that loads only its own assets is happy with the default CSP. If you embed third-party scripts, fonts, or analytics, widen the CSP (add the specific sources) rather than disabling it with contentSecurityPolicy: false.

Next: cors.

On this page

Use case How it works Configuration Example Notes