koa2-swagger-ui does not render the swagger.json file and it shows error messages

[rmmariano]

Hello, I've just installed koa2-swagger-ui package via npm and I've updated my code with the settings on the documentation, however, for some reason, it does not load the swagger.json file.

The /docs route opens a blank page. When I inspect the console log, it shows some error messages:

Refused to load the script 'https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/4.1.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.

docs:1 Refused to load the script 'https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/4.1.0/swagger-ui-standalone-preset.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.

docs:71 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-CUXEv2EIcoCxm5IYzJhXO4B2nBMWti4GA5+EGW7dpG4='), or a nonce ('nonce-...') is required to enable inline execution.

I've tried to add the package to my project on both ways the documentation describes, directly to koa app and through koa-router, but both options show the same messages above.

I send below a sample of my code:

import Koa from 'koa';
import { koaSwagger } from 'koa2-swagger-ui';
import Router from 'koa-router';

let app = new Koa();
let router = new Router();

app.use(koaSwagger({
    routePrefix: '/docs', 
    swaggerOptions: {
        url: 'http://petstore.swagger.io/v2/swagger.json',
    }
}));

// or

router.use(koaSwagger({
    routePrefix: '/docs',
    swaggerOptions: {
      url: 'http://petstore.swagger.io/v2/swagger.json',
    }
}));

My dependencies are:

"devDependencies": {
    "@babel/core": "^7.16.12",
    "@babel/eslint-parser": "^7.16.5",
    "chance": "^1.1.8",
    "eslint": "^8.8.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-import": "^2.24.2",
    "eslint-plugin-import-helpers": "^1.1.0",
    "eslint-plugin-jest": "^26.0.0",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-prettier": "^4.0.0",
    "husky": "^7.0.4",
    "jest": "^27.0.6",
    "lint-staged": "^12.3.2",
    "nock": "^13.1.3",
    "nodemon": "^2.0.15",
    "prettier": "^2.0.5",
    "supertest": "^6.1.3"
  },
  "dependencies": {
    "@koa/cors": "^3.1.0",
    "@newrelic/winston-enricher": "^2.1.0",
    "axios": "^0.25.0",
    "dotenv": "^14.3.2",
    "ip": "^1.1.5",
    "jsonwebtoken": "^8.5.1",
    "koa": "^2.13.1",
    "koa-bodyparser": "^4.3.0",
    "koa-helmet": "^6.1.0",
    "koa-jwt": "^4.0.1",
    "koa-logger": "^3.2.1",
    "koa-logger-winston": "^0.0.2",
    "koa-router": "^10.0.0",
    "koa2-swagger-ui": "^5.3.0",
    "moment": "^2.29.1",
    "mssql": "^8.0.2",
    "newrelic": "^8.7.0",
    "sha256": "^0.2.0",
    "tedious": "^14.2.0",
    "tv4": "^1.3.0",
    "uuid": "^8.3.2",
    "winston": "^3.3.3"
  }

Thank you in advance.

[ashishbyteridge]

I am also facing this issue.

[xulsup]

you can do this in a local environment。

[Qubaish]

If you are using Helmet in your node project then either remove this or add below property.

app.use( helmet.contentSecurityPolicy({ reportOnly: true, directives: { /* ... */ }, }) );

Its fixed my issue.