I know this has been asked countless times, but I cant seem to find a solution to my problem.
The Problem : I am unable to use Content-Security-Policy nonce and its generating an error.
The Error via console.log : Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-eM7IckhPhRx5dBGXZhwsgAKulpq/euetK0YPweqUKX4='), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present. Note also that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.
What I also tried : I also tried using mod_unique_id instead of using PHP set env but it throws internal server error
What am i doing wrong
My Code :
.htaccess
Options +FollowSymLinks
RewriteEngine On
<IfModule mod_headers.c>
FileETag None
Header unset ETag
Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT"
Header set Connection keep-alive
Header set X-XSS-Protection "1; mode=block"
SetEnv MY_CSP_NONCE "<?php echo $_SERVER['MY_CSP_NONCE']; ?>"
Header always set Content-Security-Policy "expr=default-src 'none'; script-src 'self' require-trusted-types-for 'script' https://www.googletagmanager.com https://www.facebook.com https://www.twitter.com https://www.instagram.com 'nonce-%{ENV:MY_CSP_NONCE}' 'strict-dynamic' 'wasm-eval' 'unsafe-eval'; script-src-elem 'self'; connect-src 'self'; img-src 'self' https://storage.googleapis.com data:; video-src 'self' https://storage.googleapis.com data:; style-src 'self' style-src-attr 'self' 'nonce-%{ENV:MY_CSP_NONCE}'; base-uri 'none'; object-src 'none'; frame-ancestors 'self'; frame-src 'self'; sandbox allow-same-origin allow-scripts allow-popups; media-src 'self'; worker-src 'self https://*.cloudflare.com'; manifest-src 'self'; child-src 'self'; prefetch-src 'self' https://storage.googleapis.com https://www.googletagmanager.com; form-action 'self' https://www.paystack.com; font-src 'self' data:; upgrade-insecure-requests"
Header set Feature-Policy "geolocation 'self'; vibrate 'none'"
Header always set Content-Security-Policy-Report-Only "default-src 'self'; report-uri https://www.example.com/csp-report-endpoint"
Header always set X-Frame-Options "sameorigin"
Header set X-Content-Type-Options "nosniff"
Header set Strict-Transport-Security "max-age=15552000; includeSubDomains; preload"
Header always set Cross-Origin-Opener-Policy "same-origin-allow-popups"
Header always set Cross-Origin-Resource-Policy "same-site"
SetEnvIf Referer "^https://storage.googleapis.com" CORP_EXEMPT
Header always set Cross-Origin-Embedder-Policy "require-same-origin"
Header always set Cross-Origin-Embedder-Policy "unsafe-none" env=CORP_EXEMPT
Header set Cross-Origin-Embedder-Policy "unsafe-none" "expr=%{REQUEST_URI} =~ m!\.(png|jpe?g|gif|svg|webp|avif|mp4|webm|m4a|ogv)$!"
</IfModule>
RewriteCond %{SCRIPT_FILENAME} !-d
RewriteCond %{SCRIPT_FILENAME} !-f
RewriteRule ^index$ ./index.php
RewriteRule ^about$ ./about.php
RewriteRule ^404$ ./404.php
RewriteRule ^500$ ./500.php
ErrorDocument 404 https://www.example.com/404
IndexIgnore *
my cookiesetter.php - Where nonce is stored to be included in every script
<?php
$nonce = rtrim(strtr(base64_encode(random_bytes(64)), '+/', '-_'), '=');
putenv("MY_CSP_NONCE=$nonce");
?>
and index.php
<?php include "cookiesetter.php" ?>
<html>
<head>
<title>Example</title>
<style nonce="<?php echo $nonce ?>">
bla bla bla
</style>
</head>
<body>
<script nonce="<?php echo $nonce ?>">
bla bla bla
</script>
</body>
</html>
So i solved it with the help of @soulseekah and another online friend.
The solution
.htaccess
my cookiesetter.php - Where nonce is stored to be included in every script
and index.php
Guys please feel free to add an edit what you think. Edit my answer and add yours even if it is in 10 years time.
This is a learning platform.