拒绝加载字体 'data:font/woff .....' 它违反了以下内容安全策略指令:“default-src 'self'”。注意'font-src'

IT技术 javascript reactjs webpack
2021-04-21 08:32:22

我的 react 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,
    }
};
6个回答

对我来说,这是因为 Chrome 扩展程序“语法”。禁用它后,我没有收到错误消息。

注意:仅在插件配置下拉列表中“禁用”是不够的,您必须在 chrome 插件页面上删除或禁用它
2021-05-27 08:32:22
我简直不敢相信我花了几个小时试图意识到发生了什么,而这是由 Grammarly 应用程序引起的。只需删除那个tash!
2021-06-03 08:32:22
当吉特,语法!我有另外两个开发人员帮助我解决这个问题,但没有解决。我们认为我们错误地实施了我们的内容安全政策。从 Chrome 中删除了我的语法扩展,错误消失了。谢谢或这个提示!
2021-06-07 08:32:22
这是多么愚蠢的黑客攻击。甚至无法想象这个问题是由于 Grammarly chrome 应用程序造成的。
2021-06-12 08:32:22
我的 Angular 应用程序也有同样的问题。这修复了它!
2021-06-20 08:32:22

要修复此特定错误,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/">
是否需要http://121.0.0:3000/在使用 'self' 时指定
2021-05-24 08:32:22
我认为这会使您的网站对不良扩展名不安全,并且会在没有进一步研究的情况下建议您不要这样做。
2021-06-16 08:32:22
谢谢,这也解决了问题。考虑到对于某些用户来说禁用扩展是不可行的,并且您的站点将避免在本地加载任何可能的扩展资产的问题:)
2021-06-21 08:32:22

对于它的value - 我有一个类似的问题,假设它与 Chrome 更新有关。

我必须添加 font-src,然后指定 url,因为我使用的是 CDN

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; font-src 'self' data: fonts.gstatic.com;">
但是我在本地计算机上使用字体,所以我会写什么? data: fonts.gstatic.com
2021-05-24 08:32:22
@JavaScriptLearner - 在这种情况下,您可以尝试数据:
2021-06-14 08:32:22

根据个人经验,在隐身 (Chrome)、隐私浏览 (Firefox) 和 InPrivate (IE11 && Edge) 中运行您的网站以消除附加组件/扩展程序的干扰始终是最好的第一步。如果它们在其设置中明确启用,它们仍然会干扰在此模式下的测试。但是,这是解决问题的简单第一步。

我在这里的原因是信任网络 (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
}