Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

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

wants to merge 4 commits into from

Conversation

sadeghbarati
Copy link

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

@hughsie
Copy link

hughsie commented May 26, 2023

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

@kevin-appelt
Copy link

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

@EliezerB123
Copy link

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
Author

CodeSandbox Playground

@nrvikas
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

amr3k amr3k approved these changes

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
6 participants
@sadeghbarati @hughsie @kevin-appelt @EliezerB123 @nrvikas