Content-Security-Policy Syntax Error in next.config.ts

[3choff]

The current Content-Security-Policy (CSP) configuration in next.config.ts contains a syntax error that causes browsers to report the following errors in the console:

1. The Content-Security-Policy directive 'img-src' contains 'object-src' as a source expression. Did you want to add it as a directive and forget a semicolon?
2. The Content-Security-Policy directive 'img-src' contains the keyword 'none' alongside with other source expressions. The keyword 'none' must be the only source expression in the directive value, otherwise it is ignored.

This occurs because the img-src directive within the CSP array is missing a terminating semicolon:

// In next.config.ts
const CSP = [
// ... other directives ...
"style-src 'self' 'unsafe-inline';",
"img-src 'self'", // <-- Missing semicolon
"object-src 'none';",
// ... rest of the directives ...
]

Without the semicolon, the browser incorrectly parses "img-src 'self' object-src 'none';" as a single, invalid img-src directive, leading to the reported errors.

Additionally, there's an unnecessary space before the semicolon in the script-src directive, which can be removed for consistency.

Solution:

1. Add a semicolon to the end of the img-src 'self' string in the CSP array within next.config.ts.
2. Remove the extra space before the semicolon in the script-src directive.

The corrected section should look like this:

// In next.config.ts
const CSP = [
"default-src 'self';",
"script-src 'self' 'unsafe-eval' 'unsafe-inline';", // <-- Removed extra space before semicolon
"connect-src 'self';",
"style-src 'self' 'unsafe-inline';",
"img-src 'self';", // <-- Added semicolon
"object-src 'none';",
"frame-ancestors 'none';",
IS_DEV ? null : "upgrade-insecure-requests;",
]
.filter(Boolean)
.join(" ");

These changes correctly separate the img-src and object-src directives, resolving the CSP errors and improving code consistency.