scttcper / koa2-swagger-ui

Swagger UI as Koa v2 middleware
MIT License
103 stars 32 forks source link

V5.0.5 isn't loading doc #198

Open akrafzik opened 3 years ago

akrafzik commented 3 years ago

Hi, I'm using the module with a .yaml file and my documentation is online, but it only shows a white screen. I had to go back to V5.0.3 to be able to load my docs back again.

scttcper commented 3 years ago

Is something blocked or what is the error in console.

pusmax commented 3 years ago

Is something blocked or what is the error in console.

Hello, I have the same problem with a white screen. There are some errors in console:

[Error] Refused to load https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/3.38.0/swagger-ui-bundle.js because it does not appear in the script-src directive of the Content Security Policy.
[Error] Refused to load https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/3.38.0/swagger-ui-standalone-preset.js because it does not appear in the script-src directive of the Content Security Policy.
[Error] Refused to execute a script because its hash, its nonce, or 'unsafe-inline' does not appear in the script-src directive of the Content Security Policy. (swagger, line 71)
image
scttcper commented 3 years ago

https://csper.io/blog/csp-violates-the-content-security-policy-directive

pusmax commented 3 years ago

https://csper.io/blog/csp-violates-the-content-security-policy-directive

Thank you

serhatgnc commented 3 years ago

I am still having this issue and that link did not helped me it is a paid service i think. I have just white page on my swagger endpoint.

4lch4 commented 3 years ago

I had to add the following to my app in order for it to pass the Content Security Policy:

this.app.use(async (ctx, next) => {
  ctx.set('Content-Security-Policy', 'self unsafe-inline')
  await next()
})

this.app.use(
  koaSwagger({
    swaggerOptions: {
      spec: yamljs.load(join(__dirname, '..', '..', 'openapi-spec.yml'))
    },
    routePrefix: `${this.config.apiPrefix}/swagger`
  })
)
zhypower1997 commented 2 years ago

I had to add the following to my app in order for it to pass the Content Security Policy:

this.app.use(async (ctx, next) => {
  ctx.set('Content-Security-Policy', 'self unsafe-inline')
  await next()
})

this.app.use(
  koaSwagger({
    swaggerOptions: {
      spec: yamljs.load(join(__dirname, '..', '..', 'openapi-spec.yml'))
    },
    routePrefix: `${this.config.apiPrefix}/swagger`
  })
)

useful!