Empty CSP HTTP Header

[danfsd]

This is the first time I'm trying to use this library and I'm finding it difficult to see the CSP directives that I've configured on the middleware to show on the CSP HTTP header.

These are the directives defined on cspMiddleware.js:

import {chainMatch, isPageRequest, csp, strictDynamic} from '@next-safe/middleware';

const securityMiddleware = [
  csp({
    // your CSP base configuration with IntelliSense
    // single quotes for values like 'self' are automatic
    directives: {
      'child-src': ['none'],
      'default-src': ['self'],
      'font-src': ['self', 'data:', 'https://fonts.gstatic.com'],
      'frame-ancestors': ['none'],
      'manifest-src': ['self'],
      'report-to': ['default'],
      'report-uri': ['https://xxxxxx.report-uri.com/r/d/csp/enforce'],
      'upgrade-insecure-requests': true,
      'worker-src': ['self']
    }
  }),
  strictDynamic()
];

export default chainMatch(isPageRequest)(...securityMiddleware);

When running on production, the content-security-policy header remains empty:

All the other files have been setup following the Getting Started part of the docs.

Any ideas?

[danfsd]

Hmm, I've renamed the cspMiddleware.ts to middleware.ts and placed it on the root of the application and it worked.

Does the naming/location of the middleware file interferes with the functioning of the library?

[dannyrb]

@danfsd, this is a next.js convention. The file has to be named middleware.ts

[danfsd]

Thanks @dannyrb, I wasn't aware of that!