CSP error due to inline style

[jborgland]

Q&A (please complete the following information)

• OS: Windows 11
• Browser: tested with chrome and edge
• Version: 142.0.7444.176 (Chrome), 143.0.3650.66 (Edge)
• Method of installation: dist assets
• Swagger-UI version: 5.30.3

Content & configuration

Swagger-UI configuration options:

  window.ui = SwaggerUIBundle({
    urls: [
      <redacted>
    ],
    dom_id: '#swagger-ui',
    deepLinking: true,
    presets: [
      SwaggerUIBundle.presets.apis,
      SwaggerUIStandalonePreset
    ],
    plugins: [
      SwaggerUIBundle.plugins.DownloadUrl,
      SwaggerUIBundle.plugins.Topbar
    ],
    displayOperationId: false,
    defaultModelsExpandDepth: 1,
    defaultModelRendering: "example",
    displayRequestDuration: false,
    docExpansion: "list",
    filter: false,
    operationsSorter: "alpha",
    showExtensions: false,
    tagsSorter: "alpha",
    validatorUrl: "none",
    apisSorter: "alpha",
    jsonEditor: false,
    showRequestHeaders: false,
    supportedSubmitMethods: [
      "get", "put", "post", "delete", "options", "head", "patch", "trace"
    ],
    layout: "StandaloneLayout"
  });

  window.ui.initOAuth({
    useBasicAuthenticationWithAccessCodeGrant: true,
    realm: "<redacted>"
  })

Describe the bug you're encountering

On loading the page an error is given in the developer console:

Applying inline style violates the following Content Security Policy directive 'style-src 'self''. Either the 'unsafe-inline' keyword, a hash ('sha256-RL3ie0nH+Lzz2YNqQN83mnU0J1ot4QL7b99vMdIX99w='), or a nonce ('nonce-...') is required to enable inline execution. The action has been blocked.

Line 2, column 245529 of swagger-ui-bundle.js

swagger-ui-bundle.js:2 Applying inline style violates the following Content Security Policy directive 'style-src 'self''. Either the 'unsafe-inline' keyword, a hash ('sha256-RL3ie0nH+Lzz2YNqQN83mnU0J1ot4QL7b99vMdIX99w='), or a nonce ('nonce-...') is required to enable inline execution. The action has been blocked.
Vj @ swagger-ui-bundle.js:2
Vj @ swagger-ui-bundle.js:2
Vj @ swagger-ui-bundle.js:2
Vj @ swagger-ui-bundle.js:2
Vj @ swagger-ui-bundle.js:2
Vj @ swagger-ui-bundle.js:2
Vj @ swagger-ui-bundle.js:2
Vj @ swagger-ui-bundle.js:2
Vj @ swagger-ui-bundle.js:2
Vj @ swagger-ui-bundle.js:2
Vj @ swagger-ui-bundle.js:2
Vj @ swagger-ui-bundle.js:2
Vj @ swagger-ui-bundle.js:2
Vj @ swagger-ui-bundle.js:2
Vj @ swagger-ui-bundle.js:2
Vj @ swagger-ui-bundle.js:2
Vj @ swagger-ui-bundle.js:2
ek @ swagger-ui-bundle.js:2
dk @ swagger-ui-bundle.js:2
ck @ swagger-ui-bundle.js:2
dk @ swagger-ui-bundle.js:2
Wk @ swagger-ui-bundle.js:2
Pk @ swagger-ui-bundle.js:2
Gk @ swagger-ui-bundle.js:2
J @ swagger-ui-bundle.js:2
R @ swagger-ui-bundle.js:2

To reproduce...

Steps to reproduce the behavior:

1. Set up Swagger UI on a site that blocks inline styles through the use of CSP
2. Load Swagger UI
3. An error is shown in the console

Expected behavior

That Swagger UI can be used together with a Content Security Policy that doesn't allow inline scripts or styles.