search

angular / components

Component infrastructure and Material Design components for Angular
https://material.angular.io
MIT License
24.35k stars 6.74k forks source link

docs-bug(cdk/listbox): Refused to load the image #26019

Open Totati opened 1 year ago

Totati commented 1 year ago

Documentation Feedback

The background-image used for indicating selection does not work. There's an error on the console: image

Refused to load the image 'data:image/svg+xml;utf8,' because it violates the following Content Security Policy directive: "img-src 'self' ". Note that '' matches only URLs with network schemes ('http', 'https', 'ws', 'wss'), or URLs whose scheme matches self's scheme. The scheme 'data:' must be added explicitly.

https://user-images.githubusercontent.com/17689719/202701346-e7d7c98d-5d0c-4abb-9088-cbf1f94a0097.mp4

Affected documentation page

https://material.angular.io/cdk/listbox/examples

kashyapkaki commented 1 year ago

Hi @crisbeto, would love to work on it if no one else working on this issue.

allexgut commented 1 year ago

@crisbeto the issue lies within the server's Content-Security-Policy response header. The img-src part of it is configured wrong: img-src 'self' 'data:' *; The error here is that data: is wrapped in quotes, when it shouldn't be: img-src 'self' data: *;

You can verify this by testing the CSP string against any online CSP validator tool, e.g. https://cspvalidator.org/

There's nothing we can do on the frontend side to fix this, so I guess this ticket should be handled internally?