ionic-team / ionic-team/ionicons
bug: CSP - Refused to apply inline style because it violates the following Content Security Policy directive: "style-src-elem …"
- Dominant language
- TypeScript
- Stars
- 18.2k
- Forks
- 2.1k
- PR merge metrics
- No merged PRs in 30d
Description
### Current Behavior
When you enable at least the following CSP header
```
Content-Security-Policy = 'default-src https://cdnjs.cloudflare.com/ajax/libs; style-src-elem https://cdnjs.cloudflare.com/ajax/libs'
```
browsers will refuse to apply inline styles (rightfully).
The exact error message:
```
p-ea7bbed1.system.js:1 Refused to apply inline style because it violates the following Content Security Policy directive: "style-src-elem localhost […]". Either the 'unsafe-inline' keyword, a hash ('sha256-NBfyYgxoWTkJ9SyHWLNVIq8UkKGvsaGPAaGmNMpVMSA='), or a nonce ('nonce-...') is required to enable inline execution.
```
Problematic code (in the last line):
```js
{
$.innerHTML = n + v;
$.setAttribute("data-styles", "");
l.insertBefore($, o ? o.nextSibling : l.firstChild)
}
```
File: https://cdnjs.cloudflare.com/ajax/libs/ionicons/7.1.0/ionicons/p-ea7bbed1.system.js
### Expected Behavior
Styles applied normally from JS and not inline.
### Steps to Reproduce
Turn on the mentioned CSP headers.
### Code Reproduction URL
_No response_
### Additional Information
_No response_
Contributor guide
Assessment
This issue has not been assessed yet.