Security for your Fullstack App 🛡️
pnpm add shieldwallThis package aims to support every framework runtime powered by h3, but at this moment only SolidStart has first-class adapters.
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 { csrfProtection, secureRequest } from "shieldwall/start";
export default createMiddleware({
onRequest: [csrfProtection, secureRequest()],
});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}` })
)This package exports 2 middlewares to be used as drop-in: csrfProtection and secureRequest.
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;
}
};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.
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.
For Shieldwall we have opted for the most strict options as default and it's possible to relax them through configuration as needed. 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.
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.
 Atila Fassina 💻 🖋 📖 🤔 🚇 🚧 📆 🔧 |
 Daniel Afonso 💻 |
 Josh Goldberg ✨ 🔧 |
💙 This package was templated with
create-typescript-app.