Swagger-ui appears to require 'unsafe-eval' in CSP Headers

Q&A (please complete the following information)

• OS: [MacOS v10.14.5] but really N/A
• Browser: [Chrome] (or any modern browser)
• Version: [Version 79.0.3945.130 (Official Build) (64-bit)]
• Method of installation: [maven via org.webjars::swagger-ui]
• Swagger-UI version: [3.22.1]
• Swagger/OpenAPI version: [e.g. Swagger 2.0, OpenAPI 3.0]

Content & configuration

Here’s a quick image of the console error:

Here’s a detailed callstack if I break on the thrown error: `

eval	@	VM240:1
(anonymous)	@	actions.js:224
w	@	runtime.js:62
(anonymous)	@	runtime.js:296
e.<computed>	@	runtime.js:114
r	@	asyncToGenerator.js:17
(anonymous)	@	asyncToGenerator.js:30
Promise.then (async)
r	@	asyncToGenerator.js:27
(anonymous)	@	asyncToGenerator.js:35
t	@	_export.js:36
(anonymous)	@	asyncToGenerator.js:14
b	@	debounce.js:95
E	@	debounce.js:144
w	@	debounce.js:132
setTimeout (async)
(anonymous)	@	debounce.js:103
x	@	debounce.js:172
(anonymous)	@	actions.js:243
(anonymous)	@	utils.js:121
(anonymous)	@	bindActionCreators.js:3
i.requestResolvedSubtree	@	OperationContainer.jsx:155
i.toggleShown	@	OperationContainer.jsx:111
o	@	ReactErrorUtils.js:24
u	@	EventPluginUtils.js:83
executeDispatchesInOrder	@	EventPluginUtils.js:103
f	@	EventPluginHub.js:41
d	@	EventPluginHub.js:52
e.exports	@	forEachAccumulated.js:22
processEventQueue	@	EventPluginHub.js:250
(anonymous)	@	ReactEventEmitterMixin.js:15
handleTopLevel	@	ReactEventEmitterMixin.js:25
d	@	ReactEventListener.js:70
perform	@	Transaction.js:141
batchedUpdates	@	ReactDefaultBatchingStrategy.js:60
batchedUpdates	@	ReactUpdates.js:95
dispatchEvent	@	ReactEventListener.js:145
`

---

Describe the bug you’re encountering

Quite simply: if my nginx configuration is set to exclude ‘unsafe-eval’ for the ‘script-src’ directive of the Content-Security-Policy, the Swagger-UI is choking due to an error - in this case specifically due to the usage of new Function(...) which relies on eval to execute at runtime (not the best practice).

I’ve cloned the git repo and looked at the code in your “src” directory and do not see any offending usages of calls to new Function constructors. It does, however, turn up a number of matches inside the “dist” director including the “swagger-ui-bundle.js”. Unfortunately this suggests the code is being included in from 3rd party npm dependencies bundled via webpack.

To reproduce…

Steps to reproduce the behavior:

1. swagger is being deployed behind nginx. The nginx server block in the config contains something like this: server { ... location /swagger { ... add_header Content-Security-Policy "default-src 'self'; script-src 'self';" always; ... } which explicitly does not have the ‘unsafe-eval’ option enabled.

2. Load swagger in your browser: https://<ip-address>/swagger

3. Scroll down to some API endpoint e.g. “Foo” and click to expand it

4. Scroll to any specific request option: e.g. GET /foo and click to expend it

Expected behavior

Expect the UI view to expand open to view documentation detail, model definitions, and the typical “try it out” button to execute an interactive request against the api

Actual - a small section expands down but is empty. The only way to see that something is wrong is inside the browser console. which throws the error regarding blocked eval for Function

Screenshots

Additional context or thoughts

[laurenzhonauer]

For anyone coming across this in the future, this CSP Config works with swagger - at least for me:

defaultSrc 'self'; 
styleSrc: 'self' 'unsafe-inline'; 
imgSrc: 'self' validator.swagger.io
scriptSrc: 'self' 'unsafe-inline'

One reason to have a Content Security Policy in place is to make it impossible to manipulate a page in a way where inline scripts with malicious code are being executed. So it would be very nice if swagger would find a way to not rely on inline styles and scripts in order to make a stricter CSP possible.

Although one could argue that its not necessary on a swagger site because only trusted people can manipulate the sites content. But it would still be nice to see improvement here. (Inline styles and scripts are bad practice anyway 😉 )

[sebastienricher]

I am getting similar behavior, but worse, I get a blank screen in the swagger UI, my target CSP is

context.Response.Headers.Add("Content-Security-Policy", "script-src 'self'");