我目前正在构建一个博客应用程序，作为使用学习Angular的一部分
- 角度10.0.8
- QuillJS(富文本编辑器(
- NodeJS 12.19
- Express 4.17.1
- Firebase
我的问题是，在使用ng build--prod构建我的Angular应用程序，并通过我的Express API静态提供服务后，外部API提供的第三方资源(例如，我将OpenWeatherAPI用于天气小工具，这也在发送图像(被内容安全策略阻止。"我的网络"选项卡确认它们确实被阻止。
以下是我错误的几个例子：
拒绝加载图像'https://openweathermap.org/img/wn/10d@2x.png'，因为它违反了以下内容安全策略指令："；img src"self"数据："。
拒绝加载图像'https://pbs.twimg.com/profile_images/1311006946770718720/3v5WuGyw_normal.jpg'因为它违反了以下内容安全策略指令："img src"self"数据："。
拒绝装帧'https://www.youtube.com/因为它违反了以下内容安全策略指令："；默认src"self"；。请注意，没有显式设置"frame-src"，因此使用了"default-src"作为后备。
我知道我应该以某种方式将这些域列入白名单，这样Angular就可以知道它们是可信的。我曾尝试使用DOMManitizer将从后端发送的url转换为safeResourceUrl，但没有任何更改。我尝试在ng build生成的静态index.html中实现我自己的元标签(代码blow(noth，以及在angular项目中实现index.html，但它似乎只识别了"self"部分，忽略了url。
<meta
http-equiv="Content-Security-Policy"
content="img-src 'self' https://openweathermap.org/ https://pbs.twimg.com/" />
我还在后端和helmetjs上实现了自定义的CORS头，但对它们进行修改并没有产生任何结果。评论我的整个头盔配置并没有任何帮助。为我的CORS编码，因为它没有改变我下面的问题。
// CORS Implementation
module.exports = (req, res, next) => {
let origin = req.headers.origin || req.headers.referer;
if (origin && origin.match(/localhost/gi)) {
res.setHeader("Access-Control-Allow-Origin", "http://localhost:4200");
res.setHeader("Access-Control-Allow-Credentials", "true");
res.setHeader(
"Access-Control-Allow-Methods",
"OPTIONS, GET, POST, PUT, DELETE"
);
res.setHeader(
"Access-Control-Allow-Headers",
"Content-Type, Accept, APPKEY, withCredentials"
);
}
if (req.method === "OPTIONS") {
res.status(200).json({});
} else {
next();
}
};
我的问题是，在我的Angular应用程序中，我应该在哪里将这些第三方域列入白名单？在不破坏应用程序或将其打开以接受来自不在此域列表中的地方的攻击的情况下，最好的方法是什么。我不确定从实际项目中提供任何代码是否会有所帮助，但我在单独的回购中添加了它，以防万一。我在gitignore上有两个文件，我正在使用它们来设置Firebase apiKeys等等，以及Twitter API设置，所以不幸的是，没有它们，它就无法工作。
https://github.com/AlamoFiteCat/cheesed-blog
提前感谢您的回答。
好吧，我在@MoxxiManagarm的帮助下修复了它我的问题肯定是在后台。问题是，尽管我已经安装了Helmet，但它的配置非常糟糕。我一直在玩它，直到我有了一个功能配置。控制台中弹出的错误也有助于确定如何组装CSP。这是我的CSP配置，为我修复了它。
app.use(
helmet.contentSecurityPolicy({
directives: {
"default-src": ["'self'"],
"connect-src": ["'self'", "http://numbersapi.com/"],
"style-src": ["'self'", "https: 'unsafe-inline'"],
"font-src": ["'self'", "https: data:"],
"script-src": ["'self'"],
"object-src": ["'none'"],
"frame-src": ["'self'", "https://www.youtube.com/"],
"img-src": [
"'self'",
"http://openweathermap.org/",
"https://pbs.twimg.com/",
],
},
})
);
再次感谢！