1

I created a angular project using angular-cli but when I start this project using 

npm start

it is showing 

Refused to load the font 'data:font/woff;base64,d09GRgABAAAAAGVUABEAAAAAxuQAAQABAAAAAAAAAAAAAAAAAAAAAAAAAABHREVGAAABgAAAAC4AAAA0ArgC7UdQT1MAAAGwAAAQ6AAALgxKsqRTR1NVQgAAEpgAAAH3AAAELqI5y+RPUy8yAAAUkAAAAE8AAABgaGyBu2NtYXAAABTgAAABlAAAAkQkRATXY3Z0IAAAFnQAAABeAAAAugDsQf1mcGdtAAAW1AAABZcAAAvNb3/BHGdhc3AAABxsAAAACAAAAAgAAAAQZ2x5ZgAAHHQAAEApAAB3CtbiupxoZWFkAABcoAAAADYAAAA2BkubWWhoZWEAAFzYAAAAIAAAACQHFARfaG10eAAAXPgAAAI6AAAEEk4TN4Nsb2NhAABfNAAAAhIAAAISiLhpam1heHAAAGFIAAAAIAAAACACigzgbmFtZQAAYWgAAACUAAABHhQGLdJwb3N0AABh/AAAAq4AAASRk5y6n3ByZ...QxUajCCFt4p9HP4fzdSWs2XhWl5HvJazrIrFUyB0l5dpqcW10lV2wukjMLuAvyMHNiYpgPsrCVXZDKrkpll6UWkh7kABVAFVCDe7UFmxagDegA+hLHRPbqtMo7ZHCpKdT6tPGXybzo0+RXBLoPZt1tELcXxCmAAyZwYTJvdDFZKnDER44X2451rDqCyunIsRWvLSx6wnWqwPj/uX5/KuEy6DL0z6A/Fn79VihxMFJsrlAFy4DpZOcvNlMeNp+BRDLj0r+XFdRxdSNSNxiI/AL3ojKdAAB4AWPw3sFwIihiIyNjX+QGxp0cDBwMyQUbGdictkUwWDAwsDJogTgOPN4c9iz6bMos4iysHFChUDZXJnMWTSZZJrAQt9M+YQYBBh4GTgY2kEZOoJiA0z4GBxiEiDEzuGxUYewIjNjg0BGxkTnFZaMaiLeLo4GBkcWhIzkkAqQkEggceHw5HFkM2VRZJFlYebR2MP5v3cDSu5GJwWUDW9xG1hQXAFAmKZU=' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'font-src' was not explicitly set, so 'default-src' is used as a fallback.

I read some SO answers then got the point that I need to set CSP meta tag so I added 

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; font-src 'self' data: fonts.gstatic.com">

in my index.html file. But this is still showing the same error logs on browser console. Any help?

This project is in a directory which is a git directory hosted on https://www.visualstudio.com/.

when I move this project from this git directory to somewhere else and run, It works. I don't know what is the reason?

Sunil Garg
  • 14,608
  • 25
  • 132
  • 189
  • Seems similar question: https://stackoverflow.com/questions/43078707/refused-to-load-the-font-angular-2; https://stackoverflow.com/questions/44732431/javascript-create-websocket-connection-refused-content-security/44732470#44732470 – Rohit Luthra Nov 09 '17 at 09:43
  • @Rohitluthra check the question, I have already mentioned, the solution provided is not working for me.. – Sunil Garg Nov 09 '17 at 09:47
  • I mentioned two different links which has two different answers. Have you tried both.? – Rohit Luthra Nov 09 '17 at 09:49
  • all in vain my friend – Sunil Garg Nov 09 '17 at 09:57
  • I don't know whether it will work or not use following: because there is semicolon at the end. – Rohit Luthra Nov 09 '17 at 10:00
  • this too is not working. – Sunil Garg Nov 09 '17 at 10:02
  • Check the response headers for the response. Some part of your backend is causing a Content-Security-Policy header to be added to the response — and the policy in that header doesn’t have a font-src directive and doesn’t otherwise allow data: URLs. And the way that CSP works when multiple policies are specified is that the most-strict policy is applied. So because the policy specified in the header is the most strict, your browser basicall just ignores the policy you’ve specified with the meta element in your document. So you need to change the value in the header on the backend. – sideshowbarker Nov 09 '17 at 16:33

2 Answers2

1

If you were getting the error before you set the CSP in a meta tag then there is already an existing CSP in place. Check for other meta tags in the document or check the HTTP response header. You can use https://securityheaders.io/ to scan your application and see if there is a CSP set.

Note: If you do set CSP in a meta tag the tag needs to be placed into the page prior to any asset you want to whitelist using it. The <meta> tag should be placed as early in the page as possible.

Scott Helme
  • 4,786
  • 2
  • 23
  • 35
-4

https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com data:;">

^ Should do the trick

WrksOnMyMachine
  • 301
  • 3
  • 16