Bị từ chối tải phông chữ 'data: font / woff…' nó vi phạm chỉ thị Chính sách bảo mật nội dung sau: “default-src 'self'”. Lưu ý rằng 'font-src'


108

Ứng dụng web phản ứng của tôi đưa ra lỗi này trong Bảng điều khiển trình duyệt

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.

Cũng thế:

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.

Ảnh chụp màn hình bảng điều khiển trình duyệt nhập mô tả hình ảnh ở đây

index.htmlmeta này :

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

bạn có thể thử <meta http-equiv = "Content-Security-Policy" content = "img-src 'self' data :; default-src 'self' XX.XX.XX.XX: 8084 / mypp ">
Đan Mạch không

không có gì thay đổi `<meta http-equiv =" Content-Security-Policy "content =" img-src 'self' data :; default-src 'self' 121.0.0: 3000 ">; 'Vẫn cho Lỗi
JavaScript Learner

Câu trả lời:


261

Đối với tôi, đó là do tiện ích mở rộng Chrome 'Grammarly'. Sau khi vô hiệu hóa điều đó, tôi không gặp lỗi.


11
Thật là một hack ngớ ngẩn cho điều này. thậm chí không thể tưởng tượng vấn đề là do ứng dụng Grammarly chrome.
Pardeep Jain,

4
Tôi không thể tin rằng tôi đã dành vài giờ để cố gắng nhận ra điều gì đang xảy ra và nó là do ứng dụng Grammarly gây ra. Chỉ cần loại bỏ nó!
Andre Evangelista

3
Dangit, Grammarly! Tôi đã có hai nhà phát triển khác giúp tôi giải quyết vấn đề này. Chúng tôi nghĩ rằng chúng tôi đã triển khai sai chính sách bảo mật nội dung của mình. Đã xóa phần dùng thử Ngữ pháp của tôi khỏi Chrome và lỗi đã biến mất. Cảm ơn hoặc mẹo này!
amlane86

6
Lưu ý: chỉ "vô hiệu hóa" trên các plugin cấu hình thả xuống là không đủ, bạn phải gỡ bỏ hoặc vô hiệu hóa nó trên các trang plugin chrome
Juan Biscaia

2
Vấn đề tương tự với ứng dụng Angular của tôi. Điều này đã sửa nó ngay lập tức!
Stack Underflow

54

Để khắc phục lỗi cụ thể này, CSP nên bao gồm:

font-src 'self' data:;

Vì vậy, meta index.html nên đọc:

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

1
Cảm ơn điều này cũng giải quyết được vấn đề. Hãy xem xét rằng đối với một số người sử dụng nó không phải là khả thi để vô hiệu hóa phần mở rộng, và trang web của bạn sẽ tránh được các vấn đề với bất kỳ tài sản mở rộng tải có thể tại địa phương :)
JuanDMeGon

1
Tôi nghĩ rằng điều này sẽ khiến trang web của bạn không an toàn trước các tiện ích mở rộng xấu và sẽ khuyên bạn không nên sử dụng nó mà không cần nghiên cứu thêm.
binz

Có cần phải chỉ định http://121.0.0:3000/trong khi sử dụng 'self' rồi không?
Saurabh Tiwari

20

Đối với những gì nó đáng giá - tôi đã gặp sự cố tương tự, giả sử nó liên quan đến bản cập nhật Chrome.

Tôi phải thêm font-src và sau đó chỉ định url vì tôi đang sử dụng CDN

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

1
nhưng tôi đã sử dụng Phông chữ từ máy tính cục bộ của mình nên tôi sẽ viết gì đây ?? data: fonts.gstatic.com
Người học JavaScript

5
@JavaScriptLearner - trong trường hợp đó bạn chỉ có thể cố gắng dữ liệu:
IonicBurger

12

Từ kinh nghiệm cá nhân, tốt nhất là bạn nên chạy trang web của mình ở chế độ Ẩn danh (Chrome), Duyệt web riêng tư (Firefox) và InPrivate (IE11 && Edge) để loại bỏ sự can thiệp của các tiện ích bổ sung / tiện ích mở rộng. Những thứ này vẫn có thể cản trở việc thử nghiệm ở chế độ này nếu chúng được bật rõ ràng trong cài đặt của chúng. Tuy nhiên, đây là bước đầu tiên dễ dàng để khắc phục sự cố.

Lý do tôi ở đây là do Web of Trust (WoT) thêm nội dung vào trang của tôi và trang của tôi có Chính sách bảo mật nội dung rất nghiêm ngặt:

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

Điều này gây ra nhiều lỗi. Tôi đang tìm kiếm thêm câu trả lời về cách yêu cầu tiện ích mở rộng không thử chạy trên trang web này theo chương trình. Bằng cách này, khi mọi người có tiện ích mở rộng, chúng sẽ không chạy trên trang web của tôi. Tôi tưởng tượng nếu điều này có thể xảy ra, các trình chặn quảng cáo đã bị cấm trên các trang web từ lâu. Vì vậy, nghiên cứu của tôi là một chút ngây thơ. Hy vọng điều này sẽ giúp bất kỳ ai khác đang cố gắng chẩn đoán một vấn đề không liên quan cụ thể đến một số tiện ích mở rộng được đề cập trong các câu trả lời khác.


9

Bạn có thể cần thêm cái này vào webpack.config.js:

devServer: {

        historyApiFallback: true
    }
};

3

Tôi cũng gặp phải lỗi tương tự trong ứng dụng nút của mình hôm nay.

nhập mô tả hình ảnh ở đây

Dưới đây là API nút của tôi.

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

Cách khắc phục rất đơn giản, tôi đã thiếu dấu gạch chéo "/" trước API của mình. Vì vậy, sau khi thay đổi đường dẫn từ 'azureTable' thành '/ azureTable', vấn đề đã được giải quyết.


2

CSP giúp bạn liệt kê các nguồn mà bạn tin tưởng. Tất cả các nguồn khác không được phép truy cập vào. Đọc kỹ phần Hỏi & Đáp này , sau đó đảm bảo rằng bạn đưa phông chữ, kết nối socket và các nguồn khác vào danh sách trắng nếu bạn tin tưởng .

Nếu bạn biết mình đang làm gì, bạn có thể comment ra metathẻ để kiểm tra, có lẽ mọi thứ đều hoạt động. Nhưng nhận ra rằng bạn / người dùng của bạn đang được bảo vệ ở đây, vì vậy giữ metathẻ có lẽ là một điều tốt.


Cảm ơn quý khách Nice câu trả lời nhưng Tôi vẫn có thể giải quyết Refused to load the font 'data:font/woff;base64,d09lỗi này
JavaScript Learner

1
Nhưng điều này META Solve Error tối đa:<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 Learner

2

Tôi đã có một vấn đề tương tự. Tôi đã đề cập đến một đường dẫn thư mục đầu ra sai trong angle.json

"outputPath": "dist/",

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

2

Tôi đã phải đối mặt với vấn đề tương tự.

  1. Bạn cần xóa tất cả tham số CSP được chọn theo mặc định và hiểu lý do tại sao mỗi thuộc tính là bắt buộc.

font-src - là lệnh cho trình duyệt tải phông chữ từ src được chỉ định sau đó. font-src: 'self' - điều này cho biết tải họ phông chữ trong cùng một nguồn gốc hoặc hệ thống. font-src: 'self' data: - điều này cho biết tải font-family trong cùng một nguồn gốc và các lệnh gọi được thực hiện để lấy dữ liệu:

Bạn cũng có thể nhận được cảnh báo "** Không giải mã được phông chữ đã tải xuống, lỗi phân tích cú pháp OTS: thẻ phiên bản không hợp lệ **" Thêm mục nhập sau vào CSP.

font-src: phông chữ 'self'

Điều này bây giờ sẽ tải mà không có lỗi.


1

Bạn có thể đã sử dụng kiểu nội tuyến ở nhiều nơi, mà CSP (Chính sách bảo mật nội dung) cấm vì nó có thể nguy hiểm.

Chỉ cần thử xóa các kiểu nội tuyến đó và đặt nó bên trong bảng định kiểu chuyên dụng.


1

Tôi gặp sự cố tương tự và vấn đề này đã được giải quyết bằng cách sử dụng ./trước tên thư mục trong node.jsứng dụng của tôi , tức là

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


1

Đối với tôi, đó là do tiện ích mở rộng ipfs trong trình duyệt dũng cảm


1

Cài đặt "Chặn phông chữ từ xa" của tiện ích mở rộng trình duyệt uBlock sẽ gây ra lỗi này. (Lưu ý: Ngữ pháp không phải là vấn đề, ít nhất là đối với tôi.)

Thông thường đây không phải là một vấn đề. Khi một phông chữ từ xa bị chặn, bạn sẽ quay lại một số phông chữ khác và cảnh báo trên bảng điều khiển cho biết “ERR_BLOCKED_BY_CLIENT” được đưa ra. Tuy nhiên, đây có thể là một vấn đề nghiêm trọng khi một trang web sử dụng Font Awesome, vì các biểu tượng hiển thị dưới dạng hộp.

Không có nhiều trang web có thể làm để khắc phục điều này (nhưng bạn có thể ngăn nó trở nên quá tệ bằng cách gắn nhãn các biểu tượng dựa trên phông chữ). Thay đổi CSP (hoặc thêm một) sẽ không khắc phục được. Cung cấp các phông chữ từ trang web của bạn (chứ không phải CDN) cũng sẽ không khắc phục được.

Mặt khác, người dùng uBlock có quyền khắc phục sự cố này bằng cách thực hiện một trong các thao tác sau:

  • Bỏ chọn tùy chọn trên toàn cục trong trang tổng quan cho tiện ích mở rộng
  • Điều hướng đến trang web của bạn và nhấp vào biểu tượng tiện ích mở rộng, sau đó nhấp vào biểu tượng 'A' bị gạch chéo để không chặn phông chữ chỉ cho trang web đó
  • Tắt uBlock cho trang web của bạn bằng cách thêm nó vào danh sách trắng trong trang tổng quan của tiện ích mở rộng

0

Nếu dự án của bạn là vue-cli và bạn đang chạy, npm run buildbạn nên thay đổi

assetsPublicPath: '/' đến assetsPublicPath'./'


0

Tôi đã gặp sự cố tương tự và hóa ra có lỗi trong thư mục của tệp mà tôi đang cố gắng phân phối thay vì:

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

Tôi đã có:

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


0

Tôi cũng gặp phải vấn đề tương tự ngày hôm nay trong mã đang chạy của mình. Tôi đã tìm thấy rất nhiều câu trả lời ở đây. Nhưng điều quan trọng tôi muốn đề cập là thông báo lỗi này khá mơ hồ và không chỉ ra lỗi chính xác một cách rõ ràng.

Một số đối mặt với nó do tiện ích mở rộng trình duyệt, một số do mẫu URL không chính xác và tôi gặp phải điều này do lỗi trong phiên bản formGroup của tôi được sử dụng trong cửa sổ bật lên trên màn hình đó. Vì vậy, tôi khuyên mọi người rằng trước khi thực hiện bất kỳ thay đổi mới nào trong mã của bạn, hãy gỡ lỗi mã của bạn và xác minh rằng bạn không có bất kỳ lỗi nào như vậy. Bạn chắc chắn sẽ tìm thấy lý do thực tế bằng cách gỡ lỗi.

Nếu không có gì khác hoạt động, hãy kiểm tra URL của bạn vì đó là lý do phổ biến nhất cho vấn đề này.


0

Trong dự án laravel & VueJS của tôi, tôi đã giải quyết được lỗi này với tệp webpack.mix.js. Nó chứa

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

Đây là một phần mã mà tôi sử dụng để hướng tệp server.js của mình đến thư mục dist góc , được tạo sau khi xây dựng npm

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

Tôi đã sửa nó bằng cách thay đổi "/dist/"thành"./dist/"


-1

Trong trường hợp của tôi, tôi đã xóa tệp src / registerServiceWorker khỏi ứng dụng do create-react-app tạo. Tôi đã thêm nó và bây giờ tất cả đều hoạt động.

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.