Swagger-ui requires 'unsafe-eval' in CSP Headers for SVG

[Gidgidonihah]

Q&A (please complete the following information)

• OS: N/A
• Browser: All modern browsers
• Version: Any modern version supporting CSP
• Method of installation: dist assets
• Swagger-UI version: 3., 4.
• Swagger/OpenAPI version: N/A

Content & configuration

The default petstore example can be used.

Serve swagger-ui with a CSP that limits images, such as:

Content-Security-Policy: img-src 'self'

Describe the bug you're encountering

The swagger logo and icons are blocked when using a secure CSP.
Swagger-ui should not use inline data images in the css for SVGs.

To reproduce...

Serve swagger-ui with a CSP that limits images, such as:

Content-Security-Policy: img-src 'self'

This will cause the browser to block images with a url starting with data:image/svg+xml;.
The swagger-ui logo and expand/collapse icons are blocked.

Expected behavior

The swagger logo and icons should not be blocked when using a secure CSP.

Screenshots

Additional context or thoughts

This can be worked around by using the CSP:

Content-Security-Policy: img-src 'self' data: 'unsafe-eval'

But, as is explicit in the header name, this is unsafe.

CSP in swagger-ui is a larger problem than this bug report

In this bug report, I kept it specific to the SVG images as I hadn't seen them mentioned in a bug report thus far. But CSP seems to be generally overlooked. I see no reason that swagger-ui should not work with a basic CSP:

Content-Security-Policy: default-src 'self'

As-is, I've had to build a very custom (see below) CSP that includes the hashes of various things to do with swagger-ui (across various versions) and also accept that the logo will look broken, and the expand/collaps icons are missing. This is not a great experience for the user.

Content-Security-Policy: default-src 'self'; script-src 'self' 'sha256-nFMTH3wGPLB0wJ/cmrR7Mkpqv/QqOOxvO9lDvelTy38=' 'sha256-HVWS/Zvb+/hKGrQbSIz41rEcAp5UwDhUBL8xoJ5Tdrw='; style-src 'self' 'sha256-pyVPiLlnqL9OWVoJPs/E6VVF5hBecRzM2gBiarnaqAo='; style-src-attr ; worker-src 'self'

See also:
#5817
#3370
https://github.com/swagger-api/swagger-ui/issues?q=is%3Aissue+content-security-policy

[silverwind]

This is because SVGs are loaded as images which as per CSP is an "unsafe" source:

<img src="data:image/svg+xml;base64,..." alt="Swagger UI" height="40">

It should be replaced with inline SVG which has no such issues:

<svg xmlns="http://www.w3.org/2000/svg">...</svg>

[char0n]

Hello everybody,

Given @silverwind answer, this seems like something that can be fixed quite easily. Is anybody interested in issuing a PR?

[mathis-m]

@char0n probably this is due to the webpack pipeline. I think I had a look at it and the Image was imported via js import logo from 'some' and placed in the src={logo}. Maybe it could be change via webpack or it needs to be defined as svg inline.

[silverwind]

Probably need to remove .svg from url-loader here and move it to raw-loader and then load it via dangerouslySetInnerHTML.

[rohitkadlag777]

When can this change is available in swashbuckle .net core package means no inline styles and javascript and image displayed from data source in swagger index.html page?
So that we can set Content-Security-Policy:default-src 'self'

[RobinGeffroy]

Hello,
even with the change available, it seems img-src 'self' data: is still needed. Will it be fixed as well ?

[oleksiipiliugin]

Hey,
Same here.
With the latest version of swagger-ui i still need to use the unsafe approach img-src 'self' data:.
It would be great to get off images declaration as data:image/svg+xml;base64,... to make CSP happy.

[cloudonshore]

Any update on this? Still running into this issue on the latest version.

[Codehardt]

Same here. I am using the most-strict CSP default-src 'self'; frame-ancestors 'none'; that works for my whole application except for the API documentation page based on Swagger UI.

[mmerezhko-hv]

Do you plan to fix this in the near future?

[char0n]

We need to use https://www.npmjs.com/package/@svgr/webpack avoid the CSP issue.