Customize response HTTP headers

Front-Commerce leverages helmet to send security-related HTTP headers. This guide explains how to customize those HTTP headers.

As mentioned in helmet's README file: "It's not a silver bullet, but it can help" preventing security issues. Here is how to change HTTP headers sent by your application.

Content-Security-Policy (aka CSP)

According to Content Security Policy (CSP) MDN article:

Content Security Policy (CSP) is an added layer of security that helps to detect and mitigate certain types of attacks, including Cross-Site Scripting (XSS) and data injection attacks. These attacks are used for everything from data theft to site defacement to distribute malware.

In a nutshell, the Content-Security-Policy header instructs the browser on how it should handle resources such as JavaScript, CSS, images, … or anything it can load on a page.

In Front-Commerce, the content of this header can be controlled by tweaking contentSecurityPolicy configuration into config/website.js. This is where you will be able to let the browser know that for instance it can safely load a JavaScript file from a given origin.

Cross-Origin Resource Sharing (aka CORS)

According to Cross-Origin Resource Sharing (CORS) MDN article:

Cross-Origin Resource Sharing (CORS) is an HTTP-header based mechanism that allows a server to indicate any origins (domain, scheme, or port) other than its own from which a browser should permit loading resources.

In a nutshell, CORS headers instructs browsers and remote services whether they're allowed to load a specific content or not. This check usually happens with an OPTIONS HTTP preflight request.

A typical error you might encounter would be:

Access to font at 'https://example.com/public/fonts/my-font.priority.xxxx.woff2' from origin 'https://other.example.org' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

In Front-Commerce, the content of this header can be controlled by customizing the cors.origin configuration from the corsConfigProvider.

You must do it from a custom configuration provider. See the Register a configuration provider guide to learn how to register it in your application.

Here is an example allowing browsers to load your pages from webcache.googleusercontent.com and other.example.org domains:

const corsOverrideConfigProvider = {
  name: "corsOverride",
  values: Promise.resolve({
    cors: {
      // This value is the one transmitted to the cors() middleware
      // see https://www.npmjs.com/package/cors#configuration-options for details
      origin: {
        googleCache: "webcache.googleusercontent.com",
        otherSite: "other.example.org",
      },
    },
  }),
};

configService.insertAfter("cors", corsOverrideConfigProvider);

tip

You can test headers returned from a specific origin by using the Origin HTTP header. Example:

curl -sI https://example.com/ \
  -H "Origin:webcache.googleusercontent.com" \
  | grep -i access-control

Other headers

To customize other headers send by default, you have to write a custom express middleware.

For instance, here is how you can to set the Referer-Policy header to origin-when-cross-origin:

1. create module and add a server/module.config.js to declare a global server middleware. This file would look like:

   server/module.config.js

   import setReferrerPolicy from "./express/setReferrerPolicy";
   
   export default {
     endpoint: {
       __dangerouslyOverrideBasePathChecks: true,
       path: "/",
       router: setReferrerPolicy,
     },
   };

2. write the middleware that will set the header. In this middleware, you can use any of the function exposed by helmet.

   server/express/setReferrerPolicy.js

   // imported in the previous snippet
   import { Router } from "express";
   import { referrerPolicy } from "helmet";
   
   const setReferrerPolicy = () => {
     const router = new Router();
   
     router.use(referrerPolicy({ policy: "origin-when-cross-origin" }));
   
     return router;
   };
   
   export default setReferrerPolicy;

And that's it. When the module having the server/module.config.js and server/express/setReferrerPolicy.js files will be enabled in .front-commerce.js, Front-Commerce will set the Referrer-Policy header to origin-when-cross-origin.