我有一个带有angularjs主页的node.js应用程序。此页面包含一个“搜索”框,并具有相应的search.js脚本,该脚本运行并进行服务器端查询调用。为了安全起见,我在node.js应用程序中添加了“csp”,并使用了以下csp配置。
const csp = require('helmet-csp');
app.use(helmet());
app.use(csp({
directives: {
defaultSrc: ["'self'", 'https://my.domain.com'],
scriptSrc: ["'self'", "'unsafe-inline'"],
styleSrc: ["'self'"],
imgSrc: ["'self'"],
connectSrc: ["'self'"],
fontSrc: ["'self'", 'https://fonts.googleapis.com'],
objectSrc: ["'none'"],
mediaSrc: ["'self'"],
frameSrc: ["'none'"],
},
setAllHeaders: false, // set to true if you want to set all headers
safari5: false // set to true if you want to force buggy CSP in Safari 5
}));
但是通过这次更改,我开始在Chrome浏览器中收到以下错误。
Refused to load the stylesheet 'https://fonts.googleapis.com/css?family=Open+Sans:400,300,700,800|Roboto+Slab:400,100,300,700' because it violates the following Content Security Policy directive: "style-src 'self'".
prefixfree.min.js:17 Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU='), or a nonce ('nonce-...') is required to enable inline execution.
我不明白这些错误意味着什么。我该如何解决这些错误。我需要使用google中的字体作为我的style.css文件的一部分,该文件包含以下条目
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,700,800|Roboto+Slab:400,100,300,700);
这是设置csp的正确方法吗?任何帮助表示赞赏。
答案 0 :(得分:0)
由于csp政策,以某种方式标记了googleapis的地址。我解决了这个问题,
从Google webfonts帮助网站下载所需字体
从CSS中删除了@import
从fontSrc中移除了googleapis并仅保留了#34;' self'"代替。