Particular Content Security Policy rules block some elements from appearing

[medjedovicm]

Describe the bug

In corporate environments, it is common to have a strict Content Security Policy, such that base64 data: images will not load. This affects the Clarity spinner and caret. It also affects all elements depending on base64 as the image source.

How to reproduce

Steps to reproduce the behavior:

1. Go to https://stackblitz.com/edit/clarity-dark-theme-clr13-cds6-1dbscx?file=src/app/app.component.html
2. Check the code and preview, the spinner is not appearing, nor is caret on the select element since images are blocked.
3. Open the devtools > console, look for the error `Refused to load the image 'data:image... clarity-dark-theme...(file))

The console will have a lot of stuff because of Stackblitz but I will attach the screenshot of the error, so it's easier to find.

Expected behavior

The spinner should be visible. The caret on the select element should be visible.

Versions

Clarity version:

• [ ] v12.x
• [x] v13.x
• [ ] Other:

Framework:

• [x] Angular
• [ ] React
• [ ] Vue
• [ ] Other:

Framework version: Angular 13

Device:

• Type: Lenovo ThinkPad
• OS: Ubuntu
• Browser Chrome
• Version 102.0.5005.61 (Official Build) (64-bit)