Explorer violates content-security-policy: default-src 'self'

URL of the page

https://localhost:3000/api/explorer/

Nature of the issue

If the API is served by an Ingress that implements this Response Header:
content-security-policy: default-src 'self'
the api explorer fails to load

Expected behavior

No errors when running with restrictive content-security-policy.

Actual behavior

The following errors appear in the console of Goole Chrome:

explorer/:11 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-R1cfim84YiZ+NisBAfyCbdN3fV7Y7Uys20qAO4OBGJ0='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.

explorer/:36 Refused to execute inline script because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-DLbdWNBhwD1fyzUBjaE5Up3Y/4UCDB1OYv/c61qHL/I='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.

These occur because the HTML contains a <style> and a <script> tag respectively.

Suggested resolution

Move the <style> and <script> contents to separate files.

Start at the API Explorer page served at /api/explorer/ and inspect the HTML for its inline style and script elements. Move those contents into separate files and verify that the page loads without console errors under default-src 'self'.