ปฏิเสธที่จะโหลดแบบอักษร 'data: font / woff ... ' ซึ่งละเมิดคำสั่งนโยบายความปลอดภัยของเนื้อหาต่อไปนี้:“ default-src 'self'” โปรดทราบว่า 'font-src'

เว็บแอปตอบสนองของฉันให้ข้อผิดพลาดนี้ในคอนโซลเบราว์เซอร์

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

สำหรับฉันมันเป็นเพราะส่วนขยาย Chrome 'Grammarly' หลังจากปิดการใช้งานแล้วฉันไม่ได้รับข้อผิดพลาด

ในการแก้ไขข้อผิดพลาดนี้ CSP ควรรวมสิ่งนี้:

font-src 'self' data:;

ดังนั้น meta ของ 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/">

สิ่งที่คุ้มค่า - ฉันมีปัญหาที่คล้ายกันโดยสมมติว่าเกี่ยวข้องกับการอัปเดต Chrome

ฉันต้องเพิ่ม font-src จากนั้นระบุ url เพราะฉันใช้ CDN

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

จากประสบการณ์ส่วนตัวถือเป็นขั้นตอนแรกที่ดีที่สุดในการเรียกใช้ไซต์ของคุณในโหมดไม่ระบุตัวตน (Chrome), การท่องเว็บแบบส่วนตัว (Firefox) และ InPrivate (IE11 && Edge) เพื่อลบการรบกวนของส่วนเสริม / ส่วนขยาย สิ่งเหล่านี้ยังคงรบกวนการทดสอบในโหมดนี้หากเปิดใช้งานไว้อย่างชัดเจนในการตั้งค่า อย่างไรก็ตามเป็นขั้นตอนแรกที่ง่ายในการแก้ไขปัญหา

สาเหตุที่ฉันมาที่นี่เนื่องจาก Web of Trust (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';"

สิ่งนี้ทำให้เกิดข้อผิดพลาดมากมาย ฉันกำลังมองหาคำตอบเพิ่มเติมเกี่ยวกับวิธีแจ้งให้ส่วนขยายไม่พยายามทำงานบนไซต์นี้โดยใช้โปรแกรม ด้วยวิธีนี้เมื่อผู้คนมีส่วนขยายพวกเขาจะไม่ทำงานบนไซต์ของฉัน ฉันคิดว่าถ้าเป็นไปได้โฆษณาบล็อกเกอร์จะถูกแบนในเว็บไซต์เมื่อนานมาแล้ว ดังนั้นงานวิจัยของฉันจึงดูไร้เดียงสาไปหน่อย หวังว่านี่จะช่วยให้ใครก็ตามที่พยายามวินิจฉัยปัญหาที่ไม่ได้เชื่อมโยงกับส่วนขยายที่กล่าวถึงในคำตอบอื่น ๆ

คุณอาจต้องเพิ่มสิ่งนี้ในwebpack.config.js:

devServer: {

        historyApiFallback: true
    }
};

วันนี้ฉันยังพบข้อผิดพลาดเดียวกันในแอปพลิเคชันโหนดของฉัน

ด้านล่างนี้คือ Node API ของฉัน

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 ของฉัน ดังนั้นหลังจากเปลี่ยนเส้นทางจาก 'azureTable' เป็น '/ azureTable' ปัญหาจึงได้รับการแก้ไข

CSP ช่วยให้คุณสามารถเพิ่มแหล่งที่มาที่คุณเชื่อถือได้ ไม่อนุญาตให้เข้าถึงแหล่งอื่น ๆ ทั้งหมด อ่านQ & A นี้อย่างระมัดระวังและตรวจสอบให้แน่ใจว่าคุณรายการที่อนุญาตแบบอักษร, การเชื่อมต่อซ็อกเก็ตและแหล่งอื่น ๆถ้าคุณไว้วางใจได้

หากคุณรู้ว่าคุณกำลังทำอะไรอยู่คุณสามารถแสดงความคิดเห็นในmetaแท็กเพื่อทดสอบซึ่งอาจใช้ได้ทุกอย่าง แต่โปรดทราบว่าคุณ / ผู้ใช้ของคุณได้รับการปกป้องที่นี่ดังนั้นการรักษาmetaแท็กจึงน่าจะเป็นสิ่งที่ดี

ฉันมีปัญหาที่คล้ายกัน ฉันได้พูดถึงพา ธ โฟลเดอร์เอาต์พุตผิดใน angular.json

"outputPath": "dist/",

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

ฉันประสบปัญหาที่คล้ายกัน

1. คุณต้องลบพารามิเตอร์ CSP ทั้งหมดซึ่งถูกเลือกโดยค่าเริ่มต้นและทำความเข้าใจว่าเหตุใดจึงต้องมีแอตทริบิวต์แต่ละรายการ

font-src - เป็นการบอกให้เบราว์เซอร์โหลดแบบอักษรจาก src ซึ่งระบุไว้หลังจากนั้น font-src: 'self' - สิ่งนี้บอกให้โหลดตระกูลฟอนต์ภายในแหล่งกำเนิดหรือระบบเดียวกัน font-src: ข้อมูล 'ตัวเอง': - สิ่งนี้บอกให้โหลดตระกูลฟอนต์ภายในแหล่งกำเนิดเดียวกันและการโทรเพื่อรับข้อมูล:

คุณอาจได้รับคำเตือน "** ล้มเหลวในการถอดรหัสแบบอักษรที่ดาวน์โหลดข้อผิดพลาดในการแยกวิเคราะห์ OTS: แท็กเวอร์ชันไม่ถูกต้อง **" เพิ่มรายการต่อไปนี้ใน CSP

font-src: แบบอักษร 'self'

ตอนนี้ควรโหลดโดยไม่มีข้อผิดพลาด

คุณคงใช้สไตล์อินไลน์ในหลาย ๆ ที่ซึ่ง CSP (นโยบายความปลอดภัยของเนื้อหา) ห้ามเพราะอาจเป็นอันตรายได้

เพียงแค่ลองลบสไตล์อินไลน์เหล่านั้นและวางไว้ในสไตล์ชีทเฉพาะ

ฉันมีปัญหาเดียวกันและได้รับการแก้ไขโดยใช้./ก่อนชื่อไดเรกทอรีในnode.jsแอปของฉันเช่น

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

สำหรับฉันมันเป็นเพราะส่วนขยาย ipfs ในเบราว์เซอร์ที่กล้าหาญ

การตั้งค่า uBlock ของส่วนขยายเบราว์เซอร์"บล็อกแบบอักษรระยะไกล"จะทำให้เกิดข้อผิดพลาดนี้ (หมายเหตุ: ไวยากรณ์ไม่ใช่ปัญหาอย่างน้อยสำหรับฉัน)

โดยปกติแล้วนี่ไม่ใช่ปัญหา เมื่อแบบอักษรระยะไกลถูกบล็อกคุณจะถอยกลับไปใช้แบบอักษรอื่นและคำเตือนของคอนโซลที่แจ้งว่า“ ERR_BLOCKED_BY_CLIENT” ถูกออก อย่างไรก็ตามนี่อาจเป็นปัญหาร้ายแรงเมื่อไซต์ใช้ Font Awesome เนื่องจากไอคอนแสดงเป็นกล่อง

มีเว็บไซต์ไม่มากที่สามารถแก้ไขปัญหานี้ได้ (แต่คุณสามารถป้องกันไม่ให้มันแย่เกินไปได้โดยการติดป้ายกำกับไอคอนแบบอักษร) การเปลี่ยน CSP (หรือเพิ่มอย่างใดอย่างหนึ่ง) จะไม่สามารถแก้ไขได้ การให้บริการแบบอักษรจากเว็บไซต์ของคุณ (ไม่ใช่ CDN) จะไม่สามารถแก้ไขได้เช่นกัน

ในทางกลับกันผู้ใช้ uBlock มีอำนาจในการแก้ไขปัญหานี้โดยทำอย่างใดอย่างหนึ่งต่อไปนี้:

• ยกเลิกการเลือกตัวเลือกทั่วโลกในแดชบอร์ดสำหรับส่วนขยาย
• ไปที่เว็บไซต์ของคุณและคลิกที่ไอคอนส่วนขยายจากนั้นคลิกไอคอน"A" ที่ขีดฆ่าเพื่อไม่ให้บล็อกแบบอักษรสำหรับไซต์นั้นเท่านั้น
• ปิดใช้งาน uBlock สำหรับไซต์ของคุณโดยเพิ่มลงในรายการที่อนุญาตพิเศษในแดชบอร์ดของส่วนขยาย

หากโครงการของคุณเป็น vue-cli และคุณเรียกใช้ npm run buildคุณควรเปลี่ยน

assetsPublicPath: '/' ถึง assetsPublicPath'./'

ฉันมีปัญหาเดียวกันและปรากฎว่ามีข้อผิดพลาดในไดเรกทอรีของไฟล์ที่ฉันพยายามให้บริการแทนที่จะเป็น:

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

ฉันมี:

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

ฉันยังประสบปัญหาเดียวกันในวันนี้ในรหัสที่กำลังทำงานอยู่ ฉันพบคำตอบมากมายที่นี่ แต่สิ่งสำคัญที่ฉันต้องการพูดถึงคือข้อความแสดงข้อผิดพลาดนี้ค่อนข้างคลุมเครือและไม่ได้ชี้ให้เห็นข้อผิดพลาดที่แน่นอน

บางคนประสบปัญหานี้เนื่องจากส่วนขยายของเบราว์เซอร์บางส่วนเกิดจากรูปแบบ URL ที่ไม่ถูกต้องและฉันประสบปัญหานี้เนื่องจากข้อผิดพลาดในอินสแตนซ์ formGroup ของฉันที่ใช้ในป๊อปอัปในหน้าจอนั้น ดังนั้นฉันขอแนะนำทุกคนว่าก่อนทำการเปลี่ยนแปลงใหม่ในโค้ดของคุณโปรดดีบักโค้ดของคุณและตรวจสอบว่าคุณไม่มีข้อผิดพลาดดังกล่าว แน่นอนคุณจะพบเหตุผลที่แท้จริงโดยการดีบัก

หากไม่ได้ผลให้ตรวจสอบ URL ของคุณเนื่องจากเป็นสาเหตุที่พบบ่อยที่สุดสำหรับปัญหานี้

ในโครงการ laravel & 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');

นี่คือส่วนหนึ่งของรหัสที่ฉันใช้เพื่อกำหนดไฟล์ server.js ของฉันไปยังโฟลเดอร์angular distซึ่งสร้างขึ้นหลังจากสร้าง npm

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

ฉันแก้ไขโดยเปลี่ยน "/dist/"เป็น"./dist/"

ในกรณีของฉันฉันลบ src / registerServiceWorkerจากแอปที่สร้างขึ้นเพื่อตอบสนอง ฉันเพิ่มเข้าไปและตอนนี้ทุกอย่างก็ใช้งานได้แล้ว