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

[lziosi]

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.

[lziosi]

To reproduce the issue in a Kubernetes cluster, you would create an Ingress based on nginx with this annotation:

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  annotations:
    meta.helm.sh/release-name: release-name
    meta.helm.sh/release-namespace: release-namespace
    nginx.ingress.kubernetes.io/configuration-snippet: |
      add_header Content-Security-Policy "default-src 'self'" always;
  name: ingress-name
  namespace: release-namespace
spec:
  ingressClassName: nginx
  rules:

The same would happen using a standalone nginx as a reverse proxy.