feat: add ionic's wanted/basic Content-Security-Policy config into the docs (or src/index.html?)

[distante]

Feature Request

Ionic version: [x] 5.x

Describe the Feature Request Add information about how to support new protocols on Content-Security-Policy without break Ionic.

Additional Context I want to support the cdvfile protocol and it requires to add cdvfile: to the Content-Security-Policy meta tag. Since no one exist I have to play adding and removing tags until I get no more errors in the console.

I was not able to find what was the current "default" Content-Security-Policy by an Ionic 5 project.

This is also needed to support web sockets.

[liamdebeasi]

Thanks for the issue. Can you please clarify the issue you are running into? The Content-Security-Policy should not have an impact on Ionic Framework.

[distante]

Hi, yes.

There are people like me who doesn't really change anything about the Content-Security-Policy until they need to access some local files as media sources (in my case local audio files).

Once a change is (like add cdvfile:) needed we have to set all the Content-Security-Policy from 0 instead of just add the new needed protocol. If we do not do this and just add cdvfile: a lot of things break, like fonts (font-src) policy, chunk loading and assets image loading.

This could be prevented if a default Content-Security-Policy is added to index.html or if info about what does a fresh create Ionic project needs in case a user has to add new rules to Content-Security-Policy.

If you search the ionic forum there are a bunch of question regarding this, a several with no answers at all.

[liamdebeasi]

Thanks for the follow up. Can you provide a GitHub repo that showcases the issue you are running into? This does not appear to be related to Ionic Framework, but rather Cordova.

[distante]

Maybe it does not really belong to directly to Ionic or Cordova but to web development it self I suppose. But since one of the main goal of several Ionic apps is to interact with device files maybe some kind of F.A.Q about it could be good. Or at least I think so.

Also. Example repo https://github.com/distante/ionic-content-security-policy-problem-example

It is the my-first-app option from the ionic cli with the changed Content Security Policy to allow cdvfile:. Running it using Ionic serve the instructions to reproduce the error appear :)

[liamdebeasi]

Thanks! This might be a good topic for either the Ionic Framework docs or the Capacitor docs. I am going to move this to the ionic-docs repo for now. In the meantime, do you have any other ideas for what we could cover in a CSP documentation page?

[distante]

I suppose a base Content-Security-Service for an empty ionic app should be good and maybe a "needed to work" Content-Security-Service per Native cordova/capacitor plugin?