Not able to attach google form in my website when using helmet-CodePudding

I am not able to attach the google form to my website while using helmet js. What could be the code to allow it?

iframe

<iframe src="https://docs.google.com/forms/d/e/..." width="600" height="850px"  frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>

Helmet Middleware

app.use(helmet({
    contentSecurityPolicy: {
        directives: {
            frameSrc: ["'self'", "https://docs.google.com/forms"],
        }
    },
}));

Error on Client-Side

Refused to frame 'https://docs.google.com/forms' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'frame-src' was not explicitly set, so 'default-src' is used as a fallback.

CodePudding user response：

Finally, I got the solution.

We need to set COEP (Cross-Origin-Embedder-Policy) response header if we want to embed any link with the website.

app.use(helmet({
    contentSecurityPolicy: {
        directives: {
            "frame-ancestors": ["'self'", "*.google.com/"],
            frameSrc: ["'self'", "*.google.com/"],
            childSrc: ["'self'", "*.google.com/"]
        }
    },
    // crossOriginEmbedderPolicy: false
}));

app.use((req, res, next) => {
    res.header("Cross-Origin-Embedder-Policy", "cross-origin")
    next()
})