Login/Register
Error: “Note that 'style-src-elem' was not explicitly set” when it is set
Asked Answered
electroncontent-security-policygoogle-font-api
E

1

10

Having the same problem as this guy but am not using .NET so I don't know what the answer to this problem is. I am using Electron.

<head>
<meta http-equiv="Content-Security-Policy" content="style-src-elem 'self' https://fonts.googleapis.com">

<meta http-equiv="Content-Security-Policy" content="font-src https://fonts.gstatic.com">

<meta http-equiv="Content-Security-Policy" content="default-src 'self'">

<meta charset="UTF-8">

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap" rel="stylesheet">

<link rel="stylesheet" href="index.css">
</head>

Here is the error:

Refused to load the stylesheet 'https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'style-src-elem' was not explicitly set, so 'default-src' is used as a fallback.

The question is here, 'style-src-elem' IS explicitly set. I have no idea what is going on. Please help

Ebro answered 16/2, 2021 at 4:29 Comment(0)
E
7

Nevermind, figured it out! I thought I could separate the <meta> tags for readability, but it turns out that was not the case. Each <meta> tag was over-writing the previous, leaving everything to check for the last content="default-src 'self'" <meta> tag. Here is the working code for anyone that is having a similar problem:

<head>
    <meta http-equiv="Content-Security-Policy" content="
        default-src 'self';
        style-src-elem 'self' https://fonts.googleapis.com;
        font-src https://fonts.gstatic.com;
    ">

    <meta charset="UTF-8">



    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="index.css">
</head>
Ebro answered 16/2, 2021 at 4:45 Comment(3)
Yeap, several meta's means several CSPs, those works a tricky way. But you still have an error Refused to load the stylesheet 'https://fonts.googleapis.com... have a look in Firefox or Safari. You have to duplicate content from style-src-elem into style-src, because some browsers do not support style-src-elem directive. – Longicorn
@Longicorn Possibly would need to do that on the web for different browsers. In my case, I am developing an electron program. Electron is run exclusively on Chromium, so there shouldn't be an issue with multiple browsers. – Ebro
@Longicorn thanks for mentioning this link, I've reported issue to webkit and created reproduction repo as well, see bugs.webkit.org/show_bug.cgi?id=276931 – Affectation

© 2022 - 2024 — McMap. All rights reserved.