XPages App to Web App: Part 20: Custom CSP Settings
A good web server will enforce Content Security Policy settings. If you are using something like Express as the web server, the endpoints will set that Content Security Policy. In the case of Single Page Applications hosted on Domino REST API, since release 1.15 by default a strict CSP is applied. But it is possible to change the CSP settings per application.
Manifest
The web manifest is required for Progressive Web Applications, telling the browser the information it needs about your application in order to install it, and so it's not uncommon for other single page applications.
Although it can is registered to have a .webmanifest extension, it's more typical for the file to be called "manifest.json". It has its own specification. Many of the properties are standard, but there are also some experimental settings.
But Domino REST API specifically uses an additional property, "csp", for a custom Content Security Policy to use. In the case of my web application, I'm loading icons from Google's material design icons, as I mentioned in part 7. So I need to allow the browser to load the stylesheets, otherwise the requests get blocked and I just get the text instead of the icons.
A quick look at the headers will show that the URL is "https://fonts.googleapis.com". But this is only part of the story. They're loaded as fonts, so I also need to allow fonts loaded from "https://fonts.gstatic.com". The full CSP setting in the manifest,json is "csp": "default-src 'self'; script-src 'self'; style-src 'self' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data:; connect-src 'self';"
You may need to restart Domino REST API after making the change, I can't remember.
Summary
If you're deploying a Java application on Domino REST API, custom CORS is set differently, in a config file. You can look at the open-sourced Admin client for an example.
As ever, you can see the full application on github