Shieldwall NPM

Install

pnpm add shieldwall

Usage

This package aims to support every framework runtime powered by h3, but at this moment only SolidStart has first-class adapters.

SolidStart

The exports are out-of-the-box middleware handlers. If you need help creating middlewares in SolidStart you can check the docs.

import { createMiddleware } from "@solidjs/start/middleware";
import { securityHeaders, csp, csrf } from "shieldwall/start";
import { SELF } from "shieldwall/start/csp";

export default createMiddleware({
	onRequest: [
		csrf,
		securityHeaders(),
		csp({
			extend: "production_basic",
			config: {
				withNonce: true,
				reportOnly: true,
				value: {
					"frame-src": [SELF],
				},
			},
		}),
	],
});

The CSP must add nonce on every request and append to script and link tags.

   import { createHandler, StartServer } from "@solidjs/start/server";

  export default createHandler(
     () => (
       <StartServer
         document={({ assets, children, scripts }) => (
           <html lang="en">
             <head>
             <meta charset="utf-8" />
             <meta
               name="viewport"
               content="width=device-width, initial-scale=1"
             />
             <link rel="icon" href="/favicon.ico" />
             {assets}
           </head>
           <body class="overflow-x-hidden bg-gradient-to-bl from-sky-950
        to-neutral-900">
             <div
               id="app"
               class="bg-blur-purple min-h-screen grid-cols-[auto,1fr,au
       to]"
             >
               {children}
             </div>
             {scripts}
           </body>
         </html>
       )}
     />
   ),
-
+  (event) => ({ nonce: `nonce-${event.locals.nonce}` })
  )

Middlewares

This package exports 2 middlewares to be used as drop-in: csrfProtection and secureRequest.

CSRF Protection

In a CSRF (Cross-Site Request Forgery) attack, a malicious actor tricks a user's browser into making unwanted requests to another site where the user is authenticated. By exploiting the fact that browsers automatically include cookies (including session cookies) with each request to a domain. This allows the attacker to trigger a mutation in the origin server (e.g.: change of password, email, etc).

There are different strategies to prevent this form of attack, this middleware checks the HTTP headers to ensure the domain issuing the request is the same receiving it for POST.

If the request is to be blocked, the server will respond with a 403 status.

export const csrfProtection: RequestMiddleware = (event) => {
	if (csrfBlocker(event) === "block") {
		// eslint-disable-next-line n/no-unsupported-features/node-builtins
		event.nativeEvent.respondWith(new Response(null, { status: 403 }));
		return;
	}
};

Security Headers

This middleware will append multiple HTTP Headers to every request hitting the server.

Header Name	Description
Strict-Transport-Security	Enforces secure (HTTPS) connections to the server.
X-Frame-Options	Prevents clickjacking by controlling whether a browser can display a page in a frame or iframe.
X-Content-Type-Options	Prevents `MIME` type sniffing by instructing browsers to follow the declared content type.
Referrer-Policy	Controls how much referrer information is included with requests.
Permissions-Policy	Manages permissions for APIs and features in the browser.
X-XSS-Protection	Fitlers cross-site scripting (XSS) in the browser.
Cross-Origin-Opener-Policy	Isolates browsing contexts to prevent cross-origin attacks.
Cross-Origin-Resource-Policy	Restricts which origins can load resources.
Access-Control-Allow-Origin	Specifies which origins can access the resources via cross-origin requests.
Content-Security-Policy*	Defines policies to prevent a wide range of attacks, including XSS and data injection.
Content-Security-Policy-Report-Only*	Same as Content-Security-Policy, but does not block, only reports to a passed URI.

The default values for each header can be found in defaults.ts file. They are strict by default and can be relaxed via configuration

!TIP For an extra layer of security, once the Strict-Transport-Security (HSTS) is set, you can register your domain on the HSTS Preload List.

Content-Security-Policy

Given the complex nature of Content-Security-Policy (CSP) header, there is a lot of nuance on how to properly configure it and no one-size-fits-all solution.

!WARNING Please note that for Hot-Module Replacement to work it's required that we relax them during development to allow for inline-styles and inline-scripts. So there are different settings for development and production. We have extensible templates for dev_hmr_friendly and production_basic to be used in each scenario respectively.

Additionally, CSP allows for nonce hashes to fully secure your application against XSS, it will work out-of-the-box for the header and you must add it on your scripts and stylesheets as shown on usage.

Implementation Tip

It's possible to have 2 CSPs at the same time, so rolling out changes can be done gradually.

import { createMiddleware } from "@solidjs/start/middleware";
import { csp } from "shieldwall/start";

export default createMiddleware({
	onRequest: [
		csp({
			extend: "production_basic",
			config: {
				withNonce: true,
				reportOnly: true, // warns, doesn't block
			},
		}),
		csp({ extend: "dev_hmr_friendly", config: { withNonce: false } }), // blocks
	],
});