Refused to load the stylesheet ‘https://fonts.googleapis.com/css?family=Roboto:400,300,500,700’ because it violates the following Content Security Policy directive: “style-src ‘self’ ‘unsafe-inline’”.
I’m facing the same issue with a project that’s using Mantra. Does anyone know if one should use React Helmet or Kadira DocHead to add Meta tags? If so, what’s the exact way to specify the meta tag using DocHead? I’m currently using the following in client/main.js:
DocHead.addMeta({ 'http-equiv': 'Content-Security-Policy', content: "style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.comdata:" });
The issue is exactly what it the message says it is, you’re trying to load stylesheets from a location that is not specified in your Content-Security-Policy directive. Just change the relevant part of the directive to:
style-src 'self' 'unsafe-inline' https://fonts.googleapis.com
Hey @mjmasn! Thanks for the quick response! I’ve tried that as well but the issue is, I’m not sure if the meta tags are actually inserted into the DOM by Kadira:DocHead in main.js. I’ve tried scrolling through the HTML code rendered but can’t seem to find it anywhere. This seems to indicate that the meta tags aren’t created at all!
@gabrielsohappy that was more aimed at @neutron92. I think your problem is that you’re trying to set the header on the client. Allowing that would defeat the point of CSP.
You need to set the header on the server. I think you can probably do this with kadira:dochead (see https://github.com/kadirahq/meteor-dochead#usage) but personally I’d do it with haproxy or nginx running in front of your app.
change it to what???
Not sure what you mean. I’ve already given an example value for allowing stylesheets from Google fonts. You’ll need to do some research on CSP headers to know what’s right for your setup.