Icon chevron_right in item-link not showing due to CSP

I am playing around with framework7 + phonegap
I just made a very simple app with a sidebar that has a list.
Some of the list items are links.

Problem: within m browser the right arrow (chevron_right) shows perfectly. But on my smartphone, instead of the icon i get the first four characters saying “chev”

I think that it must have to be connected to the Content-Security-Problem within my META TAG.
I tried font-src with severyl attributes, but this did not work.
Then i debuged how the icon is inserted and tried to change the style-src within the CPS - no luck :frowning:

BTW: when i add the chevron_right icon into my page, it shows up.
So i think it must either be the script-src or the style-src

Thanks in advance everyone!

Are you loading your icons via css, font or js?

With CSS. I have it linked in my header and also copied the webfonts folder into my app.
When I copy the example from the docs with the face icon into the page, it appears. It seems to be the way that the chevron is added to the menu item-link

cna you share your csp and fonts url?

1 Like

Absolutely, thanks for your support. Here is my CSP

    <meta http-equiv="Content-Security-Policy" content="
                          default-src 'unsafe-eval' 'unsafe-inline' *;
                          script-src 'self' 'unsafe-inline' 'unsafe-eval' *;
                          worker-src blob:;
                          font-src 'self' data:;
                          style-src 'self' 'unsafe-inline' 'unsafe-eval';
                          img-src 'self' 'unsafe-inline' data: *;
                          ">

If have all my fonts in the www/webfonts folder.
I also now realized that when i add an input field the “delete” icon is not shown.

that should work
did you try adding * ?

Yes, i did. I added it to the font-src AND the style-src but the result is the same.

*font-src ‘self’ data: ;

At the moment i am trying to find out how the CSP works with background-images.
For me it looks like the chevron is “injected” through the item-link class and the CPS does not like that somehow.

One further question: i do not have the other font-folders (SVG etcl) copied… are they necessary?
By the Framework7 deocumentation i read that only one css file is nessary and the webfonts folder.

so im trying to guess your problem.
Can you set a small git so i can pull it and try to help you?

1 Like

Check any of available ready to use F7 Templates, it has correct and working CSP tag:

<meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:">

Guess you need * 'self' 'unsafe-inline' 'unsafe-eval' for font-src

1 Like

The thing is that the icons are shown in my browser.
When i use “phonegap serve” via CMD and call my browser IP, the icons DO work.
I can even see that the “back” arrow button on the navbar works.

But at the same time, on my smartphone, i see “arrow_left_end” in blue.
And as long as i do not use the “no-chevron” class, instead of the chevron icon i see the word “chevron”.

So it mus be with the CSP.
I copied @nolmits4eb and even this did not work.

[SOLUTION]
Please do not ask me why, but it works now. What i did was this:

  1. Removed my own CPS that you see above.
  2. Went to Framework7’s Github repository and took the CPS from the Kitchensink.

It works. I can now see the arrows. It did not work before because what i did was, to combine that CPS with mine. And it seems (i do not know why or where) that the default src. defintion colides with one of my other lines. I tried to delte one by one to find the error, but i could not find it.

Can anyone of you tell me how “secure” this CPS is?
I am developing an offline only app, without user registration or any remote server connections. Users can not store any passwords or other sensible data in my app.

Thanks so much for your time and support and sorry for my dumbness. Have all a great weekend!

1 Like