elysia-swagger not functioning correctly

[bhanukushwah]

ERROR : Refused to load the script 'https://unpkg.com/swagger-ui-dist@4.18.2/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.

[Hrdtr]

Do you use the helmet plugin? I had to drop elysia helmet plugin to get rid of the error, until the helmet plugin maintainer allow to pass custom config. or at least the plugin options type

[darekaze]

Reference this issue in the scalar repo, I'm able to enable helmet together with the swagger plugin:

1. Setup the helmet plugin with the following options to allow CSP for Scalar Web:

// helmet.plugin.ts
import { helmet } from 'elysia-helmet'

export const helmetPlugin = helmet({
    contentSecurityPolicy: {
        directives: {
            defaultSrc: [`'self'`, 'unpkg.com'],
            styleSrc: [
                `'self'`,
                `'unsafe-inline'`,
                'cdn.jsdelivr.net',
                'fonts.googleapis.com',
                'unpkg.com',
            ],
            fontSrc: [`'self'`, 'fonts.gstatic.com', 'data:'],
            imgSrc: [`'self'`, 'data:', 'cdn.jsdelivr.net'],
            scriptSrc: [
                `'self'`,
                `https: 'unsafe-inline'`,
                'cdn.jsdelivr.net',
                `'unsafe-eval'`,
            ],
        },
    },
})

2. Then use it like this:

// main.ts

import { Elysia } from 'elysia'
import swagger from '@elysiajs/swagger'
import { helmetPlugin } from './plugins/helmet.plugin'

const app = new Elysia()
    .use(helmetPlugin)
    .use(swagger())
    .get('/ping', () => 'pong') // Health check
    .listen(3000)

console.log(
    `🦊 Elysia is running! Access Swagger UI at http://${app.server?.hostname}:${app.server?.port}/swagger`,
)