Unable to Use Google Sign In Button with COEP & Helmet - NodeJS & ExpressJS

Question

I have an express demo site using google sign in button and I have recently added Helmet JS to make the server more secure with the right headers.

Without HelmetJS, the Sign in Button loads without any problem and is able to pick logged in user as well. However after enabling Helmet JS in index.js and setting the required Content Security Policies (CSP) in the Helmet configurations, the following 2 scenarios happen:

1. Sign in Button loads, but doesn't work, with the following COEP error:

To mitigate this, I added crossorigin="anonymous" to the script header like so:

    <script crossorigin="anonymous" src="https://accounts.google.com/gsi/client" async defer></script>

as advised here

2. Doing this, however, leads to the following CORS error and the button doesn't load, since the client library is not loaded:

I have gone through the following similar SO questions to no avail, I'm not sure if I'm missing something, since there is a lot to absorb for understanding COEP / CORP and others.

1. Cross-Origin-Embedder-Policy: how to allow only certain domains?
2. Helmet Express ERR_BLOCKED_BY_RESPONSE.NotSameOrigin 200
3. Ressources not loaded after setting CSP and CORP headers using Helmet

The other options left is to disable COEP in Helmet, which I'm not sure is advisable. Please help, what exactly is the way forward for using COEP in such a scenario.

Thank you for your time!

Answer 1

Try this configuration of the helmet library - pass the one in constructor:

const helmetOpts = {
   contentSecurityPolicy: {
      directives: {
        defaultSrc:["'self'", 'fonts.gstatic.com', 'fonts.googleapis.com', "accounts.google.com","ssl.gstatic.com"],
        scriptSrc: ["'self'", 'fonts.gstatic.com', 'fonts.googleapis.com', "accounts.google.com","ssl.gstatic.com"],
        styleSrc :["'self'",'fonts.gstatic.com','fonts.googleapis.com',"cdn.jsdelivr.net","accounts.google.com","ssl.gstatic.com"],
        imgSrc:["'self'",'fonts.gstatic.com','fonts.googleapis.com',"cdn.jsdelivr.net","accounts.google.com","ssl.gstatic.com"],
        connectSrc:["'self'","accounts.google.com","ssl.gstatic.com"],
        fontSrc:["'self'",'fonts.gstatic.com','fonts.googleapis.com',"accounts.google.com"],
        objectSrc:["'self'",'fonts.gstatic.com','fonts.googleapis.com',"cdn.jsdelivr.net","accounts.google.com","ssl.gstatic.com"],
        mediaSrc:["'self'"],
        frameSrc:["'self'",'fonts.gstatic.com','fonts.googleapis.com',"cdn.jsdelivr.net","accounts.google.com","ssl.gstatic.com"],
        sandbox:null,
        reportUri:null,
        childSrc:["self"],
        formAction:["'self'","accounts.google.com","ssl.gstatic.com"],
        frameAncestors:["'none'"],
        pluginTypes:null,
        baseUri:null,
        reportTo:null,
        workerSrc:null,
        manifestSrc:null,
        prefetchSrc:null,
        navigateTo:null,
      },
    },
    crossOriginEmbedderPolicy:{ policy: "credentialless" },
    crossOriginOpenerPolicy: { policy: "same-origin-allow-popups" },
    crossOriginResourcePolicy: { policy: "same-site" },
    //OriginAgentCluster:false,
     referrerPolicy: {
      policy: ["origin",],
    },
    StrictTransportSecurity:false,
   // XContentTypeOptions:false,
    XDNSPrefetchControl:false,
    //XDownloadOptions:false,
   // XFrameOptions:false,
   // XPermittedCrossDomainPolicies:false,
    xPoweredBy:false,
}
....
app.use(helmet(helmetOpts));
....