bug: Content Security Policies headers breaking application

[ijsje71]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

For security purposes, I'm trying to set Content-Security-Policy headers. It seems that Ionic does not support setting these headers, because there is always something that breaks, even when I follow the browser console's instructions on what source is being blocked. Either the entire application is not loading at all (white screen when trying to access it), or some elements are not being correctly loaded, such as the search bar. Is this a bug or am I doing something wrong?

These are the headers that I am setting in the nginx configuration of the deployed Ionic app (the same behaviour happens when I set these headers in a meta tag in the index.html):

add_header Content-Security-Policy "style-src 'HASH1' 'HASH2' 'HASH3' 'HASH4' 'HASH5' 'HASH6' 'HASH7' 'HASH8' 'HASH9';"; add_header Content-Security-Policy "style-src-elem 'self';"; add_header Content-Security-Policy "script-src 'HASH10';"; add_header Content-Security-Policy "script-src-elem 'self';"; add_header Content-Security-Policy "font-src 'self';"; add_header Content-Security-Policy "font-src 'data:';"; add_header Content-Security-Policy "frame-src https://www.facebook.com https://youtube.com https://vimeo.com;"; add_header Content-Security-Policy "default-src 'self' BACKEND_DOMAIN;"; add_header Content-Security-Policy "base-uri 'self';"; add_header Content-Security-Policy "frame-ancestors 'self';"; add_header Content-Security-Policy "form-action BACKEND_DOMAIN;";

Obviously the HASH entries are actual sha256 hashes and the BACKEND_DOMAIN entry is our backend from which data is loaded.

Expected Behavior

I am expecting the application to be running, even with the content security policy headers applied.

Steps to Reproduce

1. Create an ionic app
2. Go to the public folder
3. Add the meta tag in the index.html with the policies described in the issue
4. See the application breaking

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 7.1.1 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/react 7.0.7

Capacitor:

Capacitor CLI : 4.8.0
@capacitor/android : 4.8.0
@capacitor/core : 4.8.0
@capacitor/ios : 4.8.0

Utility:

cordova-res : not installed globally
native-run : 1.7.2

System:

NodeJS : v18.14.0 (/usr/local/Cellar/node@18/18.14.0/bin/node)
npm : 9.3.1
OS : macOS Unknown

Additional Information

I'm following the CSP guidelines as explained here:
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy
and here:
https://content-security-policy.com/

[ionitron-bot]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[averyjohnston]

This issue is being closed due to insufficient reproduction. If this is still a problem in the latest version of Ionic, please open a new issue and ensure the template is fully filled out. Thank you!