Swagger is blocked by CSP

[oryxfea]

When I visit http://localhost:3000/swagger-html, I got below error in the console.

Refused to load the script 'https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/3.21.0/swagger-ui-bundle.js' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

It turns out that the Content Security Policy enabled by helmet blocks loading swagger related files from CDN, since this issue is gone after comment out app.use(helmet()).

[javieraviles]

Yes and I can see that happening in the Heroku deployment from the CI as well (https://node-typescript-koa-rest.herokuapp.com/swagger-html). Nice catch, let me explore solutions :)

[javieraviles]

this article on how to customize CSP for helmet seems interesting

[javieraviles]

app.use(helmet.contentSecurityPolicy({
        directives:{
          defaultSrc:["'self'"],
          scriptSrc:["'self'",'cdnjs.cloudflare.com'],
          styleSrc:["'self'",'cdnjs.cloudflare.com', 'fonts.googleapis.com'],
          fontSrc:["'self'",'fonts.gstatic.com']}}));

this would actually make it, but then the inline styles and scripts would get rejected, and adding 'unsafe-inline' as part of the CSP does not seem to be a good idea... Even though I understand by default are allowed since it did not complain before, so I'm adding it for now.

[javieraviles]

CI triggered with the fix, let's see how it looks up in Heroku :)

[javieraviles]

Looking perfect now with this solution, thanks again for catching it!