node.js应用程序中的CSP错误 [英] CSP error in a node.js application

问题描述

我有一个node.js应用程序，其主页在angularjs中。该页面包含一个搜索框，并具有相应的search.js脚本，该脚本运行并进行服务器端查询。为了安全起见，我在node.js应用程序中使用以下csp配置添加了 csp。

I've a node.js application with a home page in angularjs. This page contains a 'search' box and has corresponding search.js script which runs and makes a server side query call. For security I added 'csp' in my node.js application with following csp configuration.

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浏览器中遇到以下错误。

But with this change, I started getting following errors in chrome browser.

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文件的一部分，该文件具有以下条目，

I don't understand what these error means. How do I fix these errors. I need to use fonts from google as part of my style.css file which has following entry,

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

这是设置csp的正确方法吗？感谢您的帮助。

Is this right way to set csp? Any help is appreciated.

推荐答案

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

Somehow the address to googleapis was flagged due to csp policy. I solved this problem by,

1. 从Google webfonts帮助网站下载了所需的字体

1. downloaded required fonts from Google webfonts helper site

从CSS删除@import

removed @import from CSS

从fontSrc删除googleapis，而仅保留'self'。

removed googleapis from fontSrc and kept only "'self'" instead.

这篇关于node.js应用程序中的CSP错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！