node.js 应用程序中的 CSP 错误答案

【问题标题】：CSP error in a node.js applicationnode.js 应用程序中的 CSP 错误
【发布时间】：2018-06-20 00:01:06
【问题描述】：

我有一个带有 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.

我不明白这些错误是什么意思。如何修复这些错误。我需要使用来自谷歌的字体作为我的 style.css 文件的一部分，该文件具有以下条目，

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,700,800|Roboto+Slab:400,100,300,700);

这是设置 csp 的正确方法吗？任何帮助表示赞赏。

【问题讨论】：

我猜这个信息很清楚。 style-src 'self' 不允许应用这个样式，需要加上'unsafe-inline'，

标签： angularjs node.js content-security-policy

【解决方案1】：

由于 csp 政策，googleapis 的地址以某种方式被标记。我解决了这个问题，

从 Google webfonts 帮助站点下载了所需的字体
从 CSS 中移除 @import
从 fontSrc 中删除了 googleapis，只保留了“'self'”。

【讨论】：