"Refuse to load the image" SVG issue with search bar icons

Ionic Framework ionic-v3
1

Hello,

I get this two errors with the search bar:

Refused to load the image 'data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'><path%20fill='#5B5B5B'%20d='M337.509,305.372h-17.501l-6.571-5.486c20.791-25.232,33.922-57.054,33.922-93.257C347.358,127.632,283.896,64,205.135,64C127.452,64,64,127.632,64,206.629s63.452,142.628,142.225,142.628c35.011,0,67.831-13.167,92.991-34.008l6.561,5.487v17.551L415.18,448L448,415.086L337.509,305.372z%20M206.225,305.372c-54.702,0-98.463-43.887-98.463-98.743c0-54.858,43.761-98.742,98.463-98.742c54.7,0,98.462,43.884,98.462,98.742C304.687,261.485,260.925,305.372,206.225,305.372z'/></svg>' because it violates the following Content Security Policy directive: "default-src *". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.

Refused to load the image 'data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'><polygon%20fill='#5B5B5B'%20points='405,136.798%20375.202,107%20256,226.202%20136.798,107%20107,136.798%20226.202,256%20107,375.202%20136.798,405%20256,285.798%20375.202,405%20405,375.202%20285.798,256'/></svg>' because it violates the following Content Security Policy directive: "default-src *". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.

What this means and how can i resolve this? becouse i can’t see the icons.

Your system information:

Cordova CLI: 6.0.0
Ionic Version: 2.0.0-beta.3
Ionic CLI Version: 2.0.0-beta.19
Ionic App Lib Version: 2.0.0-beta.9
OS:
Node Version: v5.8.0

Thanks!

2

I had the same problem and adding the following to the CSP meta-tag in www/index.html fixed it for me (you can remove the ‘*’ if you’re not loading images from external sources, otherwise you’ll probably want to specify the source URLs instead of ‘*’):

img-src 'self' data: *

Just for a reference, here is the whole content of the CSP meta-tag:

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

I cannot guarantee that the meta-tag is safe to use this way. I got it from this article and it’s on my todo-list to further research and tweak it. Here are some links that might be helpful:

10 Likes
3

@iignatov can you open an issue for this on the ionic repo. Feels like it’s time to finally handle CSP and provide some sane default.

1 Like
4

@mhartington Thanks for the reminder, actually @joshmorony already opened one:

1 Like
6

Hey iignatov,

img-src 'self' data:* doesn’t work, well it did, but wont be able to use img in the cdvfile://*.

meta http-equiv=“Content-Security-Policy” content=“default-src * gap://ready file:; script-src ‘self’ ‘unsafe-inline’ ‘unsafe-eval’ *; style-src ‘self’ ‘unsafe-inline’ ;img-src ‘self’ data: blob: filesystem: cdvfile://; data: gap:cdvfile:https://ssl.gstatic.com ‘unsafe-eval’”

is there other way to use CSP meta-tag?

7

Worked for me - easy fix. thanks!

8

worked for me. thanks a lot