javascript “[仅报告] 拒绝加载字体...”控制台上的错误消息
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26572418/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
"[Report Only] Refused to load the font..." error message on console
提问by Gustavo Siqueira
More specifically:
进一步来说：
[Report Only] Refused to load the font 'data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAABBQAAoAAAAAG…H8zVsjnmMx0GcZ2HGViNOySWEa9fvEQtW43Nm+EOO0ZIpdLbMXoVzPJkcfHT6U+gLEpz/MAAAA' because it violates the following Content Security Policy directive: "font-src 'self'".
this is my contentSecurityPolicyobject at environment.js:
这是我的contentSecurityPolicy对象environment.js：
contentSecurityPolicy: {
'default-src': "'none'",
'script-src': "'self' 'unsafe-inline' 'unsafe-eval' connect.facebook.net",
'connect-src': "'self'",
'img-src': "'self' www.facebook.com",
'style-src': "'self' 'unsafe-inline'",
'frame-src': "s-static.ak.facebook.com static.ak.facebook.com www.facebook.com",
'report-uri': "http://localhost:4200"
},
Is there anything wrong?
有什么问题吗？
回答by oreoshake
Add 'font-src': "data:",to whitelist the font being loaded.
添加'font-src': "data:",到白名单正在加载的字体。
回答by dwelby101
I have been spending quite some time trying to figure out why the built version of my polymer code was violating my CSP in firefox and safari (works in chrome) and it turns out as polymer components contain inline scripts they can cause CSP issues that are not resolved using 'unsafe-inline' & 'unsafe-eval' headers for firefox and safari, however if for your script CSP you include data:this will allow the inline scripts that are compiled during the polymer build to run on your web app without violating the CSP. Thought I would share here as this answer helped me resolve my issue.
我花了很长时间试图弄清楚为什么我的聚合物代码的构建版本在 firefox 和 safari 中违反了我的 CSP（在 chrome 中工作），结果证明聚合物组件包含内联脚本，它们可能导致 CSP 问题不是使用 'unsafe-inline' 和 'unsafe-eval' 标头解决了 firefox 和 safari 的问题，但是如果对于您的脚本 CSP，您包括data:这将允许在聚合物构建期间编译的内联脚本在您的 Web 应用程序上运行而不会违反 CSP . 我想我会在这里分享，因为这个答案帮助我解决了我的问题。
回答by Nelles
You may want to consider using coma ',' to delimit your exceptions:
您可能需要考虑使用 coma ',' 来分隔您的异常：
This is the example posted on the website: https://github.com/helmetjs/csp
这是发布在网站上的示例：https: //github.com/helmetjs/csp
const csp = require('helmet-csp')
app.use(csp({
// Specify directives as normal.
directives: {
defaultSrc: ["'self'", 'default.com'],
scriptSrc: ["'self'", "'unsafe-inline'"],
styleSrc: ['style.com'],
fontSrc: ["'self'", 'fonts.com'],
imgSrc: ['img.com', 'data:'],
sandbox: ['allow-forms', 'allow-scripts'],
reportUri: '/report-violation',
objectSrc: ["'none'"],
upgradeInsecureRequests: true,
workerSrc: false // This is not set.
},
// This module will detect common mistakes in your directives and throw errors
// if it finds any. To disable this, enable "loose mode".
loose: false,
// Set to true if you only want browsers to report errors, not block them.
// You may also set this to a function(req, res) in order to decide dynamically
// whether to use reportOnly mode, e.g., to allow for a dynamic kill switch.
reportOnly: false,
// Set to true if you want to blindly set all headers: Content-Security-Policy,
// X-WebKit-CSP, and X-Content-Security-Policy.
setAllHeaders: false,
// Set to true if you want to disable CSP on Android where it can be buggy.
disableAndroid: false,
// Set to false if you want to completely disable any user-agent sniffing.
// This may make the headers less compatible but it will be much faster.
// This defaults to `true`.
browserSniff: true
}))
