Skip to content

fix: violates the following Content Security Policy directive: font-src#6652

Closed
sadeghbarati wants to merge 5 commits intonolimits4web:masterfrom
sadeghbarati:fix/violates-content-policy
Closed

fix: violates the following Content Security Policy directive: font-src#6652
sadeghbarati wants to merge 5 commits intonolimits4web:masterfrom
sadeghbarati:fix/violates-content-policy

Conversation

@sadeghbarati
Copy link
Copy Markdown

@sadeghbarati sadeghbarati commented May 7, 2023 •
edited
Loading

Fixes #4990

Idea: https://antfu.me/posts/icons-in-pure-css

Add two CSS variable to manage default icons in Swiper Navigation
Used default icons in icons/svg

:root {
  --swiper-navigation-prev-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M10.4772727,0.477272727 C10.7408632,0.740863176 10.7408632,1.16822773 10.4772727,1.43181818 L1.90909091,10 L10.4772727,18.5681818 C10.7408632,18.8317723 10.7408632,19.2591368 10.4772727,19.5227273 C10.2136823,19.7863177 9.78631772,19.7863177 9.52272727,19.5227273 L0.707106781,10.7071068 C0.316582489,10.3165825 0.316582489,9.68341751 0.707106781,9.29289322 L9.52272727,0.477272727 C9.78631772,0.213682278 10.2136823,0.213682278 10.4772727,0.477272727 Z' transform='translate(4)'/%3E%3C/svg%3E");
  --swiper-navigation-next-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M1.37727273,19.5227273 C1.11368228,19.2591368 1.11368228,18.8317723 1.37727273,18.5681818 L9.94545455,10 L1.37727273,1.43181818 C1.11368228,1.16822773 1.11368228,0.740863176 1.37727273,0.477272727 C1.64086318,0.213682278 2.06822773,0.213682278 2.33181818,0.477272727 L11.1474387,9.29289322 C11.537963,9.68341751 11.537963,10.3165825 11.1474387,10.7071068 L2.33181818,19.5227273 C2.06822773,19.7863177 1.64086318,19.7863177 1.37727273,19.5227273 Z' transform='translate(4)'/%3E%3C/svg%3E");
}

image

You might need to patch the package cause I think this will not get merged soon
Based on your packageManager search for patch package

@hughsie
Copy link
Copy Markdown

hughsie commented May 26, 2023

This would also allow me to migrate the LVFS from Owl to Swiper.

@kevin-appelt
Copy link
Copy Markdown

kevin-appelt commented Jun 5, 2023

Would be great to see this merged as it avoids a lot of CSP violation reports.

@EliezerB123
Copy link
Copy Markdown

EliezerB123 commented Sep 6, 2023 •
edited
Loading

@sadeghbarati I'm not a maintainer, but could you please scope the CSS to not use :root? :root is a little too global, and the CSS will show up when inspecting using Chrome's Dev tools on ANY element on the page, even those completely unrelated to Swiper.

For example, something like this:

.swiper {
  --swiper-navigation-prev-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M10.4772727,0.477272727 C10.7408632,0.740863176 10.7408632,1.16822773 10.4772727,1.43181818 L1.90909091,10 L10.4772727,18.5681818 C10.7408632,18.8317723 10.7408632,19.2591368 10.4772727,19.5227273 C10.2136823,19.7863177 9.78631772,19.7863177 9.52272727,19.5227273 L0.707106781,10.7071068 C0.316582489,10.3165825 0.316582489,9.68341751 0.707106781,9.29289322 L9.52272727,0.477272727 C9.78631772,0.213682278 10.2136823,0.213682278 10.4772727,0.477272727 Z' transform='translate(4)'/%3E%3C/svg%3E");
  --swiper-navigation-next-icon: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M1.37727273,19.5227273 C1.11368228,19.2591368 1.11368228,18.8317723 1.37727273,18.5681818 L9.94545455,10 L1.37727273,1.43181818 C1.11368228,1.16822773 1.11368228,0.740863176 1.37727273,0.477272727 C1.64086318,0.213682278 2.06822773,0.213682278 2.33181818,0.477272727 L11.1474387,9.29289322 C11.537963,9.68341751 11.537963,10.3165825 11.1474387,10.7071068 L2.33181818,19.5227273 C2.06822773,19.7863177 1.64086318,19.7863177 1.37727273,19.5227273 Z' transform='translate(4)'/%3E%3C/svg%3E");
}

@sadeghbarati
Copy link
Copy Markdown
Author

sadeghbarati commented Dec 4, 2023

CodeSandbox Playground

@nrvikas
Copy link
Copy Markdown

nrvikas commented Aug 1, 2024

Hi @nolimits4web - can this be reviewed and merged as it is violating font-src CSP directive in our application. Thanks.

@nicholasmead93
Copy link
Copy Markdown

nicholasmead93 commented May 21, 2025

Can this please be merged? We are facing a huge headache with this regarding CSP violations.

@NicerDicerPro
Copy link
Copy Markdown

NicerDicerPro commented Sep 11, 2025

@nolimits4web what keeps you from merging and integrating this change? We also face CSP issues with swiper and need this fix.
How can we help to go on with this? Please let us know, were happy to help if we know how.

@sgomes sgomes mentioned this pull request Feb 23, 2026
Merged
3 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

1 more reviewer

@amr3k amr3k amr3k approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Font swiper-icons violates Content Security Policy

8 participants

@sadeghbarati @hughsie @kevin-appelt @EliezerB123 @nrvikas @nicholasmead93 @NicerDicerPro @amr3k