Swagger: Blank page with script error

[Quadriphobs1]

Bug

[ ] Regression 
[x] Bug report
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead post your question on Stack Overflow.

Current behavior

After updating to the latest version of the package and nest my page started to show blank and a script error

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-iV83EgAQc1+Q++O7L1ZemfWFbYYPNv2syB2HreE5S/8='), or a nonce ('nonce-...') is required to enable inline execution.

Expected behavior

Should display the docs page

Environment

Nest version: X.Y.Z
 "@nestjs/swagger": "^4.6.0",
"@nestjs/core": "^7.4.2",
"fastify-swagger": "^3.3.0",
 "@nestjs/platform-fastify": "^7.4.2",

For Tooling issues:
- Node version: 14
- Platform: Mac

Others:

[kamilmysliwiec]

Please provide a minimum reproduction repository.

[RubenConde]

I've got the same error. The nestjs-swagger config I have is not so different from the docs. Wich info would you need?

[nartc]

@RubenConde a runnable sample repository that we can reproduce the bug and pinpoint the issue.

[RubenConde]

Here I made a repository with the error I've got.

1. npm install
2. npm start
3. go to localhost:3000(or the port if you changed)/docs

the error should appear (tested)

O.S.: Windows
Node version: 12.16.3

https://github.com/RubenConde/nestjs-swagger-error

[andyg9413]

I've got the same error. @RubenConde did you find out the solution? @kamilmysliwiec any update?

[Quadriphobs1]

It would be good if @kamilmysliwiec could re-open the issue

[RubenConde]

Any idea of what is the reason for the error @kamilmysliwiec ?

[mfauzaan]

I have found one issue this might caused.
After moving to fasitfy, and using helmet caused empty blank screen.

So make sure its using fastify-helmet

And use the following configuration:

 app.register(helmet, {
    contentSecurityPolicy: {
      directives: {
        defaultSrc: [`'self'`],
        styleSrc: [`'self'`, `'unsafe-inline'`],
        imgSrc: [`'self'`, 'data:', 'validator.swagger.io'],
        scriptSrc: [`'self'`, `https: 'unsafe-inline'`],
      },
    },
  })

[H6LS1S]

If you are not going to use CSP at all, you can use this:

app.register(helmet, {
    contentSecurityPolicy: false,
})

Don't be afraid to dig into the source code of dependencies, there are many interesting things there. :)

[kamilmysliwiec]

@H6LS1S @mfauzaan would you like to create a PR to the docs with this solution? A warning here https://github.com/nestjs/docs.nestjs.com/edit/master/content/openapi/introduction.md would be more than welcome :)

[mfauzaan]

@kamilmysliwiec will do :)

[H6LS1S]

https://github.com/nestjs/docs.nestjs.com/pull/1525