antiClickJack snippet's style tag part being inline requires unsafe-inline. How can we avoid the use of unsafe-inline?

Question

I am working on Drupal 9.3.8 site and using CSP module to setup the CSP header. There are few core dependencies or contrib modules which require unsafe-inline in CSP header but scanner recommends not the have unsafe-inline, so looking for the fix to remove the use of unsafe-inline.

Dependencies that require unsafe-inline:

• Drupal core ckeditor, modernizer and AJAX calls - which can be handled by CSP module used above which adds unsafe-inline only when ckeditor renders, but not when only modernizer is required.
• Google Analytics module - which adds the script inline instead of putting it in a file and include it on each page. We have the patch compatible with D7 but not for D8/9.
• AntiClickJack snippet which is as below:

<style id="antiClickjack">body{display: none !important;}</style>

Solutions:

• Installed and setup CSP module as mentioned above to handle Drupal core libs/dependencies requirement.
• To handle only rendering of modernizer.js and unsafe-inline, will need customization to the CSP module.
• For antiClickJack and google analytics script and style tags, cannot add hash or nonce as unsafe-inline will be ignored which will break the handling of Drupal core requirements

CSP header that I have is as below: Content-Security-Policy: default-src 'self'; connect-src 'self' www.google-analytics.com; frame-src 'none'; img-src 'self' data: https://www.google-analytics.com; object-src 'none'; script-src 'self' www.googletagmanager.com www.google-analytics.com ajax.googleapis.com 'unsafe-inline'; script-src-elem 'self' www.googletagmanager.com www.google-analytics.com ajax.googleapis.com; style-src 'self' 'unsafe-inline'; frame-ancestors 'none';

Questions:

1. How to handle antiClickJack snippet to avoid the use of unsafe-inline?
2. Do we have a customized approach to add the google analytics script to a file instead of adding it inline?

Answer 1

1. Add the following hash to your style-src: 'sha256-NHgJfLahpnqTyd+gTNfZfM2wjTUfB3Wk1CvqZfZpeHY=' Most browsers will suggest a hash for you, or you can use https://report-uri.com/home/hash. Note that the hash works as long as the content is unchanged, so only use it for static code.

2. Google Analytics and Google Tag Manager are not easy to implement without 'unsafe-inline'. You might be able to move to a file, but I don't know if that has an impact on the order of events. You will also need to look into CSP nonces for the code they insert. You will need to configure them to use your nonce and make sure that a new nonce is created for every page load. My experience is that setting a custom value for the nonce and change it for every page load is not trivial or possible within some frameworks, but worth giving a try.