Hi @aaanders,
You’re correct that embedding YouTube videos using the “privacy-enhanced mode” (which uses https://www.youtube-nocookie.com
) may fail domain checks in platforms with strict Content Security Policies or domain allowlists — especially in environments like Zoom’s Marketplace app.
To support youtube-nocookie.com
, you should ensure your CSP explicitly allows it under relevant directives (like script-src
, style-src
, img-src
, media-src
, etc.).
Here’s a sample update using Next.js (next.config.js
) that demonstrates how to properly include https://www.youtube-nocookie.com
without affecting other existing policies. This should allow embedding videos using either standard or privacy-enhanced YouTube URLs:
Sample next.config.js
update (CSP modified to support youtube-nocookie):
/** @type {import('next').NextConfig} */
const ContentSecurityPolicy = `
script-src 'self' https://youtu.be ${process.env.HOME_URL} https://browser.sentry-cdn.com/7.34.0/bundle.min.js https://api.iconify.design https://www.google-analytics.com https://www.google-analytics.com/analytics.js https://www.google.com https://i.ytimg.com https://www.youtube.com/iframe_api https://www.youtube.com https://www.youtube-nocookie.com https://code.iconify.design https://cdnjs.cloudflare.com https://cdn.jsdelivr.net https://www.googletagmanager.com https://appssdk.zoom.us/sdk.js https://pianco.deskntea.com 'unsafe-eval' 'unsafe-inline';
style-src 'self' https://youtu.be https://www.youtube.com https://www.youtube-nocookie.com https://fonts.googleapis.com ${process.env.HOME_URL} 'unsafe-inline';
font-src 'self' https://fonts.gstatic.com https://fonts.googleapis.com https://fonts.gstatic.com;
img-src ${process.env.HOME_URL} 'self' data: blob: https://www.youtube.com https://www.youtube-nocookie.com https://i.ytimg.com;
worker-src * 'self' blob: 'unsafe-eval';
media-src https://meetlala-onboarding.s3.us-east-2.amazonaws.com https://youtu.be https://www.youtube.com https://www.youtube-nocookie.com;
connect-src 'self' wss: https: data: blob: https://meetlala-onboarding.s3.us-east-2.amazonaws.com https://youtu.be https://www.youtube.com https://www.youtube-nocookie.com ${process.env.WS_URL}/api/socketio;
`;
const headers = [
{
key: 'Strict-Transport-Security',
value: 'max-age=63072000; includeSubDomains; preload'
},
{
key: 'Content-Security-Policy',
value: ContentSecurityPolicy.replace(/\s{2,}/g, ' ').trim()
},
{
key: 'X-Content-Type-Options',
value: 'nosniff'
},
{
key: 'Referrer-Policy',
value: 'strict-origin-when-cross-origin'
},
{
key: 'X-Frame-Options',
value: 'SAMEORIGIN'
},
{
key: 'frameguard',
value: 'strict-origin-when-cross-origin'
},
{
key: 'Access-Control-Allow-Origin',
value: "https://www.youtube.com"
},
{
key: "Access-Control-Allow-Methods",
value: "GET,DELETE,PATCH,POST,PUT"
}
];
const nextConfig = {
compress: true,
reactStrictMode: false,
async headers() {
return [{
source: '/:path*',
headers: headers,
}];
},
async rewrites() {
// No rewrites are necessary for youtube-nocookie.com,
// but you can optionally add rewrites if you want to proxy any YouTube endpoints.
return [];
},
};
module.exports = nextConfig;
Notes:
- This only adds
https://www.youtube-nocookie.com
to the required directives in your CSP (e.g., script-src
, style-src
, img-src
, media-src
, connect-src
).
- All your existing domains and security policies are preserved.
- If you’re submitting this app for Zoom App Marketplace review, they may still require a manual approval step, especially for domains with unconventional SSL setups (as noted in Zoom’s Community post).
- No rewrites are added here, but if needed, you can proxy or rewrite
youtube-nocookie.com
resources through your backend or Next.js rewrites — entirely optional.
Let me know if you’d like to support iframe embedding explicitly (e.g. via frame-src
), or need help submitting to the Zoom Marketplace.
Hope this helps!