Font swiper-icons violates Content Security Policy

forchel commented 3 years ago

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.

Alternative

No response

Additional context

No response

Validations

[X] Follow our Code of Conduct
[X] Read the docs.
[X] 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 commented 2 years ago

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 commented 2 years ago

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

forchel commented 2 years ago

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 commented 1 year ago

up

TimmiX88 commented 11 months ago

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 commented 7 months ago

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`;
    },
  },
}

nolimits4web / swiper