CSP error with inline style on the Swagger UI page

[ddabble]

Describe the bug

When visiting the Swagger UI page and my browser (Chromium 128.0.6613.85) parses this inline styling:

drf-spectacular/drf_spectacular/templates/drf_spectacular/swagger_ui.html

Lines 10 to 14 in 2b4d5ab

	<style>
	html { box-sizing: border-box; overflow-y: scroll; }
	*, *:after, *:before { box-sizing: inherit; }
	body { background: #fafafa; margin: 0; }
	</style>

the following error is displayed in the console:

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self'".
Either the 'unsafe-inline' keyword, a hash ('sha256-MMpT0iDxyjALd9PdfepImGX3DBfJPXZ4IlDWdPAgtn0='), or a nonce ('nonce-...') is required to enable inline execution.

To Reproduce

We use django-csp and drf-spectacular-sidecar with the following settings:

Click to expand

INSTALLED_APPS = [
    # ...
    "drf_spectacular",
    "drf_spectacular_sidecar",
    # ...
]

SPECTACULAR_SETTINGS = {
    # ...
    "SWAGGER_UI_DIST": "SIDECAR",
    "SWAGGER_UI_FAVICON_HREF": "SIDECAR",
    "REDOC_DIST": "SIDECAR",
    # ...
}

CSP_DEFAULT_SRC = ("'self'",)
CSP_FRAME_SRC = ("'self'", FRONT_END_URL)
CSP_FRAME_ANCESTORS = ("'self'", FRONT_END_URL)
CSP_IMG_SRC = ("'self'", "data:")
CSP_STYLE_SRC = ("'self'",)
CSP_SCRIPT_SRC = ("'self'",)

Expected behavior

That there was no CSP error, so that the CSS styles could be applied.

---

From what I can tell, this can be solved either by moving the CSS styles linked above to its own .css file and serve it like the other Swagger files are served with drf-spectacular-sidecar, or by implementing hash or nonce support, like the console error from Chrome suggests - the latter of which is also suggested in #1241.