拒绝加载字体‘ data: font/woff... ...’违反了下面的内容安全策略指令: “ default-src‘ self’”

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

浏览器控制台截图 enter image description here

.html 有这个 < strong > meta:

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

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,
}
};
175604 次浏览
小开

CSP 帮助您将您信任的源列入白名单。不允许访问所有其他来源。仔细阅读 这个问答，然后确保你白名单的字体，套接字连接和其他资源 如果你信任他们的话。

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

小开

不管怎样，我也遇到过类似的问题，假设它和 Chrome 的升级有关。

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

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

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

"outputPath": "dist/",


app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'dist/index.html'));
});
小开
最佳答案

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

小开

要修复此特定错误，CSP 应包括以下内容:

font-src 'self' data:;

所以 index.html meta 应该是:

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

从个人经验来看，使用 Incognto (Chrome)、 Private Browsing (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';"

这导致了许多错误。我正在寻找一个答案，关于如何告诉扩展不要尝试和运行在这个网站编程。这样当人们有了扩展，他们就不会在我的网站上运行了。我想如果这是可能的，广告拦截者早就被禁止在网站上了。所以我的研究有点天真。希望这能够帮助其他人诊断一个问题，而这个问题与其他答案中提到的几个扩展没有明确的联系。

小开

在我的例子中，我从 create-response-app 生成的应用程序中删除了 Src/registerServiceWorker文件。

小开

如果您的项目是 vue-cli 并且您运行 npm run build，那么您应该更改

assetsPublicPath: '/'呼叫 assetsPublicPath'./'

小开

您可能在许多地方使用了内联样式，CSP (内容安全策略)禁止使用内联样式，因为它可能是危险的。

只要尝试删除这些内联样式并将其放入专用样式表中即可。

小开

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

enter image description here

下面是我的节点 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’之后，问题得到了解决。

小开

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

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

小开

我也遇到过类似的问题。

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

Font-src-是告诉浏览器从 src 加载字体，这是在此之后指定的。 Font-src: ‘ self’-这告诉在相同的起源或系统中加载字体系列。 Font-src: ‘ self’data:-这告诉 load font-family 在相同的起源和获取数据的调用:

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

Font-src: ‘ self’font 字体

现在加载时应该没有错误。

小开

我也遇到了同样的问题，结果发现我要提供的文件目录中有一个错误 而不是:

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

I had :

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

小开

我今天在运行代码中也遇到了同样的问题。 我在这里找到了很多答案。但是我想提到的重要事情是，这个错误消息非常模糊，没有明确指出确切的错误。

有些是因为浏览器扩展，有些是因为 URL 模式不正确，我遇到这个问题是因为在弹出窗口中使用的 formGroup 实例中出现了错误。 因此，我建议大家在对代码进行任何新的更改之前，请调试代码并验证是否存在任何此类错误。 您肯定会通过调试找到实际的原因。

如果没有其他工作，然后检查您的网址，因为这是最常见的原因，这个问题。

小开

你可能需要把这个加到 webpack.config.js:

devServer: {
historyApiFallback: true
}
小开

在我的 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 文件定向到有角度的 远离文件夹的代码的一部分，该文件夹是在 Npm 构建之后创建的

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

我改变了它 "/dist/"呼叫 "./dist/"

小开

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

小开

浏览器扩展 uBlock 的设置 “阻止远程字体”会导致这个错误(注意: 语法不是问题，至少对我来说不是)

通常这不是问题。当一个远程字体被阻塞时，您会退回到其他一些字体，并且会发出一个控制台警告“ ERR _ BLOCKED _ BY _ CLIENT”。然而，当网站使用 Font Awesome 时，这可能是一个严重的问题，因为图标显示为方框。

一个网站可以做的并不多(但是你可以通过给基于字体的图标加标签来避免这个问题)。更改 CSP (或添加一个 CSP)不会修复它。从你的网站(而不是 CDN)提供字体也不会修复它。

另一方面，uBlock 用户可以通过执行下列操作之一来解决这个问题:

  • 在仪表板中全局取消选中该扩展的选项
  • 导航到您的网站，并点击扩展图标，然后在 划掉了“ A”的图标不阻止字体只为该网站
  • 通过将其添加到扩展的仪表板中的白名单来禁用站点的 uBlock
小开

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

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

小开

如果只说报告，拒绝执行内容策略错误。然后，警告可以忽略，它可能是由于页面屏蔽功能在 Cloudflare 引起的。


提交答案