Files
vercel__next.js/examples/with-strict-csp/middleware.js
ebCrypto 8b03244e4c remove unsafe-inline from with-strict-csp (#69497)
### What?
Remove unsafe-inline from with-strict-csp example in the script-src 

### Why?
The main purpose of having strict CSP headers is to improve the web app
security posture. On securityheaders.com the grade is capped to A if
script-src contains 'unsafe-inline'. In order to reach A+. it needs to
be removed.

### How?
Edit the script-src in the with-strict-csp-app example

Co-authored-by: JJ Kasper <jj@jjsweb.site>
2024-09-16 20:07:45 +00:00

62 lines
1.6 KiB
JavaScript

import { NextResponse } from "next/server";
export function middleware(request) {
const nonce = Buffer.from(crypto.randomUUID()).toString("base64");
const cspHeader = `
default-src 'self';
script-src 'self' 'nonce-${nonce}' 'strict-dynamic' https: http: ${
process.env.NODE_ENV === "production" ? "" : `'unsafe-eval'`
};
style-src 'self' 'nonce-${nonce}';
img-src 'self' blob: data:;
font-src 'self';
object-src 'none';
base-uri 'self';
form-action 'self';
frame-ancestors 'none';
upgrade-insecure-requests;
`;
// Replace newline characters and spaces
const contentSecurityPolicyHeaderValue = cspHeader
.replace(/\s{2,}/g, " ")
.trim();
const requestHeaders = new Headers(request.headers);
requestHeaders.set("x-nonce", nonce);
requestHeaders.set(
"Content-Security-Policy",
contentSecurityPolicyHeaderValue,
);
const response = NextResponse.next({
request: {
headers: requestHeaders,
},
});
response.headers.set(
"Content-Security-Policy",
contentSecurityPolicyHeaderValue,
);
return response;
}
export const config = {
matcher: [
/*
* Match all request paths except for the ones starting with:
* - api (API routes)
* - _next/static (static files)
* - _next/image (image optimization files)
* - favicon.ico (favicon file)
*/
{
source: "/((?!api|_next/static|_next/image|favicon.ico).*)",
missing: [
{ type: "header", key: "next-router-prefetch" },
{ type: "header", key: "purpose", value: "prefetch" },
],
},
],
};