Odmówiono załadowania czcionki „data: font / woff…”, narusza to następującą dyrektywę Content Security Policy: „default-src 'self'”. Zwróć uwagę, że „font-src”

Moja reakcja webApp daje ten błąd w konsoli przeglądarki

Refused to load the font 'data:font/woff;base64,d09........' 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.

Również:

Refused to connect to 'ws://localhost:3000/sockjs-node/782/oawzy1fx/websocket' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.

Zrzut ekranu konsoli przeglądarki

index.html Czy ta meta:

<meta http-equiv="Content-Security-Policy" content="img-src 'self' data:; default-src 'self' http://121.0.0:3000/">

WebPack.cofig.js

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');

module.exports = {
    context: path.join(__dirname, "./src"),
    devtool: debug ? "inline-sourcemap" : true,
    entry: "../src/index.js",

    module: {
        rules: [
            {
                test: /\.(jpe?g|png|gif|svg|woff|woff2|eot|ttf)$/i,  // a regular expression that catches .js files
                exclude: /node_modules/,
                loader: 'url-loader',
            },
            {
                test: /\.(js|.jsx)$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader',
                query: {
                    presets: ['react','es2016', 'stage-0',],
                    plugins: ['react-html-attrs', 'transform-decorators-legacy', 'transform-class-properties'],
                }
            },
            {
                test: /\.css$/,
                use: [
                    "style-loader",
                    {
                        loader: "css-loader",
                    }
                ]
            }
        ]
    },
    resolve: {
        modules: [
            path.join(__dirname, "src"),
            "node_modules",
        ]
    },
    output: {
        path: __dirname + "/public/",
        // publicPath: "/public/",
        filename: "build.js"
    },
    plugins: debug ? [] : [
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
    ],
    devServer: {
        port: 3000, // most common port
        contentBase: './public',
        inline: true,
        historyApiFallback: true,
    }
};

Dla mnie to z powodu rozszerzenia Chrome „Grammarly”. Po wyłączeniu tego błędu nie otrzymałem.

Aby naprawić ten konkretny błąd, dostawca CSP powinien zawierać następujące informacje:

font-src 'self' data:;

Tak więc meta index.html powinna brzmieć:

<meta http-equiv="Content-Security-Policy" content="font-src 'self' data:; img-src 'self' data:; default-src 'self' http://121.0.0:3000/">

No cóż - miałem podobny problem, zakładając, że jest związany z aktualizacją Chrome.

Musiałem dodać font-src, a następnie podać adres URL, ponieważ korzystałem z CDN

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

Z własnego doświadczenia zawsze najlepszym pierwszym krokiem jest uruchomienie witryny w trybie incognito (Chrome), przeglądania prywatnego (Firefox) i InPrivate (IE11 i Edge), aby usunąć zakłócenia spowodowane dodatkami / rozszerzeniami. Mogą one nadal kolidować z testowaniem w tym trybie, jeśli zostały wyraźnie włączone w ich ustawieniach. Jednak jest to łatwy pierwszy krok do rozwiązania problemu.

Powodem, dla którego tu jestem, był fakt, że Web of Trust (WoT) dodał zawartość do mojej strony, a moja strona miała bardzo surową politykę bezpieczeństwa treści:

Header set Content-Security-Policy "default-src 'none'; font-src 'self' data:; style-src 'self' 'unsafe-inline' data:; img-src 'self' data:; script-src 'self' 'unsafe-inline'; connect-src 'self';"

Spowodowało to wiele błędów. Szukałem bardziej odpowiedzi, jak powiedzieć rozszerzeniu, aby nie próbowało uruchamiać się w tej witrynie programowo. W ten sposób, gdy ludzie mają rozszerzenia, po prostu nie będą działać w mojej witrynie. Wyobrażam sobie, że gdyby to było możliwe, programy blokujące reklamy zostałyby już dawno zbanowane w witrynach. Więc moje badania są trochę naiwne. Mam nadzieję, że pomoże to każdemu, kto próbuje zdiagnozować problem, który nie jest konkretnie związany z kilkoma wymienionymi rozszerzeniami w innych odpowiedziach.

Może być konieczne dodanie tego do webpack.config.js:

devServer: {

        historyApiFallback: true
    }
};

Miałem dzisiaj ten sam błąd w mojej aplikacji węzła.

Poniżej znajduje się mój interfejs API węzła.

app.get('azureTable', (req, res) => {
  const tableSvc = azure.createTableService(config.azureTableAccountName, config.azureTableAccountKey);
  const query = new azure.TableQuery().top(1).where('PartitionKey eq ?', config.azureTablePartitionKey);
  tableSvc.queryEntities(config.azureTableName, query, null, (error, result, response) => {
    if (error) { return; }
    res.send(result);
    console.log(result)
  });
});

Poprawka była bardzo prosta, brakowało mi ukośnika „/” przed moim API. Dlatego po zmianie ścieżki z „azureTable” na „/ azureTable” problem został rozwiązany.

Dostawca usług CSP pomaga tworzyć listy zaufanych źródeł na białej liście. Żadne inne źródła nie mają dostępu do. Przeczytaj uważnie te pytania i odpowiedzi , a następnie upewnij się, że umieściłeś na białej liście czcionki, połączenia gniazd i inne źródła, jeśli im ufasz .

Jeśli wiesz, co robisz, możesz skomentować metatag, aby przetestować, prawdopodobnie wszystko działa. Ale zdaj sobie sprawę, że Ty / Twój użytkownik jesteście tutaj chronieni, więc zachowanie metatagu jest prawdopodobnie dobrą rzeczą.

Miałem podobny problem. Wspomniałem o złej ścieżce folderu wyjściowego w angular.json

"outputPath": "dist/",

app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, 'dist/index.html'));
});

Miałem podobny problem.

1. Musisz usunąć wszystkie parametry CSP, które są pobierane domyślnie, i zrozumieć, dlaczego każdy atrybut jest wymagany.

font-src - mówi przeglądarce, aby załadowała czcionkę z src, który jest określony później. font-src: 'self' - mówi, aby załadować rodzinę czcionek z tego samego źródła lub systemu. font-src: 'self' data: - to mówi załadować rodzinę czcionek w tym samym źródle i wywołania wykonane w celu pobrania danych:

Możesz również otrzymać ostrzeżenie „** Nie udało się zdekodować pobranej czcionki, błąd analizy OTS: nieprawidłowy tag wersji **” Dodaj następujący wpis w CSP.

font-src: czcionka 'self'

Powinno się teraz załadować bez błędów.

W wielu miejscach można by użyć stylów wbudowanych, których CSP (polityka bezpieczeństwa treści) zabrania, ponieważ mogłoby to być niebezpieczne.

Po prostu spróbuj usunąć te wbudowane style i umieść je w dedykowanym arkuszu stylów.

Miałem ten sam problem, który został rozwiązany, używając ./przed nazwą katalogu w mojej node.jsaplikacji, tj

app.use(express.static('./public'));

Dla mnie to z powodu rozszerzenia ipfs w dzielnej przeglądarce

Ustawienie rozszerzenia przeglądarki uBlock „Blokuj zdalne czcionki” . (Uwaga: Grammarly nie stanowiło problemu, przynajmniej dla mnie).

Zwykle nie stanowi to problemu. Gdy zdalna czcionka jest zablokowana, wracasz do innej czcionki i pojawia się ostrzeżenie konsoli „ERR_BLOCKED_BY_CLIENT”. Może to jednak stanowić poważny problem, gdy witryna używa Font Awesome, ponieważ ikony są wyświetlane jako ramki.

Witryna niewiele może zrobić, aby to naprawić (ale można zapobiec temu, np. Poprzez oznaczanie ikon opartych na czcionkach). Zmiana dostawcy CSP (lub dodanie go) nie naprawi tego problemu. Udostępnianie czcionek z Twojej witryny (a nie z CDN) również tego nie naprawi.

Z drugiej strony użytkownik uBlock może to naprawić, wykonując jedną z następujących czynności:

• Usuń zaznaczenie opcji globalnie na pulpicie nawigacyjnym dla rozszerzenia
• Przejdź do swojej witryny i kliknij ikonę rozszerzenia, a następnie przekreśloną ikonę „A”, aby nie blokować czcionek tylko dla tej witryny
• Wyłącz uBlock dla swojej witryny, dodając ją do białej listy w panelu rozszerzenia

Jeśli Twój projekt jest vue-cli i działa npm run build, powinieneś to zmienić

assetsPublicPath: '/' do assetsPublicPath'./'

Miałem ten sam problem i okazuje się, że wystąpił błąd w katalogu pliku, który próbowałem obsłużyć zamiast:

app.use(express.static(__dirname + '/../dist'));

Miałem :

app.use(express.static('./dist'));

W moim działającym kodzie napotkałem dziś ten sam problem. Cóż, znalazłem tutaj wiele odpowiedzi. Ale ważną rzeczą, o której chcę wspomnieć, jest to, że ten komunikat o błędzie jest dość niejednoznaczny i nie wskazuje wyraźnie dokładnego błędu.

Niektórzy napotkali to z powodu rozszerzeń przeglądarki, inni z powodu nieprawidłowych wzorców adresów URL, a ja spotkałem się z tym z powodu błędu w mojej instancji formGroup używanej w wyskakującym okienku na tym ekranie. Dlatego sugerowałbym wszystkim, aby przed wprowadzeniem jakichkolwiek nowych zmian w kodzie debugowali kod i sprawdzili, czy nie ma takich błędów. Z pewnością znajdziesz prawdziwy powód, debugując.

Jeśli nic innego nie działa, sprawdź adres URL, ponieważ jest to najczęstsza przyczyna tego problemu.

W moim projekcie laravel & VueJS rozwiązałem ten błąd za pomocą pliku webpack.mix.js. Zawiera

const mix = require('laravel-mix');

mix.webpackConfig({
   devServer: {
     proxy: {
       '*': 'http://localhost:8000'
     }
   },
   resolve: {
     alias: {
       "@": path.resolve(
         __dirname,
         "resources/assets/js"
       )
     }
   }
 });

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

Oto część kodu, którego używam do kierowania mojego pliku server.js do folderu angular dist , który został utworzony po kompilacji npm

// Create link to Angular build directory
var distDir = __dirname + "/dist/";
app.use(express.static(distDir));

Naprawiłem to, zmieniając "/dist/"na"./dist/"

W moim przypadku usunąłem usunąłem plik src / registerServiceWorker z aplikacji wygenerowanej przez Create-React-App. Dodałem i teraz wszystko działa.