swagger-api / swagger-api/swagger-ui
Swagger-ui appears to require 'unsafe-eval' in CSP Headers
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 29k
- Forks
- 9.3k
- Avg merge
- 2d 23h
- Merged PRs (30d)
- 25
Description
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) | @ | |
| w | @ | |
| (anonymous) | @ | |
| e. | @ | |
| r | @ | |
| (anonymous) | @ | |
| Promise.then (async) | ||
| r | @ | |
| (anonymous) | @ | |
| t | @ | |
| (anonymous) | @ | |
| b | @ | |
| E | @ | |
| w | @ | |
| setTimeout (async) | ||
| (anonymous) | @ | |
| x | @ | |
| (anonymous) | @ | |
| (anonymous) | @ | |
| (anonymous) | @ | |
| i.requestResolvedSubtree | @ | |
| i.toggleShown | @ | |
| o | @ | |
| u | @ | |
| executeDispatchesInOrder | @ | |
| f | @ | |
| d | @ | |
| e.exports | @ | |
| processEventQueue | @ | |
| (anonymous) | @ | |
| handleTopLevel | @ | |
| d | @ | |
| perform | @ | |
| batchedUpdates | @ | |
| batchedUpdates | @ | |
| dispatchEvent | @ | |
| ` |
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:
-
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. -
Load swagger in your browser:
https://<ip-address>/swagger -
Scroll down to some API endpoint e.g. "Foo" and click to expand it
-
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
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce the issue behind the shown nginx Content-Security-Policy and inspect the new Function matches in dist/swagger-ui-bundle.js. Trace the actions.js:224 call through the bundled dependency and compare it with the available source under src. Done means expanding an endpoint works without requiring unsafe-eval.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, nginx, webpack
- Domain
- frontend, security
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100