How to implement swagger express UI in https domain?

[turivishal]

I am using below code to generate swagger UI in node.js and express:

const swaggerUi = require('swagger-ui-express');
app.use('/', swaggerUi.serve, swaggerUi.setup(
    require('./swagger.json'),
    {
        explorer: true,
        swaggerOptions: {
            displayRequestDuration: true,
            docExpansion: "none",
            filter: false,
            showExtensions: true,
            showCommonExtensions: true,
            displayOperationId: true,
            urls: [] // list of urls
        }
    }
));

I am using Docker to deploy node.js project:

FROM node:13-alpine
COPY ./package.json ./
RUN apk add git
RUN npm install --production
COPY . .
EXPOSE // some valid port
CMD ["node","app.js"]

Working on http and with port http://mydomain.com:<port>,

Not working on https https://mydomain.com, it show white screen shows error in browser's console:

Error 1:

Failed to load resource: the server responded with a status of 502 (Bad Gateway)
swagger-ui-bundle.js:1 Failed to load resource: the server responded with a status of 502 (Bad Gateway)
swagger-ui-standalone-preset.js:1 Failed to load resource: the server responded with a status of 502 (Bad Gateway)
swagger-ui-init.js:1 Failed to load resource: the server responded with a status of 502 (Bad Gateway)
favicon-32x32.png:1 GET https://mydomain.com/favicon-32x32.png 502 (Bad Gateway)

Error 2:

Uncaught SyntaxError: Unexpected token '<'
swagger-ui-standalone-preset.js:3 Uncaught SyntaxError: Unexpected token '<'
swagger-ui-init.js:3 Uncaught SyntaxError: Unexpected token '<'

Is there any process or configuration to work in SSL domain?

[01speed1]

I have a similar issue i dont know why with a HTTP request the CSS and JS call an HTTPS request, what can i do ?

[arunvishnun]

@01speed1 Were you able to figure out a solution for this. Facing same issue!! @scottie1984 Do you have any suggestions ?

[marcobertell]

I have a similar issue i dont know why with a HTTP request the CSS and JS call an HTTPS request, what can i do ?

i have the same issue.

[mostafaebrahimi]

I have a similar issue i dont know why with a HTTP request the CSS and JS call an HTTPS request, what can i do ?

Same Issue! (nginx as reverse-proxy)

[mostafaebrahimi]

@turivishal Did you find any solution? I checked a lot of things also swagger-ui-express code but didn't find anything

[mostafaebrahimi]

@turivishal seems this problem is not related to swagger-ui-express and it's related to your express configuration

[turivishal]

@mostafaebrahimi I am not sure, is there any different configuration for HTTPS domain? It's working in HTTP domain.

[mostafaebrahimi]

@turivishal paste your express config here.

[marcdefaria]

I have the same issue. I can define it as the following:

Relevant versions:

• Node: 14.16.0
• Express: 4.17.1
• swagger-ui-express: 4.1.6
• swagger-jsdoc: 6.1.0

(Using docker for deployment)

I have a swagger-docs.js file in my project which populates the relevant routes in the following manner:

function initSwaggerRoutes(app) {
    if (args['swagger.enabled'] !== undefined && args['swagger.enabled'] === true) {
        app.use('/swagger-ui.html', swaggerUi.serve, swaggerUi.setup(swaggerSpec, {}, { validatorUrl: null }));
        app.use('/swagger-resources', swaggerResources);
        app.use('/api-docs', apiDocs);
    }
    else {
        log.info('Disabling swagger');
    }
}

I get the following error message when running on a live environment:

The issue is occurring as for some reason the request is being redirected to a HTTPS endpoint to retrieve the relevant documents, even though I am requesting a http endpoint.

This issue does not occur on swagger-ui-express version 4.1.3 or lower. I have confirmed this fact as 9 of my microservices use version 4.1.3 and does not have the issue (they all have identical configuration other than the swagger-ui-express version used). 5 of my microservices using version 4.1.6 has the issue as described.

[marcdefaria]

I just downpinned the version of swagger-ui-express for one of the services that had the above issue to use 4.1.3 (instead of 4.1.6) and I have the same issue. Seems like its perhaps something incorrect with my configuration that is causing the request to be redirected to https when retrieving the resources of the swagger-ui.html page:

[marcdefaria]

Interestingly enough, the issue I described was completely unrelated to swagger-ui-express and rather had to do with the fact that I updated helmet from version 3 to version 4.

Helmet is a library that adds response headers and content-security-policies to your API responses.

In the update from helmet version 3 to 4, a default value was set for the content-security-policy header which included a CSP header of "upgrade-insecure-requests". This caused the requests from swagger to fetch the style files to redirect from http to https.

Swagger style files were being served over http, hence the ERR_SSL_PROTOCOL_ERROR when requesting them over https.

I resolved the issue by adding the following logic when applying helmet to my application;

const cspDefaults = helmet.contentSecurityPolicy.getDefaultDirectives();
delete cspDefaults['upgrade-insecure-requests'];

app.use(helmet({
    contentSecurityPolicy: { directives: cspDefaults }
}));

This may be a bit TMI, but I struggled with this for a couple of days and thought I'd put the solution here incase anyone is having the same issue.

[avvvet]

@marcdefaria thanks, works for me.