feat: Document nosecone utility (#279)

Co-authored-by: David Mytton <[email protected]>

env.d.ts

@@ -11,3 +11,7 @@ declare module "npm:@arcjet/deno" {
   export * from "@arcjet/deno";
   export default arcjet;
 }
+
+declare module "npm:nosecone" {
+  export { default } from "nosecone";
+}

next-server.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Augment the `next/server` module to fake the API differences between 14 & 15
+ */
+
+// Need to import next/server to augment it with `declare module`
+import "next/server";
+
+declare module "next/server" {
+  // Faking this because Next.js 14 doesn't have the `connection` export
+  export const connection: () => Promise<void>;
+}

package.json

@@ -47,6 +47,8 @@
     "@nestjs/config": "3.3.0",
     "@nestjs/core": "10.4.13",
     "@nestjs/platform-express": "10.4.13",
+    "@nosecone/next": "1.0.0-alpha.34",
+    "@nosecone/sveltekit": "1.0.0-alpha.34",
     "@remix-run/node": "2.15.0",
     "@sveltejs/kit": "2.9.0",
     "ai": "4.0.10",
@@ -60,6 +62,7 @@
     "nanostores": "0.11.3",
     "next": "14.2.15",
     "next-auth": "4.24.10",
+    "nosecone": "1.0.0-alpha.34",
     "openai-chat-tokens": "0.2.8",
     "pagefind": "1.2.0",
     "pino": "9.5.0",

src/components/SDKVersionNosecone.astro

@@ -0,0 +1,4 @@
+<picture class="badge">
+    <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/npm/v/nosecone?style=flat-square&label=%E2%9C%A6Aj%20Nosecone&labelColor=000000&color=5C5866">
+    <img alt="npm badge" src="https://img.shields.io/npm/v/nosecone?style=flat-square&label=%E2%9C%A6Aj%20Nosecone&labelColor=ECE6F0&color=ECE6F0">
+</picture>

src/components/SDKVersionNoseconeNext.astro

@@ -0,0 +1,4 @@
+<picture class="badge">
+    <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/npm/v/@nosecone/next?style=flat-square&label=%E2%9C%A6Aj%20@nosecone/next&labelColor=000000&color=5C5866">
+    <img alt="npm badge" src="https://img.shields.io/npm/v/@nosecone/next?style=flat-square&label=%E2%9C%A6Aj%20@nosecone/next&labelColor=ECE6F0&color=ECE6F0">
+</picture>

src/components/SDKVersionNoseconeSvelteKit.astro

@@ -0,0 +1,4 @@
+<picture class="badge">
+    <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/npm/v/@nosecone/sveltekit?style=flat-square&label=%E2%9C%A6Aj%20@nosecone/sveltekit&labelColor=000000&color=5C5866">
+    <img alt="npm badge" src="https://img.shields.io/npm/v/@nosecone/sveltekit?style=flat-square&label=%E2%9C%A6Aj%20@nosecone/sveltekit&labelColor=ECE6F0&color=ECE6F0">
+</picture>

src/content/docs/nosecone/quick-start.mdx

@@ -0,0 +1,169 @@
+---
+title: "Arcjet Nosecone: Security headers for JS frameworks"
+description: "How to use the open source Arcjet Nosecone library to set security headers (CSP, HSTS, and others) in your Bun, Deno, Next.js, Node.js, or SvelteKit app."
+prev: false
+next: false
+frameworks:
+  - bun
+  - deno
+  - next-js
+  - node-js
+  - sveltekit
+ajToc:
+  - text: "Supported headers"
+    anchor: "supported-headers"
+  - text: "Quick start"
+    anchor: "quick-start"
+    children:
+      - text: 1. Install Nosecone
+        anchor: "1-install-nosecone"
+      - text: 2. Configure your application
+        anchor: "2-configure-your-application"
+      - text: 3. Run your application
+        anchor: "3-run-your-application"
+      - text: 4. Inspect the headers
+        anchor: "4-inspect-the-headers"
+  - text: "What next?"
+    anchor: "what-next"
+  - text: "Get help"
+    anchor: "get-help"
+---
+
+import WhatAreArcjetUtilities from "@/components/WhatAreArcjetUtilities.astro";
+import FrameworkName from "@/components/FrameworkName";
+import SDKVersionNosecone from "@/components/SDKVersionNosecone.astro";
+import SlotByFramework from "@/components/SlotByFramework";
+import { LinkCard, CardGrid } from "@astrojs/starlight/components";
+import Comments from "/src/components/Comments.astro";
+
+import BunStep1 from "@/snippets/nosecone/quick-start/bun/Step1.mdx";
+import BunStep2 from "@/snippets/nosecone/quick-start/bun/Step2.mdx";
+import BunStep3 from "@/snippets/nosecone/quick-start/bun/Step3.mdx";
+import BunStep4 from "@/snippets/nosecone/quick-start/bun/Step4.mdx";
+
+import DenoStep1 from "@/snippets/nosecone/quick-start/deno/Step1.mdx";
+import DenoStep2 from "@/snippets/nosecone/quick-start/deno/Step2.mdx";
+import DenoStep3 from "@/snippets/nosecone/quick-start/deno/Step3.mdx";
+import DenoStep4 from "@/snippets/nosecone/quick-start/deno/Step4.mdx";
+
+import NextJsStep1 from "@/snippets/nosecone/quick-start/next-js/Step1.mdx";
+import NextJsStep2 from "@/snippets/nosecone/quick-start/next-js/Step2.mdx";
+import NextJsStep3 from "@/snippets/nosecone/quick-start/next-js/Step3.mdx";
+import NextJsStep4 from "@/snippets/nosecone/quick-start/next-js/Step4.mdx";
+
+import NodeJsStep1 from "@/snippets/nosecone/quick-start/node-js/Step1.mdx";
+import NodeJsStep2 from "@/snippets/nosecone/quick-start/node-js/Step2.mdx";
+import NodeJsStep3 from "@/snippets/nosecone/quick-start/node-js/Step3.mdx";
+import NodeJsStep4 from "@/snippets/nosecone/quick-start/node-js/Step4.mdx";
+
+import SvelteKitStep1 from "@/snippets/nosecone/quick-start/sveltekit/Step1.mdx";
+import SvelteKitStep2 from "@/snippets/nosecone/quick-start/sveltekit/Step2.mdx";
+import SvelteKitStep3 from "@/snippets/nosecone/quick-start/sveltekit/Step3.mdx";
+import SvelteKitStep4 from "@/snippets/nosecone/quick-start/sveltekit/Step4.mdx";
+
+[<SDKVersionNosecone/>](https://www.npmjs.com/package/nosecone)
+
+Arcjet Nosecone is an [open source library](https://github.com/arcjet/arcjet-js)
+that helps set security headers such as `Content-Security-Policy` (CSP),
+`Strict-Transport-Security` (HSTS), and `X-Content-Type-Options` in JS
+applications built with Bun, Deno, Next.js, Node.js, or SvelteKit.
+
+<WhatAreArcjetUtilities />
+
+## Supported headers
+
+Nosecone makes it easy to add and configure these headers:
+
+- `Content-Security-Policy` (CSP)
+- `Cross-Origin-Embedder-Policy` (COEP)
+- `Cross-Origin-Opener-Policy`
+- `Cross-Origin-Resource-Policy`
+- `Origin-Agent-Cluster`
+- `Referrer-Policy`
+- `Strict-Transport-Security` (HSTS)
+- `X-Content-Type-Options`
+- `X-DNS-Prefetch-Control`
+- `X-Download-Options`
+- `X-Frame-Options`
+- `X-Permitted-Cross-Domain-Policies`
+- `X-XSS-Protection`
+
+See the [reference guide](/nosecone/reference) for full details on each option.
+
+:::note
+If you are using Express, NestJS, or Remix we recommend using the excellent
+[Helmet](https://helmetjs.github.io/) library, which informed much of our work
+on Nosecone.
+:::
+
+## Quick start
+
+This guide will show you how to add our recommended <FrameworkName client:load/>
+default security headers.
+
+### 1. Install Nosecone
+
+In your project root, run the following command to install the Arcjet Nosecone
+library for your framework:
+
+<SlotByFramework client:load>
+  <BunStep1 slot="bun" />
+  <DenoStep1 slot="deno" />
+  <NextJsStep1 slot="next-js" />
+  <NodeJsStep1 slot="node-js" />
+  <SvelteKitStep1 slot="sveltekit" />
+</SlotByFramework>
+
+### 2. Configure your application
+
+<SlotByFramework client:load>
+  <BunStep2 slot="bun" />
+  <DenoStep2 slot="deno" />
+  <NextJsStep2 slot="next-js" />
+  <NodeJsStep2 slot="node-js" />
+  <SvelteKitStep2 slot="sveltekit" />
+</SlotByFramework>
+
+### 3. Run your application
+
+<SlotByFramework client:load>
+  <BunStep3 slot="bun" />
+  <DenoStep3 slot="deno" />
+  <NextJsStep3 slot="next-js" />
+  <NodeJsStep3 slot="node-js" />
+  <SvelteKitStep3 slot="sveltekit" />
+</SlotByFramework>
+
+### 4. Inspect the headers
+
+The default headers apply a pragmatic set of security headers to your
+application, but may break things (particularly the CSP header).
+
+We recommend you test your application thoroughly and tweak the settings to
+ensure it continues to work as expected.
+
+<SlotByFramework client:load>
+  <BunStep4 slot="bun" />
+  <DenoStep4 slot="deno" />
+  <NextJsStep4 slot="next-js" />
+  <NodeJsStep4 slot="node-js" />
+  <SvelteKitStep4 slot="sveltekit" />
+</SlotByFramework>
+
+## What next?
+
+<CardGrid>
+  <LinkCard
+    title="Nosecone reference"
+    href="/nosecone/reference"
+    description="Details about each security header and how to configure them."
+  ></LinkCard>
+</CardGrid>
+
+## Get help
+
+Need help with anything? Email [email protected] to get support from our
+engineering team, [join our Discord](https://arcjet.com/discord), or [open an
+issue on GitHub](https://github.com/arcjet/arcjet-js).
+
+<Comments />