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.

Beginnen Sie auf der API Explorer-Seite unter /api/explorer/ und untersuchen Sie das HTML auf seine inline style- und script-Elemente. Verschieben Sie deren Inhalte in separate Dateien und überprüfen Sie, dass die Seite unter default-src 'self' ohne Konsolenfehler geladen wird.