Font swiper-icons violates Content Security Policy

[forchel]

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]

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]

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

[forchel]

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]

up

[TimmiX88]

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]

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]

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]

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

[caffreygo]

No progress?