ionic-team / ionic-team/ionicons

bug: CSP - Refused to apply inline style because it violates the following Content Security Policy directive: "style-src-elem …"

Open
#1,218 2 comments 2 reactions 0 assignees View on GitHub
help wanted
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.