फ़ॉन्ट का डेटा लोड करने से इनकार किया गया: फ़ॉन्ट / woff ... 'यह निम्नलिखित सामग्री सुरक्षा नीति के निर्देशों का उल्लंघन करता है: "डिफ़ॉल्ट-src' स्वयं '। ध्यान दें कि 'font-src'

Question

मेरी प्रतिक्रिया webApp ब्राउज़र कंसोल में यह त्रुटि दे

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.

इसके अलावा:

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.

ब्राउज़र कंसोल का स्क्रीनशॉट

index.html क्या यह मेटा है:

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

Comments

क्या आप कोशिश कर सकते हैं <meta http-equiv = "सामग्री-सुरक्षा-नीति" सामग्री = "img-src 'self' डेटा:; डिफ़ॉल्ट- src 'self' XX.XX.XX.XX: 8084 / mypp ">

— डेनिश

कुछ भी नहीं बदल रहा है <<मेटा http-equiv = "सामग्री-सुरक्षा-नीति" सामग्री = "img-src 'self' डेटा:; डिफ़ॉल्ट-src 'स्वयं' 121.0.0: 3000 ">; `अभी भी त्रुटि दे

— जावास्क्रिप्ट शिक्षार्थी

Answer 1

मेरे लिए यह क्रोम एक्सटेंशन 'ग्रामरली' की वजह से था। इसे अक्षम करने के बाद, मुझे त्रुटि नहीं मिली।

Comments

इसके लिए एक मूर्खतापूर्ण हैक क्या है। ग्रामरली क्रोम ऐप के कारण समस्या की कल्पना भी नहीं की जा सकती है।

— परदीप जैन

मुझे विश्वास नहीं हो रहा है कि मैंने कुछ घंटों तक यह महसूस करने की कोशिश की कि क्या चल रहा है और यह ग्रामरली ऐप के कारण हो रहा है। जरा उस कलश को हटाओ!

— आंद्रे इवेंजलिस्ता

खतरे, व्याकरण! मेरे पास दो अन्य डेवलपर्स थे, जिन्होंने इस मुद्दे को हल करने में मेरी मदद की। हमने सोचा कि हमने अपनी सामग्री सुरक्षा नीति को गलत तरीके से लागू किया है। Chrome से मेरा व्याकरण संबंधी निष्कासन हटा दिया गया और त्रुटियां दूर हो गईं। धन्यवाद या यह टिप!

— amlane86

नोट: प्लग इन ड्रॉपडाउन पर केवल "अक्षम करना" पर्याप्त नहीं है, आपको इसे क्रोम प्लगइन्स के पन्नों पर हटाना या अक्षम करना होगा

— जुआन बिसकिया

मेरे कोणीय एप्लिकेशन के साथ एक ही मुद्दा। इसने इसे ठीक कर दिया!

— स्टैक अंडरफ्लो

Answer 2

इस विशिष्ट त्रुटि को ठीक करने के लिए, CSP में यह शामिल होना चाहिए:

font-src 'self' data:;

इसलिए, index.html मेटा को पढ़ना चाहिए:

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

Comments

धन्यवाद इस समस्या को हल करता है। विचार करें कि कुछ उपयोगकर्ताओं के लिए यह एक्सटेंशन को अक्षम करने के लिए व्यवहार्य नहीं है, और आपकी साइट स्थानीय रूप से किसी भी संभावित एक्सटेंशन लोडिंग परिसंपत्तियों के साथ मुद्दों से

— बचेंगी

मुझे लगता है कि यह आपकी साइट को खराब एक्सटेंशन के लिए असुरक्षित छोड़ देगा और आगे के शोध के बिना इसके खिलाफ सलाह देगा।

— बिन्ज

क्या http://121.0.0:3000/पहले से ही 'स्वयं' का उपयोग करते समय यह निर्दिष्ट करना आवश्यक है ?

— सौरभ तिवारी

Answer 3

इसके लायक क्या है - मेरे पास एक समान मुद्दा था, यह मानते हुए कि यह क्रोम अपडेट से संबंधित है।

मुझे फॉन्ट-src जोड़ना था, और फिर url निर्दिष्ट करें क्योंकि मैं CDN का उपयोग कर रहा था

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

Comments

लेकिन मैं अपने स्थानीय कंप्यूटर से फ़ॉन्ट्स का उपयोग कर रहा था तो मुझे क्या लिखा जाएगा? data: fonts.gstatic.com

— जावास्क्रिप्ट लर्नर

@JavaScriptLearner - उस स्थिति में आप केवल डेटा आज़मा सकते हैं:

— IonicBurger

Answer 4

व्यक्तिगत अनुभव से, यह हमेशा सबसे अच्छा होता है, ऐड-ऑन / एक्सटेंशन के हस्तक्षेप को दूर करने के लिए अपनी साइट को इनकॉग्निटो (क्रोम), प्राइवेट ब्राउजिंग (फ़ायरफ़ॉक्स), और इनपीयर (IE11 && एज) में चलाने का पहला कदम। यदि वे अपनी सेटिंग्स में स्पष्ट रूप से सक्षम हैं, तो वे अभी भी इस मोड में परीक्षण में हस्तक्षेप कर सकते हैं। हालाँकि, किसी समस्या के निवारण के लिए यह एक आसान पहला चरण है।

वेब पेज ऑफ़ ट्रस्ट (WoT) के कारण मेरे पेज में कंटेंट जुड़ने के कारण, और मेरा पेज बहुत सख्त सुरक्षा प्रबंधन सुरक्षा के कारण था:

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

इससे कई त्रुटियां हुईं। मैं इस बात पर जवाब की तलाश कर रहा था कि इस साइट पर प्रोग्राम को न चलाने और चलाने के लिए कैसे विस्तार दिया जाए। इस तरह जब लोगों के पास एक्सटेंशन होते हैं, तो वे मेरी साइट पर नहीं चलेंगे। मुझे लगता है कि यदि यह संभव होता, तो विज्ञापन अवरोधकों को बहुत पहले साइटों पर प्रतिबंधित कर दिया गया होता। इसलिए मेरा शोध थोड़ा भोला है। आशा है कि यह किसी अन्य समस्या का निदान करने की कोशिश करने में किसी और की मदद करता है जो विशेष रूप से अन्य उत्तर में वर्णित एक्सटेंशन के मुट्ठी भर से बंधा नहीं है।

Answer 5

आपको इसे इसमें जोड़ने की आवश्यकता हो सकती है webpack.config.js:

devServer: {

        historyApiFallback: true
    }
};

Answer 6

मैं भी आज अपने नोड आवेदन में एक ही त्रुटि का सामना कर रहा था।

नीचे मेरा नोड एपीआई था।

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

फिक्स बहुत सरल था, मुझे मेरे एपीआई से पहले एक स्लैश "/" याद आ रही थी। इसलिए 'azureTable' से '/ azureTable' तक का रास्ता बदलने के बाद, इस मुद्दे को सुलझा लिया गया।

Answer 7

सीएसपी आपको उन स्रोतों को सफेद करने में मदद करता है जिन पर आपको भरोसा है। अन्य सभी स्रोतों तक पहुँचने की अनुमति नहीं है। इस प्रश्नोत्तर को ध्यान से पढ़ें , और फिर सुनिश्चित करें कि यदि आप उन पर भरोसा करते हैं, तो आप फोंट, सॉकेट कनेक्शन और अन्य स्रोतों को सफेद कर सकते हैं ।

यदि आप जानते हैं कि आप क्या कर रहे हैं, तो आप metaपरीक्षण करने के लिए टैग पर टिप्पणी कर सकते हैं , शायद सब कुछ काम करता है। लेकिन एहसास है कि आप / आपके उपयोगकर्ता को यहां संरक्षित किया जा रहा है, इसलिए metaटैग रखना संभवतः एक अच्छी बात है।

Comments

अच्छा जवाब के लिए धन्यवाद, लेकिन फिर भी मैं Refused to load the font 'data:font/woff;base64,d09इस त्रुटि को हल कर सकता हूं

— जावास्क्रिप्ट शिक्षार्थी

लेकिन यह मेटा मैक्सिमम एरर <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 *;"

— जावास्क्रिप्ट लर्नर

Answer 8

मेरा मुद्दा भी ऐसा ही था। मैंने angular.json में एक गलत आउटपुट फ़ोल्डर पथ का उल्लेख किया था

"outputPath": "dist/",

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

Answer 9

मैं इसी तरह के मुद्दे का सामना कर रहा था।

1. आपको सभी सीएसपी पैरामीटर को हटाने की आवश्यकता है जो डिफ़ॉल्ट रूप से उठाए गए हैं और समझते हैं कि प्रत्येक विशेषता की आवश्यकता क्यों है।

font-src - ब्राउज़र को src से फॉन्ट लोड करने के लिए बताना है जो उसके बाद निर्दिष्ट किया गया है। font-src: 'self' - यह फ़ॉन्ट परिवार को एक ही मूल या सिस्टम के भीतर लोड करने के लिए कहता है। font-src: 'self' data: - यह लोड फॉन्ट-फैमिली को एक ही मूल और डेटा प्राप्त करने के लिए किए गए कॉल्स को बताता है:

आपको चेतावनी भी मिल सकती है "** डाउनलोड किए गए फ़ॉन्ट को डिकोड करने में विफल, ओटीएस पार्सिंग त्रुटि: अमान्य संस्करण टैग **" सीएसपी में निम्न प्रविष्टि जोड़ें।

font-src: 'self' फॉन्ट

इसे अब बिना किसी त्रुटि के लोड करना चाहिए।

Answer 10

आपने कई स्थानों पर इनलाइन शैलियों का उपयोग किया होगा, जिन्हें CSP (सामग्री सुरक्षा नीति) निषिद्ध करती है क्योंकि यह खतरनाक हो सकता है।

बस उन इनलाइन शैलियों को हटाने की कोशिश करें और इसे समर्पित स्टाइलशीट के अंदर डालें।

Answer 11

मेरे पास एक ही समस्या थी और जिसे ./मेरे node.jsऐप में डायरेक्टरी नाम से पहले उपयोग करके हल किया गया था , अर्थात

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

Answer 12

मेरे लिए यह बहादुर ब्राउज़र में ipfs विस्तार के कारण था

Answer 13

ब्राउज़र का एक्सटेंशन uBlock की सेटिंग "ब्लॉक रिमोट फोंट" इस त्रुटि का कारण होगा। (नोट: व्याकरण समस्या नहीं थी, कम से कम मेरे लिए।)

आमतौर पर यह कोई समस्या नहीं है। जब एक दूरस्थ फ़ॉन्ट अवरुद्ध हो जाता है, तो आप किसी अन्य फ़ॉन्ट पर वापस आ जाते हैं और "ERR_BLOCKED_BY_CLIENT" कहते हुए एक कंसोल चेतावनी जारी की जाती है। हालाँकि, यह एक गंभीर समस्या हो सकती है जब कोई साइट Font Awesome का उपयोग करती है, क्योंकि आइकन बॉक्स के रूप में दिखाई देते हैं।

इसे ठीक करने के बारे में एक वेबसाइट बहुत कुछ नहीं कर सकती (लेकिन आप इसे फ़ॉन्ट-आधारित आइकन लेबल करके बहुत बुरा होने से रोक सकते हैं)। CSP को बदलना (या एक को जोड़ना) इसे ठीक नहीं करेगा। अपनी वेबसाइट से फोंट की सेवा (और सीडीएन नहीं) भी इसे ठीक नहीं करेगा।

दूसरी ओर, उबलॉक उपयोगकर्ता में निम्न में से एक करके इसे ठीक करने की शक्ति है:

• एक्सटेंशन के लिए डैशबोर्ड में विश्व स्तर पर विकल्प को अनचेक करें
• अपनी वेबसाइट पर नेविगेट करें और एक्सटेंशन आइकन पर क्लिक करें, फिर उस साइट के लिए फोंट को ब्लॉक न करने के लिए पार किए गए 'ए' आइकन पर
• एक्सटेंशन के डैशबोर्ड में इसे श्वेतसूची में जोड़कर अपनी साइट के लिए अनलॉक करें

Answer 14

यदि आपका प्रोजेक्ट vue-cli है और आप चलाते हैं npm run buildतो आपको बदलना चाहिए

assetsPublicPath: '/' सेवा assetsPublicPath'./'

Answer 15

मेरे पास एक ही मुद्दा था और यह पता चला कि उस फ़ाइल की निर्देशिका में एक त्रुटि थी जिसे मैं इसके बजाय सेवा करने की कोशिश कर रहा था:

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

मैं था :

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

Answer 16

मुझे अपने रनिंग कोड में आज भी इसी मुद्दे का सामना करना पड़ा। खैर, मुझे यहाँ बहुत सारे उत्तर मिले। लेकिन मैं जिस महत्वपूर्ण बात का उल्लेख करना चाहता हूं, वह यह है कि यह त्रुटि संदेश काफी अस्पष्ट है और स्पष्ट त्रुटि को स्पष्ट रूप से इंगित नहीं करता है।

कुछ ने ब्राउज़र एक्सटेंशन के कारण इसका सामना किया, कुछ ने गलत URL पैटर्न के कारण और मुझे इसका सामना उस स्क्रीन में पॉप-अप में उपयोग किए गए मेरे फॉर्मग्रुप इंस्टेंस में त्रुटि के कारण हुआ। इसलिए, मैं सभी को सुझाव दूंगा कि आपके कोड में कोई भी नया परिवर्तन करने से पहले, कृपया अपना कोड डिबग करें और सत्यापित करें कि आपके पास ऐसी कोई त्रुटि नहीं है। आप निश्चित रूप से डिबगिंग द्वारा वास्तविक कारण पाएंगे।

अगर कुछ और काम नहीं करता है तो अपने URL की जांच करें क्योंकि यह इस समस्या का सबसे आम कारण है।

Answer 17

मेरे लार्वा और VueJS प्रोजेक्ट में मैंने webpack.mix.js फ़ाइल के साथ इस त्रुटि को हल किया। इसमें शामिल है

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

Answer 18

यहाँ कोड का एक हिस्सा है जिसका उपयोग मैं अपने server.js फ़ाइल को कोणीय डिस्ट फ़ोल्डर में निर्देशित करने के लिए करता हूं , जिसे npm के निर्माण के बाद बनाया गया था

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

मैंने इसे बदलकर तय "/dist/"किया"./dist/"

Answer 19

मेरे मामले में, मैंने क्रिएट-रिएक्शन-ऐप जनरेटेड ऐप से src / registerServiceWorker फ़ाइल को हटा दिया । मैंने इसे जोड़ा और अब यह सब काम कर रहा है।