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

【问题标题】：Refused to load the font 'data:font/woff.....'it violates the following Content Security Policy directive: "default-src 'self'". Note that 'font-src'拒绝加载字体 'data:font/woff.....' 它违反了以下内容安全策略指令：“default-src 'self'”。注意'font-src'
【发布时间】：2018-01-04 03:00:02
【问题描述】：

我的反应 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：

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

【问题讨论】：

你可以试试 XX.XX.XX.XX:8084/mypp">
没什么变化` 121.0.0:3000">; `还是报错

标签： javascript reactjs webpack

【解决方案1】：

CSP 可帮助您将您信任的来源列入白名单。所有其他来源均不允许访问。仔细阅读this Q&A，然后确保将字体、套接字连接和其他来源列入白名单如果您信任它们。

如果你知道你在做什么，你可以注释掉meta标签来测试，可能一切正常。但是要意识到你/你的用户在这里受到保护，所以保留meta 标签可能是一件好事。

【讨论】：

感谢您的回答，但我仍然可以解决 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 *;"

【解决方案2】：

不管它的价值 - 我有一个类似的问题，假设它与 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
@JavaScriptLearner - 在这种情况下，您可以尝试数据：

【解决方案3】：

我遇到了类似的问题。我在 angular.json 中提到了错误的输出文件夹路径

"outputPath": "dist/",

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

【讨论】：

【解决方案4】：

对我来说，这是因为 Chrome 扩展程序“Grammarly”。禁用后，我没有收到错误。

【讨论】：

这是多么愚蠢的黑客行为。甚至无法想象问题出在 Grammarly chrome 应用程序上。
我不敢相信我花了几个小时试图意识到发生了什么，而它是由 Grammarly 应用程序引起的。只需删除那个tash！
Dangit，语法！我有另外两个开发人员帮助我解决了这个问题，但没有解决。我们认为我们错误地实施了我们的内容安全政策。从 Chrome 中删除了我的语法扩展，错误就消失了。谢谢或这个提示！
注意：仅在插件配置下拉菜单中“禁用”是不够的，您必须在 chrome 插件页面上删除或禁用它
我的 Angular 应用也有同样的问题。这解决了它！

【解决方案5】：

要修复此特定错误，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/">

【讨论】：

感谢这也解决了问题。考虑到对于某些用户来说禁用扩展是不可行的，并且您的网站将避免任何可能的扩展在本地加载资产的问题:)
我认为这会使您的网站因不良扩展而变得不安全，因此建议您不要进行进一步研究。
在使用'self'时是否需要指定http://121.0.0:3000/？

【解决方案6】：

从个人经验来看，最好的第一步是在隐身 (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';"

这导致了很多错误。我正在寻找更多关于如何告诉扩展程序不要尝试以编程方式在此站点上运行的答案。这样，当人们有扩展程序时，他们就不会在我的网站上运行。我想如果这是可能的，广告拦截器早就在网站上被禁止了。所以我的研究有点幼稚。希望这有助于其他人尝试诊断与其他答案中提到的少数扩展无关的问题。

【讨论】：

【解决方案7】：

就我而言，我从 create-react-app 生成的应用程序中删除了 src/registerServiceWorker 文件。我添加了它，现在一切正常。

【讨论】：

【解决方案8】：

如果你的项目是 vue-cli 并且你运行 npm run build 你应该改变

assetsPublicPath: '/' 到 assetsPublicPath'./'

【讨论】：

【解决方案9】：

您可能会在很多地方使用内联样式，而 CSP（内容安全策略）禁止这样做，因为它可能很危险。

只需尝试删除那些内联样式并将其放入专用样式表中。

【讨论】：

【解决方案10】：

我今天在我的节点应用程序中也遇到了同样的错误。

下面是我的节点 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”后，问题就解决了。

【讨论】：

【解决方案11】：

我遇到了同样的问题，通过在我的 node.js 应用程序中的目录名称之前使用 ./ 得到解决，即

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

【讨论】：

【解决方案12】：

我也遇到过类似的问题。

您需要删除默认选取的所有 CSP 参数，并了解为什么需要每个属性。

font-src - 告诉浏览器从之后指定的 src 加载字体。 font-src: 'self' - 这告诉在同一来源或系统中加载字体系列。 font-src: 'self' data: - 这告诉加载 font-family 在同一个来源和获取数据的调用：

您可能还会收到警告“** 无法解码下载的字体，OTS 解析错误：无效的版本标签**”在 CSP 中添加以下条目。

font-src: 'self' 字体

现在应该可以正常加载了。

【讨论】：

【解决方案13】：

我遇到了同样的问题，结果发现我尝试提供的文件的目录中有错误而不是：

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

我有：

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

【讨论】：

【解决方案14】：

我今天在运行代码中也遇到了同样的问题。好吧，我在这里找到了很多答案。但我要提到的重要一点是，这个错误信息非常模棱两可，并没有明确指出确切的错误。

有些是由于浏览器扩展而遇到的，有些是由于不正确的 URL 模式而遇到的，而我是由于该屏幕中的弹出窗口中使用的 formGroup 实例中的错误而遇到的。因此，我建议大家在对代码进行任何新更改之前，请调试您的代码并确认您没有任何此类错误。你一定会通过调试找到真正的原因。

如果没有其他方法，请检查您的 URL，因为这是导致此问题的最常见原因。

【讨论】：

【解决方案15】：

您可能需要将此添加到webpack.config.js：

devServer: {
    historyApiFallback: true
}

【讨论】：

【解决方案16】：

在我的 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');

【讨论】：

【解决方案17】：

这是我用来将 server.js 文件定向到 angular dist 文件夹的部分代码，该文件夹是在 npm build

之后创建的

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

我通过更改来修复它 "/dist/"转"./dist/"

【讨论】：

【解决方案18】：

对我来说，这是因为勇敢的浏览器中的 ipfs 扩展

【讨论】：

【解决方案19】：

浏览器扩展uBlock的设置“Block remote fonts”会导致这个错误。（注意：语法不是问题，至少对我来说是这样。）

通常这不是问题。当远程字体被阻止时，您会退回到其他字体并发出控制台警告“ERR_BLOCKED_BY_CLIENT”。但是，当站点使用 Font Awesome 时，这可能是一个严重的问题，因为图标显示为框。

网站无法解决这个问题（但您可以通过例如标记基于字体的图标来防止它变得太糟糕）。更改 CSP（或添加一个）不会修复它。从您的网站（而不是 CDN）提供字体也不会修复它。

另一方面，uBlock 用户有权通过执行以下操作之一来解决此问题：

在扩展程序的仪表板中全局取消选中该选项
导航到您的网站并点击扩展图标，然后点击 crossed out ‘A’ icon 以不仅为该网站阻止字体
通过将 uBlock 添加到扩展程序仪表板中的白名单来为您的网站禁用 uBlock

【讨论】：

【解决方案20】：

在不同的端口上运行我的前端应用程序对我有用。

最初我有ng serve --port 3000 我后来改成ng serve --port 5000

【讨论】：