Google maps API error "refused to load font"

Question

I am using Google maps in my angular2/Ionic2 app and I get the following error:

js?libraries=geometry,drawing,places:79 Refused to load the font 'https://fonts.gstatic.com/s/roboto/v15/isZ-wbCXNKAbnjo6_TwHThJtnKITppOI_IvcXXDNrsc.woff2' because it violates the following Content Security Policy directive: "font-src 'self' data:".

What is this error, and how can I fix it?

My index.html has:

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

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,drawing,places"></script>

Removing the meta tag solves the problem, but I am not sure what it does and whether I should remove it.

score 0 · Answer 1 · edited May 23 '17 at 11:54

This is not about inline javascript, but inline style tags. Either you have them (probably not), or you are using something (possibly a jquery plugin) that is adding them. Based from this blog, you ned to enable it by adding the configuration from https://github.com/rwjblue/ember-cli-content-security-policy#options into your config/environment.js.

The default contentSecurityPolicy value is:

 contentSecurityPolicy: {
    'default-src': ["'none'"],
    'script-src':  ["'self'"],
    'font-src':    ["'self'"],
    'connect-src': ["'self'"],
    'img-src':     ["'self'"],
    'style-src':   ["'self'"],
    'media-src':   ["'self'"]
  }

Check these related links: Violating Content Security Policy directive after ember-cli 0.0.47 upgrade and "[Report Only] Refused to load the font..." error message on console

Google maps API error "refused to load font"

1 Answers1