export handleHttpResponseHeaders hook (#39)

Author: kevinobee

.gitignore

@@ -9,3 +9,4 @@ node_modules
 !.env.example
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
+/coverage

.prettierignore

@@ -9,3 +9,6 @@ yarn.lock
 
 # Changesets
 .changeset
+
+# Code coverage
+/coverage

README.md

@@ -12,38 +12,33 @@ Adds HTTP headers to page responses from any SvelteKit web application enhancing
 npm install @faranglao/sveltekit-security-headers
 ```
 
-### Getting Started
+## Getting Started
 
 To add HTTP Security Response Headers to a SvelteKit application follow these steps:
 
 1. Install the `@faranglao/sveltekit-security-headers` package using `npm install @faranglao/sveltekit-security-headers`.
 
-1. Add or update [src/hooks.server.ts](./src/hooks.server.ts) file:
+2. Add the `handleHttpResponseHeaders` Hook in [src/hooks.server.ts](./src/hooks.server.ts):
 
-- Scenario: no previous Hooks defined in `src/hooks.server.ts`:
+- Scenario 1: no previous `handle` Hook defined in `src/hooks.server.ts`:
 
 ```ts
 import type { Handle } from '@sveltejs/kit';
-import { HttpResponseHeaders } from '@faranglao/sveltekit-security-headers';
+import { handleHttpResponseHeaders } from '@faranglao/sveltekit-security-headers';
 
-export const handle: Handle = HttpResponseHeaders.handle;
+export const handle: Handle = handleHttpResponseHeaders;
 ```
 
-- Scenario: existing Hooks defined in `src/hooks.server.ts`:
+- Scenario 2: existing `handle` Hook defined in `src/hooks.server.ts`:
 
-Use [the sequence helper function](https://kit.svelte.dev/docs/modules#sveltejs-kit-hooks) to wrap the existing hook and `HttpResponseHeaders.handle` hook as shown below.
+Use [the sequence helper function](https://kit.svelte.dev/docs/modules#sveltejs-kit-hooks) to wrap the existing hook and `handleHttpResponseHeaders` handler as shown below.
 
 ```ts
 import type { Handle } from '@sveltejs/kit';
 import { sequence } from '@sveltejs/kit/hooks';
-import { HttpResponseHeaders } from '@faranglao/sveltekit-security-headers';
-
-export const handle: Handle = sequence(async ({ event, resolve }) => {
-	// Do something with the inbound request
-	const response = await resolve(event);
-	// Do something with the outbound response before returning it
-	return response;
-}, HttpResponseHeaders.handle);
+import { handleHttpResponseHeaders } from '@faranglao/sveltekit-security-headers';
+
+export const handle: Handle = sequence(existingHook, handleHttpResponseHeaders);
 ```
 
 Then run the web application using `npm run dev` or `npm run build && npm run preview`.

package-lock.json

@@ -28,6 +28,7 @@
 		"package": "svelte-kit sync && svelte-package && publint",
 		"prepublishOnly": "npm run package",
 		"test": "npm run test:integration && npm run test:unit",
+		"coverage": "vitest run --coverage",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"lint": "prettier --check . && eslint .",
@@ -71,7 +72,8 @@
 		"tslib": "^2.4.1",
 		"typescript": "^5.0.0",
 		"vite": "^5.1.1",
-		"vitest": "^1.2.0"
+		"vitest": "^1.2.0",
+		"vitest-mock-extended": "^1.3.1"
 	},
 	"svelte": "./dist/index.js",
 	"types": "./dist/index.d.ts"

package.json

@@ -0,0 +1,10 @@
+import { describe, it, expect } from 'vitest';
+import { handle } from './hooks.server.js';
+
+describe('Server Hooks', () => {
+	describe('handle function', () => {
+		it('is defined', () => {
+			expect(handle).toBeDefined();
+		});
+	});
+});

src/hooks.server.test.ts

@@ -1,17 +1,12 @@
-// Scenario: no previous Hooks defined in src/hooks.server.ts
-import { HttpResponseHeaders } from './lib/headers.js';
+// src/hooks.server.ts
+import { handleHttpResponseHeaders } from './lib/hook.js';
 import type { Handle } from '@sveltejs/kit';
 
-export const handle: Handle = HttpResponseHeaders.handle;
-
-// Scenario: existing Hooks defined in src/hooks.server.ts:
-// import { HttpResponseHeaders } from "$lib/headers.js";
-// import type { Handle } from "@sveltejs/kit";
+// import sequence for scenario 2
 // import { sequence } from "@sveltejs/kit/hooks";
 
-// export const handle: Handle = sequence( async ( { event, resolve } ) => {
-// 	// Do something with the inbound request
-// 	const response = await resolve( event );
-// 	// Do something with the response before returning it
-// 	return response;
-// }, HttpResponseHeaders.handle);
+// scenario 1: no previous handle Hook defined
+export const handle: Handle = handleHttpResponseHeaders;
+
+// scenario 2: existing handle Hook defined
+// export const handle: Handle = sequence( existingHook, handleHttpResponseHeaders );

src/hooks.server.ts

@@ -1,4 +1,3 @@
-import type { Handle } from '@sveltejs/kit';
 import type { SecurityHeader } from './types.js';
 
 const Rules = {
@@ -10,7 +9,10 @@ const Rules = {
 	]
 };
 
-const applySecurityHeaders = (headers: Headers, securityHeaders: SecurityHeader[]) => {
+const applySecurityHeaders = (
+	headers: Headers,
+	securityHeaders: SecurityHeader[] = Rules.SecurityHeaders
+) => {
 	securityHeaders.forEach((header) => {
 		if (header.value !== undefined) {
 			const currentValue = headers.get(header.name);
@@ -32,14 +34,7 @@ const applySecurityHeaders = (headers: Headers, securityHeaders: SecurityHeader[
 	});
 };
 
-const applySecurityHeadersHandler: Handle = async ({ event, resolve }) => {
-	const response = await resolve(event);
-	applySecurityHeaders(response.headers, Rules.SecurityHeaders);
-	return response;
-};
-
 export const HttpResponseHeaders = {
-	handle: applySecurityHeadersHandler,
 	applySecurityHeaders,
 	Rules
 };

src/lib/headers.ts

@@ -0,0 +1,33 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { describe, it, expect, beforeEach } from 'vitest';
+import type { RequestEvent } from '@sveltejs/kit';
+import { mockDeep, type DeepMockProxy } from 'vitest-mock-extended';
+import { handleHttpResponseHeaders } from './hook.js';
+
+describe('handleHttpResponseHeaders', () => {
+	let mockEvent: DeepMockProxy<RequestEvent>;
+	let mockResponse: DeepMockProxy<Response>;
+
+	beforeEach(() => {
+		mockEvent = mockDeep<RequestEvent>();
+		mockResponse = mockDeep<Response>();
+	});
+
+	it('should apply security headers to response', async () => {
+		const event = mockEvent;
+		const resolve = () => mockResponse;
+
+		await handleHttpResponseHeaders({ event, resolve });
+
+		expect(mockResponse.headers.set).toHaveBeenCalledWith('X-Frame-Options', 'DENY');
+		expect(mockResponse.headers.set).toHaveBeenCalledWith('X-Content-Type-Options', 'nosniff');
+		expect(mockResponse.headers.set).toHaveBeenCalledWith(
+			'Referrer-Policy',
+			'strict-origin-when-cross-origin'
+		);
+		expect(mockResponse.headers.set).toHaveBeenCalledWith(
+			'Permissions-Policy',
+			'geolocation=(), camera=(), microphone=()'
+		);
+	});
+});

src/lib/hook.test.ts

@@ -0,0 +1,8 @@
+import type { Handle } from '@sveltejs/kit';
+import { HttpResponseHeaders } from './headers.js';
+
+export const handleHttpResponseHeaders: Handle = async ({ event, resolve }) => {
+	const response = await resolve(event);
+	HttpResponseHeaders.applySecurityHeaders(response.headers);
+	return response;
+};