Yazı tipini yüklemeyi reddetti: 'data: font / woff…' aşağıdaki İçerik Güvenlik Politikası direktifini ihlal ediyor: “default-src 'self'”. 'Font-src'nin


109

React webApp'ım bu Hatayı Tarayıcı Konsolunda veriyor

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.

Ayrıca:

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.

Tarayıcı konsolunun ekran görüntüsü görüntü açıklamasını buraya girin

index.html bu var 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,
    }
};

deneyebilir misin <meta http-equiv = "Content-Security-Policy" content = "img-src 'self' data :; default-src 'self' XX.XX.XX.XX: 8084 / mypp ">
Danish

hiçbir şey değişmez "<meta http-equiv =" Content-Security-Policy "content =" img-src 'self' data :; default-src 'self' 121.0.0: 3000 ">; `` hala Hata veriyor
JavaScript Öğrenici

Yanıtlar:


261

Benim için bunun nedeni 'Grammarly' Chrome uzantısıydı. Bunu devre dışı bıraktıktan sonra hatayı almadım.


11
Bunun için ne kadar aptalca bir hack. Sorunun Grammarly krom uygulamasından kaynaklandığını hayal bile edemiyorum.
Pardeep Jain

4
Neler olduğunu anlamaya çalışmak için birkaç saat harcadığıma ve buna Grammarly uygulamasının neden olduğuna inanamıyorum. Sadece o izini kaldır!
Andre Evangelista

3
Dangit, Grammarly! Bu sorunu çözmek için bana yardımcı olan iki geliştiricim daha vardı. İçerik güvenliği politikamızı yanlış uyguladığımızı düşündük. Grammarly genişletmem Chrome'dan kaldırıldı ve hatalar ortadan kalktı. Teşekkürler ya da bu ipucu!
amlane86

6
Not: yalnızca eklenti yapılandırması açılır
menüsünde

2
Angular uygulamamla aynı sorun. Bu onu hemen düzeltti!
Stack

56

Bu belirli hatayı düzeltmek için CSP şunu içermelidir:

font-src 'self' data:;

Yani, index.html meta şunu okumalıdır:

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

1
Teşekkürler, bu da sorunu çözer. Bazı kullanıcılar için uzantıyı devre dışı
bırakmanın

1
Bunun sitenizi kötü uzantılara karşı güvensiz bırakacağını ve daha fazla araştırma yapmadan buna karşı tavsiyede bulunacağını düşünüyorum.
binz

http://121.0.0:3000/Zaten 'self' kullanırken belirtmek gerekiyor mu?
Saurabh Tiwari

20

Değeri ne olursa olsun - bir Chrome güncellemesiyle ilgili olduğunu varsayarak benzer bir sorun yaşadım.

CDN kullanıyordum çünkü font-src eklemem ve ardından url'yi belirtmem gerekiyordu

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

1
ama yerel bilgisayarımdan Yazı Tiplerini Kullanıyordum, bu yüzden ne yazacağım? data: fonts.gstatic.com
JavaScript Öğrenci

5
@JavaScriptLearner - bu durumda verileri deneyebilirsiniz:
IonicBurger

13

Kişisel deneyime göre, eklentilerin / uzantıların müdahalesini ortadan kaldırmak için sitenizi Gizli Modda (Chrome), Özel Tarama (Firefox) ve InPrivate (IE11 && Edge) modunda çalıştırmak her zaman en iyi ve ilk adımdır. Bunlar, ayarlarında açıkça etkinleştirilirse, bu modda teste yine de müdahale edebilir. Ancak, bir sorunu gidermenin kolay bir ilk adımıdır.

Burada bulunmamın nedeni, Web of Trust'ın (WoT) sayfama içerik eklemesinden ve sayfamın çok katı İçerik Güvenliği Politikasına sahip olmasından kaynaklanıyordu:

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';"

Bu birçok hataya neden oldu. Uzantının bu sitede programlı olarak çalışmamasını nasıl söyleyeceğime dair bir cevap arıyordum. Bu şekilde, insanların uzantıları olduğunda, sitemde yayınlanmayacaklar. Sanırım bu mümkün olsaydı, reklam engelleyiciler uzun zaman önce sitelerde yasaklanmış olurdu. Yani araştırmam biraz saf. Umarım bu, diğer yanıtlarda belirtilen bir avuç uzantıya özellikle bağlı olmayan bir sorunu teşhis etmeye çalışan başkalarına yardımcı olur.


9

Bunu şuraya eklemeniz gerekebilir webpack.config.js:

devServer: {

        historyApiFallback: true
    }
};

3

Bugün düğüm uygulamamda da aynı hatayla karşılaşıyordum.

görüntü açıklamasını buraya girin

Aşağıda benim düğüm API'm vardı.

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)
  });
});

Düzeltme çok basitti, API'mden önce eğik çizgi "/" eksikti. Dolayısıyla, yolu "azureTable" dan "/ azureTable" a değiştirdikten sonra sorun çözüldü.


2

CSP, güvendiğiniz kaynakları beyaz listeye eklemenize yardımcı olur. Diğer tüm kaynakların erişimine izin verilmez. Bu Soru-Cevap bölümünü dikkatlice okuyun ve ardından güveniyorsanız yazı tiplerini, soket bağlantılarını ve diğer kaynakları beyaz listeye eklediğinizden emin olun .

Ne yaptığınızı biliyorsanız, metatest etmek için etiketi yorumlayabilirsiniz, muhtemelen her şey çalışır. Ancak sizin / kullanıcınızın burada korunduğunun farkında olun, bu nedenle metaetiketi saklamak muhtemelen iyi bir şeydir.


1
Güzel cevap için teşekkürler ama yine de Refused to load the font 'data:font/woff;base64,d09bu hatayı çözebilirim
JavaScript Öğrencisi

1
Ama bu meta Maksimum Hatayı Çöz:<meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'; img-src * data: 'unsafe-inline'; connect-src * 'unsafe-inline'; frame-src *;"
JavaScript Öğrenicisi

2

Benzer bir sorun yaşadım. Angular.json'da yanlış bir çıktı klasörü yolundan bahsetmiştim

"outputPath": "dist/",

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

2

Ben de benzer bir sorunla karşı karşıyaydım.

  1. Varsayılan olarak alınan tüm CSP parametrelerini kaldırmanız ve her bir özelliğin neden gerekli olduğunu anlamanız gerekir.

font-src - tarayıcıya fontları bundan sonra belirtilen src'den yüklemesini söylemektir. font-src: 'self' - bu, font ailesini aynı kaynak veya sistem içinde yüklemeyi söyler. font-src: 'self' data: - bu, aynı başlangıçtaki font ailesini ve veri almak için yapılan çağrıları belirtir:

Ayrıca "** İndirilen yazı tipinin kodu çözülemedi, OTS ayrıştırma hatası: geçersiz sürüm etiketi **" Şu girişi CSP'ye ekleyin.

font-src: 'self' yazı tipi

Bu artık hatasız yüklenmelidir.


1

CSP'nin (İçerik Güvenliği Politikası) tehlikeli olabileceği için yasakladığı birçok yerde satır içi stilleri kullanırdınız.

Sadece bu satır içi stilleri kaldırmayı deneyin ve özel stil sayfasının içine koyun.


1

Aynı sorunu yaşadım ve hangisi uygulamamda ./dizin adından önce kullanılarak çözüldü node.js, yani

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



1

Tarayıcı uzantısı uBlock'un "Uzak yazı tiplerini engelle" ayarı bu hataya neden olur. (Not: Dilbilgisi, en azından benim için sorun değildi.)

Genellikle bu bir problem değildir. Uzak bir yazı tipi engellendiğinde, başka bir yazı tipine geri dönersiniz ve “ERR_BLOCKED_BY_CLIENT” diyen bir konsol uyarısı verilir. Ancak, bir site Harika Yazı Tipi kullandığında bu ciddi bir sorun olabilir, çünkü simgeler kutu olarak gösterilir.

Bunu düzeltmek için bir web sitesinin yapabileceği pek bir şey yoktur (ancak, örneğin yazı tipi tabanlı simgeleri etiketleyerek bunun çok kötü olmasını önleyebilirsiniz). CSP'yi değiştirmek (veya bir tane eklemek) onu düzeltmeyecektir. Yazı tiplerini web sitenizden sunmak (bir CDN'den değil) da düzeltmeyecektir.

Öte yandan uBlock kullanıcısı, aşağıdakilerden birini yaparak bunu düzeltme gücüne sahiptir:

  • Uzantı için gösterge tablosunda genel olarak seçeneğin işaretini kaldırın
  • Web sitenize gidin ve uzantı simgesine tıklayın, ardından yalnızca o site için yazı tiplerini engellememek için üstü çizili 'A' simgesine tıklayın
  • Uzantının kontrol panelindeki beyaz listeye ekleyerek siteniz için uBlock'u devre dışı bırakın

0

Projeniz vue-cli ise ve çalıştırırsanız npm run build, değişmelisiniz

assetsPublicPath: '/' -e assetsPublicPath'./'


0

Aynı sorunu yaşadım ve bunun yerine sunmaya çalıştığım dosyanın dizininde bir hata olduğu ortaya çıktı:

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

Sahiptim :

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


0

Ben de bugün çalışan kodumda aynı sorunla karşılaştım. Burada birçok cevap buldum. Ancak bahsetmek istediğim önemli şey, bu hata mesajının oldukça belirsiz olması ve açıkça hatayı tam olarak göstermemesidir.

Bazıları tarayıcı uzantıları nedeniyle, bazıları yanlış URL kalıpları nedeniyle bununla karşılaştı ve bu ekrandaki bir pop-up'ta kullanılan formGroup örneğimdeki bir hata nedeniyle karşılaştım. Bu nedenle, herkese kodunuzda herhangi bir yeni değişiklik yapmadan önce, lütfen kodunuzda hata ayıklamasını ve bu tür hataların olmadığını doğrulamasını öneririm. Hata ayıklayarak gerçek nedeni kesinlikle bulacaksınız.

Başka hiçbir şey işe yaramazsa, bu sorunun en yaygın nedeni bu olduğundan URL'nizi kontrol edin.


0

Laravel & VueJS projemde bu hatayı webpack.mix.js dosyası ile çözdüm. Bu içerir

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');

0

Burada server.js dosyamı npm derlemesinden sonra oluşturulan açısal dist klasörüne yönlendirmek için kullandığım kodun bir parçası var

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

Ben değiştirerek sabit "/dist/"etmek"./dist/"


-1

Benim durumumda, src / registerServiceWorker dosyasını create-react-app tarafından oluşturulan uygulamadan sildim . Ekledim ve şimdi hepsi çalışıyor.

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.