0

I get this error

Refused to load the stylesheet 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.

There are several related questions. I have tried modifying the meta tag Content-Security-Policy using answers from all of the related questions, but none of them resolve the error.

It strikes me as odd that the error message states I have CSP values that differ from what I put in the meta.

The content of my page:

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta http-equiv="Content-Security-Policy" content="style-src 'self' http://fonts.googleapis.com; font-src 'self' https://fonts.googleapis.com https://themes.googleusercontent.com;">
    <!--<meta http-equiv="Content-Security-Policy" content="default-src *" />-->
    <!--<meta http-equiv="Content-Security-Policy" content="default-src *; style-src https://fonts.googleapis.com; font-src https://fonts.gstatic.com data:; script-src 'self' http://* 'unsafe-inline' 'unsafe-eval'" />-->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Badgers</title>

    <link rel="stylesheet" media="screen" href="/assets/stylesheets/main.css">
    <link rel="stylesheet" media="screen" href="/assets/stylesheets/material-components-web.min.css"/>
    <link rel="stylesheet" media="screen" href="/assets/stylesheets/normalize.min.css"/>
    <link rel="stylesheet" media="screen" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">

    <link rel="icon" sizes="192x192" href="/assets/images/favicon.png">
    <link rel="shortcut icon" type="image/png" href="/assets/images/favicon.png">
</head>

I am loading via http on localhost in development mode.

Synesso
  • 37,610
  • 35
  • 136
  • 207
  • 2
    What’s described in the question would seem to indicate the document is being served with a Content-Security-Policy header (in addition to what the document specifies using the meta element). If so, you can’t use a meta element to override the policy in that header with a less-strict policy. Instead in the meta element you can only specify directives that will make the policy more strict. See the answer at https://stackoverflow.com/questions/51148998/what-is-happening-when-i-have-two-csp-content-security-policies-policies-hea/51153816#51153816 – sideshowbarker Sep 10 '18 at 12:09
  • Ah, that's very helpful @sideshowbarker - almost certainly this is the case. – Synesso Sep 10 '18 at 12:27

0 Answers0