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.

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

Font swiper-icons violates Content Security Policy #4990

Open
3 of 4 tasks
forchel opened this issue Sep 22, 2021 · 8 comments · May be fixed by #6652
Open
3 of 4 tasks

Font swiper-icons violates Content Security Policy #4990

forchel opened this issue Sep 22, 2021 · 8 comments · May be fixed by #6652

Comments

@forchel
Copy link

forchel commented Sep 22, 2021

Clear and concise description of the problem

Following on from issue #4918, it would be nice if the icon fonts could generally be removed or exchanged for a more practicable solution.
Our project also has the problem that the CSP rules prevent the font from being loaded. Loading is only allowed if we would add font-src: data as an additional rule, which means that the rules are being softened. This is insecure; an attacker could also inject arbitrary data: URIs.
The approach of hosting the fonts locally (as described here) would be practicable but without modifying the swiper-bundle.css or even the minified version.

Suggested solution

I don't have a solution in mind of how to solve this problem, but it would be more workable if we could configure the font to use.

Alternative

No response

Additional context

No response

Validations

  • Follow our Code of Conduct
  • Read the docs.
  • Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Would you like to open a PR for this feature?

  • I'm willing to open a PR
@mvarendorff
Copy link

Would it be possible to distribute a separate swiper.fonts.css or something alike that one could use if you were to use the buttons from the package?

I agree that it's not ideal to force include the font like this so it could be changed to loading two separate stylesheets; one for the general style of the swiper component and one for the fonts in case they'd be used.

I would be down to work on this if that's something you'd accept (although I may need some guidance on where to get started modifying the build; I haven't looked at it in depth yet)!

@pgrodrigues
Copy link

Any progress on this? Using font-src: data: isn't the way to go.

@forchel
Copy link
Author

forchel commented Sep 15, 2022

I would like to know whether this issue has any progress. As you can read here

data: Allows data: URLs to be used as a content source. This is insecure; an attacker can also inject arbitrary data: URLs. Use this sparingly and definitely not for scripts.

data sources are not recommended.

@nabualhawa
Copy link

up

@TimmiX88
Copy link

TimmiX88 commented Nov 3, 2023

Please change the prev/next icons from the 'swiper-icons' font to inline svg background-images so there is no more need for loading the font in the first place.

Manually importing and modifying the swiper-bundle.css is very suboptimal when trying to keep swiper.js up-to-date and working in multiple projects. This costs so much time and it ruins the benefits of just loading the latest version via npm.

@XiupengMa
Copy link

as a workaround, I use a webpack loader to extract the data url from swiper.css, convert it to a font file, and replace that data url with the font file's path

{
  test: /swiper.css$/,
  loader: "string-replace-loader",
  options: {
    search: /'data:application\/font-woff;charset=utf-8;base64, ([\s\S]*?)'/,
    replace(_match: string, base64Str: string) {
      fs.createWriteStream("src/styles/fonts/swiper-icons.woff").write(
        base64.toByteArray(base64Str)
      );
      return `src/styles/fonts/swiper-icons.woff`;
    },
  },
}

@StevenVerbiest
Copy link

Why is this not fixed yet? We're having this issue and the workarounds are not working. So we're forced to import the base styes manually.
There is an open PR, so I'm not sure what's holding this back?

@KayvandenHeuvel
Copy link

We've got the same issue. Is there any progress on this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

8 participants