Unable to open swagger on local host due to violating Content Security Policy error.

[loktar00]

I have Swagger enabled in the config via FAB_API_SWAGGER_UI = True

When attempting to go to the URL (and logging in as admin) I see the following in Brave and Edge

Refused to load the stylesheet 'https://cdn.jsdelivr.net/npm/swagger-ui-dist@4/swagger-ui.css' because it violates the following Content Security Policy directive: "style-src 'self' 'unsafe-inline'". Note that 'style-src-elem' was not explicitly set, so 'style-src' is used as a fallback.

v1:55 Refused to load the image 'https://fastapi.tiangolo.com/img/favicon.png' because it violates the following Content Security Policy directive: "img-src 'self' data:".

v1:155 Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' 'strict-dynamic' 'nonce-LOs8l9GOnAS1e1K0ek9wV9aSEaJneEQQ'". Either the 'unsafe-inline' keyword, a hash ('sha256-1r8ykd7la2sNxnDBtNms0TqO7HUtu35cLQvWmZ7Tm64='), or a nonce ('nonce-...') is required to enable inline execution.

This is a very vanilla / new setup with no additional configuration done.

How to reproduce the bug

1. Enable Swagger
2. Go to 'http://localhost:8088/swagger/v1
3. You're presented with a white content area and errors in the console.

Expected results

Swagger documentation loads

Actual results

Only the header loads.

Screenshots

If applicable, add screenshots to help explain your problem.

Environment

• browser type and version: Brave v1.56.11
• superset version: superset version
• python version: 3.9.17
• any feature flags active: {"ALERT_REPORTS": True, "EMBEDDED_SUPERSET": True}

Checklist

Make sure to follow these steps before submitting your issue - thank you!

• I have checked the superset logs for python stacktraces and included it here as text if there are any.
• I have reproduced the issue with at least the latest released version of superset.
• I have checked the issue tracker for the same issue and I haven't found one similar.

[sebastianliebscher]

I could replicate this. #24616 did not fix the issue

[loktar00]

I could replicate this. #24616 did not fix the issue

Ah I actually didn't see that issue when searching otherwise I would have commented on that. Glad it's reproduceable was worried maybe it was somehow a local thing.

I should also mention I am on Windows but using WSL2 / Docker. Might not make a difference but worth mentioning.

[huamichaelchen]

I suspect all you need is to add style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net/npm/swagger-ui-dist@4/swagger-ui.css; into your CSP.

Wrote a guide on it, hopefully, it helps someone 😄 Choose your preferred media 😝

https://huamichaelchen.substack.com/p/end-to-end-example-of-setting-up

https://medium.com/@huamichaelchen/end-to-end-example-of-setting-up-superset-embedded-dashboard-f72fc985559

[vikashrajgupta]

I'm getting this CSP violation issue only when I'm using superset via the domain name, without the domain it's working fine.
For example, I'm running this on localhost:9888 and when I'm using this via domain, it shows a CSP error.
That would be great if you guys could help!!