Some CSP problems

[bycixman35]

Hello everyone, there are 2 problems with my code below. No matter what I did, I couldn't solve the problem.

Problem 1 -) When the user refreshes the page, it always redirects to the home page.

Problem 2 -) The css does not come correctly on the pages where I pull dynamic data. I added 2 images as an example. When I refresh the page the css becomes even more corrupted.

Thanks for your help.

security: { hidePoweredBy: true, corsHandler: { origin: "https://www.abc.com", methods: ["GET", "POST", "DELETE"], credentials: false }, headers: { strictTransportSecurity: { maxAge: 15552000, includeSubdomains: true }, xFrameOptions: "DENY", crossOriginEmbedderPolicy: "unsafe-none", crossOriginOpenerPolicy: "same-origin", crossOriginResourcePolicy: "same-origin", xXSSProtection: "1; mod=block", xPermittedCrossDomainPolicies: "none", contentSecurityPolicy: { 'base-uri': ["'none'"], 'font-src': ["'self'", 'https:', 'data:'], 'form-action': ["'self'"], 'img-src': ["'self'", 'https://www.facebook.com', 'https://www.google.com.tr', 'https://www.googletagmanager.com', 'https://i.ytimg.com', 'data:'], 'frame-ancestors': ["'none'"], 'frame-src': ["'self'", 'https://www.youtube.com/', 'https://td.doubleclick.net/'], 'manifest-src': ["'self'"], 'media-src': ["'self'"], 'object-src': ["'none'"], "worker-src": ["'self'"], "script-src-attr": ["'none'"], 'script-src': [ "'self'", 'https:', "'unsafe-inline'", "'nonce-{{nonce}}'" ], 'style-src': ["'self'", "'unsafe-inline'"], "upgrade-insecure-requests": true }, originAgentCluster: "?1", xContentTypeOptions: "nosniff", referrerPolicy: "strict-origin-when-cross-origin", xDownloadOptions: "noopen", xDNSPrefetchControl: "off" }, allowedMethodsRestricter: { methods: ["GET", "POST", "DELETE"] }, xssValidator: { methods: ["GET", "POST", "DELETE"], css: true, escapeHtml: true }, requestSizeLimiter: { maxRequestSizeInBytes: 2000000, maxUploadFileRequestInBytes: 8000000 }, rateLimiter: { tokensPerInterval: 100, interval: 900000, headers: false }, sri: true, nonce: true, ssg: { meta: true, hashScripts: true, hashStyles: false, exportToPresets: true } }

[vejja]

Hi @bycixman35
Can you please give us a screenshot of your console outputs in the chrome developer tools?

[bycixman35]

There is no error in the console.

When I remove nitro prerender routes / the problem is solved, but when I add them, they do not work together.

[vejja]

Strange that you don’t have messages in the console
How do you know it’s a CSP issue?

[bycixman35]

As I said, when I do nitro prerender routes / it gives the errors I mentioned.

[vejja]

This is probably related to #576
Investigation ongoing

[vejja]

@bycixman35 we are releasing a hotfix with PR #577
This might (or might not) be related to your issue. Would you be able to test ?
Also, can you give me your nuxt.config.ts please so that I can verify what you have in common with #576

[vejja]

You have two different issues.
The first one is:

This is a PWA error. Look at the documentation of vite-pwa/nuxt to solve.

The second one is:

This is due to a wrong CSP setting. To solve, start with default values for the security option : in order to do this, do not set the security object at all. Then find out what are the remaining CSP issues in the console.

Update:
The redirect issue is likely related to the PWA not caching the root url.
The CSP issue is only seen by me, because I'm accessing Google from France, and you only whitelisted the Turkish version of Google. I would advise to use the default settings for security, unless you have very specific requirements and you know what you are doing 🥲

[bycixman35]

Why does the prerender route work fine when I uninstall nuxt3 security?

[vejja]

Not sure. I would need a reproduction to tell...

[bycixman35]

How did you solve the CSS problem? What was the problem? I'm asking out of curiosity.

[vejja]

The issue was linked to our removeLoggers setting.
When set to true (which is the default), we were switching on the vite.build.minify option.
OP was using Nuxt UI v3-alpha, and for some reason the minification process erases a Tailwind layer in the production build of Nuxt UI.