ফন্ট 'ডেটা: ফন্ট / ওফফ ...' লোড করতে অস্বীকার করে এটি নিম্নলিখিত সামগ্রী সুরক্ষা নীতি নির্দেশকে লঙ্ঘন করে: "ডিফল্ট- src 'স্ব'। মনে রাখবেন যে 'ফন্ট-এসসিআর'

Question

আমার প্রতিক্রিয়া ওয়েব অ্যাপ ব্রাউজার কনসোলে এই ত্রুটি দেয়

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

আপনি কি <মেটা http-برابر = "সামগ্রী-সুরক্ষা-নীতি" বিষয়বস্তু = "img-src 'স্ব' ডেটা:; ডিফল্ট- src 'স্ব' XX.XX.XX.XX: 8084 / mypp ">

— ডেনিশ

কিছুই পরিবর্তন হয় না `<মেটা http-برابر =" সামগ্রী-সুরক্ষা-নীতি "বিষয়বস্তু =" img-src 'স্ব' ডেটা:; ডিফল্ট- src 'স্ব' 121.0.0: 3000 ">; `তবু ত্রুটি দিন

— জাভাস্ক্রিপ্ট লার্নার

Answer 1

আমার জন্য এটি ক্রোম এক্সটেনশনের 'ব্যাকরণ' এর কারণে হয়েছিল। এটি নিষ্ক্রিয় করার পরেও আমি ত্রুটিটি পাই নি।

Comments

এটির জন্য কী মূর্খ হ্যাক। ব্যাকরণ ক্রোম অ্যাপের কারণে সমস্যাটি কল্পনাও করতে পারে না।

— পারদীপ জৈন

আমি বিশ্বাস করতে পারি না যে আমি কী ঘটছে তা বুঝতে চেষ্টা করার জন্য কয়েক ঘন্টা ব্যয় করেছি এবং এটি ব্যাকরণের অ্যাপ্লিকেশনটির কারণে হয়েছিল। শুধু তাশ মুছে ফেলুন!

— আন্দ্রে ইভাঞ্জেলিস্টা

ডাঙিত, ব্যাকরণ! আমার অন্য দুজন বিকাশকারী এই সমস্যাটি সমাধান করতে কোনও সমস্যা সমাধানে সহায়তা করেছিল। আমরা ভেবেছিলাম আমরা ভুলভাবে আমাদের সামগ্রী সুরক্ষা নীতি প্রয়োগ করেছি implemented ক্রোম থেকে আমার ব্যাকরণগত এক্সপেনশন সরানো হয়েছে এবং ত্রুটিগুলি চলে গেছে। ধন্যবাদ বা এই টিপ!

— amlane86

দ্রষ্টব্য: প্লাগইন কনফিগারেশন ড্রপডাউনটিতে কেবলমাত্র "অক্ষম" যথেষ্ট নয়, আপনাকে ক্রোম প্লাগইন পৃষ্ঠাগুলিতে এটি অপসারণ বা অক্ষম করতে হবে

— জুয়ান বিস্কিয়া

আমার কৌনিক অ্যাপ্লিকেশনে একই সমস্যা। এটি ঠিক এটি স্থির!

— স্টোর আন্ডারফ্লো

Answer 2

এই নির্দিষ্ট ত্রুটিটি ঠিক করতে, সিএসপিতে এটি অন্তর্ভুক্ত করা উচিত:

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

এটি মূল্যবান কিসের জন্য - আমি এটি একটি ক্রোম আপডেটের সাথে সম্পর্কিত বলে ধরে নিয়ে একই ধরণের সমস্যা পেয়েছি।

আমাকে ফন্ট-এসসিআর যুক্ত করতে হয়েছিল, এবং তারপরে ইউআরএল নির্দিষ্ট করতে হবে কারণ আমি সিডিএন ব্যবহার করছিলাম

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

Comments

তবে আমি আমার লোকাল কম্পিউটার থেকে হরফ ব্যবহার করতাম তাই আমি কী লিখছি ?? data: fonts.gstatic.com

— জাভাস্ক্রিপ্ট শিখতে

@ জাভা স্ক্রিপ্টলিয়ারার - সেক্ষেত্রে আপনি কেবল ডেটা চেষ্টা করতে পারেন:

— আয়নিক বার্গার

Answer 4

ব্যক্তিগত অভিজ্ঞতা থেকে, অ্যাড-অন / এক্সটেনশনের হস্তক্ষেপ অপসারণ করা সর্বদা আপনার সাইটটি ছদ্মবেশ (ক্রোম), প্রাইভেট ব্রাউজিং (ফায়ারফক্স) এবং ইনপ্রাইভেট (আইই 11 এবং এড) এ চালানো সর্বদা সেরা, প্রথম পদক্ষেপ। এগুলি এখনও যদি তাদের সেটিংগুলিতে স্পষ্টভাবে সক্ষম হয় তবে এই মোডে পরীক্ষার সাথে হস্তক্ষেপ করতে পারে। তবে কোনও সমস্যা সমাধানের পক্ষে এটি প্রথম প্রথম পদক্ষেপ।

আমি এখানে থাকার কারণটি ছিল ওয়েবে অফ ট্রাস্ট (ডাব্লুএইচটি) দ্বারা আমার পৃষ্ঠায় লিখিত সামগ্রী যুক্ত করা, এবং আমার পৃষ্ঠায় অত্যন্ত কঠোর বিষয়বস্তু সুরক্ষা নীতি ছিল:

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

ফিক্সটি খুব সহজ ছিল, আমি আমার API এর আগে একটি স্ল্যাশ "/" অনুপস্থিত ছিল। সুতরাং 'অ্যাজুর টেবিল' থেকে '/ অ্যাজুর টেবিল' এ পথ পরিবর্তন করার পরে, সমস্যাটি সমাধান করা হয়েছিল।

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

আমারও একি দশা. আমি কৌনিক.জসনে একটি ভুল আউটপুট ফোল্ডার পথ উল্লেখ করেছি mentioned

"outputPath": "dist/",

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

Answer 9

আমি একই সমস্যা ছিল।

1. আপনাকে ডিফল্টরূপে নেওয়া সমস্ত সিএসপি প্যারামিটারগুলি সরিয়ে ফেলতে হবে এবং বুঝতে হবে যে প্রতিটি বৈশিষ্ট্য কেন প্রয়োজন।

ফন্ট-এসসিআর - হ'ল এসআরসি থেকে ফন্টটি লোড করতে ব্রাউজারকে বলা হয় যা পরে নির্দিষ্ট করা হয়। font-src: 'স্ব' - এটি একই উত্স বা সিস্টেমের মধ্যে ফন্ট পরিবার লোড করতে বলে। ফন্ট-এসসিআর: 'স্ব' ডেটা: - এটি একই উত্সের মধ্যে ফন্ট-পরিবার এবং ডেটা পাওয়ার জন্য করা কলগুলিকে বোঝায়:

আপনি সতর্কতা পেতে পারেন "** ডাউনলোড করা ফন্ট ডিকোড করতে ব্যর্থ হয়েছে, ওটিএস পার্সিংয়ের ত্রুটি: অবৈধ সংস্করণ ট্যাগ **" সিএসপিতে নিম্নলিখিত এন্ট্রি যুক্ত করুন।

font-src: 'স্ব' ফন্ট

এটি এখন কোনও ত্রুটিযুক্ত লোড করা উচিত।

Answer 10

আপনি অনেক জায়গায় ইনলাইন শৈলী ব্যবহার করতে পারেন, যা সিএসপি (বিষয়বস্তু সুরক্ষা নীতি) নিষিদ্ধ করেছে কারণ এটি বিপজ্জনক হতে পারে।

কেবলমাত্র সেই ইনলাইন শৈলীগুলি অপসারণ করার চেষ্টা করুন এবং এটি ডেডিকেটেড স্টাইলশিটের ভিতরে রাখুন।

Answer 11

আমার একই সমস্যা ছিল এবং যা ./আমার node.jsঅ্যাপ্লিকেশনটিতে ডিরেক্টরি নামের আগে ব্যবহার করে সমাধান হয়ে গেছে

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

Answer 12

আমার জন্য এটি সাহসী ব্রাউজারে আইপিএস এক্সটেনশনের কারণে হয়েছিল

Answer 13

ব্রাউজার এক্সটেনশান ইউব্লকের সেটিংস "রিমোট ফন্টগুলি ব্লক করুন" এই ত্রুটির কারণ ঘটাবে । (দ্রষ্টব্য: ব্যাকরণটি আমার পক্ষে কমপক্ষে সমস্যা ছিল না))

সাধারণত এটি কোনও সমস্যা নয়। যখন কোনও রিমোট ফন্টটি অবরুদ্ধ করা হয়, আপনি আবার কিছু অন্য ফন্টে পড়ে যান এবং "ERR_BLOCKED_BY_CLIENT" জারি করা হ'ল একটি কনসোল সতর্কতা। যাইহোক, কোনও সাইট যখন ফন্ট আশ্চর্য ব্যবহার করে তখন এটি মারাত্মক সমস্যা হতে পারে, কারণ আইকনগুলি বাক্স হিসাবে দেখায়।

এটি ঠিক করার বিষয়ে কোনও ওয়েবসাইটের পক্ষে তেমন কিছু করা সম্ভব নয় (তবে আপনি এটি ফন্ট-ভিত্তিক আইকনগুলি লেবেল করে উদাহরণস্বরূপ খুব খারাপ হওয়া থেকে রোধ করতে পারেন)। সিএসপি পরিবর্তন করা (বা একটি যোগ করা) এটি ঠিক করবে না। আপনার ওয়েবসাইট থেকে ফন্টগুলি পরিবেশন করা (এবং কোনও সিডিএন নয়) এটিও ঠিক করবে না।

অন্যদিকে, ইউব্লক ব্যবহারকারী নীচের একটি ব্যবহার করে এটি ঠিক করার ক্ষমতা রাখে:

• এক্সটেনশনের জন্য ড্যাশবোর্ডে বিশ্বব্যাপী বিকল্পটি চেক করুন
• আপনার ওয়েবসাইটে নেভিগেট করুন এবং এক্সটেনশন আইকনে ক্লিক করুন, তারপরে ক্রস আউট 'এ' আইকনে কেবলমাত্র সেই সাইটের জন্য ফন্টগুলি অবরুদ্ধ করতে নয়
• আপনার সাইটের জন্য এক্সটেনশনের ড্যাশবোর্ডে হোয়াইটলিস্টে যুক্ত করে ইউব্লকটি অক্ষম করুন

Answer 14

যদি আপনার প্রকল্পটি ভী-ক্লিপ হয় এবং আপনি চালনা করেন তবে npm run buildআপনার পরিবর্তন করা উচিত

assetsPublicPath: '/' প্রতি assetsPublicPath'./'

Answer 15

আমার একই সমস্যা ছিল এবং এটির পরিবর্তে আমি যে ফাইলটি পরিবেশন করার চেষ্টা করছি তার ডিরেক্টরিতে একটি ত্রুটি ছিল:

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

আমার ছিল :

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

Answer 16

আমি আমার চলমান কোডেও আজ একই সমস্যার মুখোমুখি হয়েছি। ভাল, আমি এখানে অনেক উত্তর খুঁজে পেয়েছি। তবে আমি যে গুরুত্বপূর্ণ বিষয়টি উল্লেখ করতে চাই তা হ'ল এই ত্রুটি বার্তাটি বেশ অস্পষ্ট এবং স্পষ্টভাবে সঠিক ত্রুটিটি নির্দেশ করে না।

কিছু ব্রাউজার এক্সটেনশনের কারণে এটির মুখোমুখি হয়েছিল, কিছু ভুল URL প্যাটার্নের কারণে এবং আমি আমার ফর্মগ্রুপের ত্রুটির কারণে এই পর্দার একটি পপ-আপে ব্যবহার করেছি। সুতরাং, আমি প্রত্যেককে পরামর্শ দেব যে আপনার কোডে কোনও নতুন পরিবর্তন করার আগে দয়া করে আপনার কোডটি ডিবাগ করুন এবং যাচাই করুন যে আপনার এ জাতীয় কোনও ত্রুটি নেই। আপনি অবশ্যই ডিবাগ করে প্রকৃত কারণটি খুঁজে পাবেন।

যদি অন্য কোনও কাজ না করে তবে আপনার URL টি পরীক্ষা করুন কারণ এটি এই সমস্যার সর্বাধিক সাধারণ কারণ।

Answer 17

আমার ল্যারাভেল এবং ভ্যুজেএস প্রকল্পে আমি এই ত্রুটিটি ওয়েবপ্যাক.মিক্স.জেএস ফাইল দিয়ে সমাধান করেছি। এটি রয়েছে

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 ফাইল নির্দেশ ব্যবহার Dist ফোল্ডারের, যার পরে তৈরি করা হয়েছে npm বিল্ড

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

আমি পরিবর্তন করে এটি সংশোধন "/dist/"করতে"./dist/"

Answer 19

আমার ক্ষেত্রে, আমি তৈরি-প্রতিক্রিয়া-অ্যাপ্লিকেশন উত্পন্ন অ্যাপ্লিকেশন থেকে src / registSWWWerer ফাইল মুছে ফেলেছি । আমি এটি যুক্ত করেছি এবং এখন এটি সব কাজ করছে।