我最近在Heroku上将一个应用程序推向了生产。它是RubyonRails(API(和Angular应用程序的组合。
我将Angular版本推到了一个单独的隔离(仅限Angular(Heroku构建中，图像和功能如预期那样工作。
在集成的Angular Rails版本上，我得到了以下错误：
拒绝加载图像'https://i.ibb.co/R0VHJbd/ds.png'，因为它违反了以下内容安全策略指令："；img src"self"数据：https://www.google-analytics.com"。
我只在要构建的组合Angular Rails上得到这个错误，但在仅Angular的构建上没有。
我尝试添加<meta http-equiv标签的几个组合，包括
<meta http-equiv="Content-Security-Policy"
content="
worker-src https:;
child-src https: gap:;
img-src 'self' https: data:;
default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:">
但是所有这些仍然不能用于渲染图像。
我正在使用一个符号链接来为Rails 在/public中呈现Angular部分
作为参考，这些是我的实时构建：
- 仅在Heroku上构建Angular
- Angular和Rails构建在Heroku上
我使用头盔将我的一个节点项目部署到heroku：以下是设置：
app.use(
helmet.contentSecurityPolicy({
directives: {
// "default-src" used as fallback for any undeclared directives
"default-src": ["'self'"],
// I have stripe_set up
"script-src": ["'self'", "'unsafe-inline'", "js.stripe.com"],
"style-src": ["'self'", "'unsafe-inline'", "fonts.googleapis.com"],
"frame-src": ["'self'", "js.stripe.com"],
"font-src": [
"'self'",
"fonts.googleapis.com",
"fonts.gstatic.com",
"res.cloudinary.com/",
],
"img-src": ["'self'", "data:", "https://res.cloudinary.com"],
},
reportOnly: true,
})
);
本文解释了如何设置ruby_rails:
https://blog.sqreen.com/integrating-content-security-policy-into-your-rails-applications-4f883eed8f45/
您可以将此包用于ruby rails：https://github.com/github/secure_headers
请注意，您看到的配置只是一个示例，取决于您在代码中实现的内容，您必须填写字段。
是否需要；消毒"；外部url图像？
试着在你有图像链接的组件中添加这样的domething("；https://i.ibb.co/R0VHJbd/ds.png"(。
import { DomSanitizer } from '@angular/platform-browser';
constructor(protected _sanitizer: DomSanitizer) {}
public getUrl(id: string) {
const urlSanitazed = `https://i.ibb.co/${id}/ds.png`; //Assuming that 'R0VHJbd' is the id in your example
return this._sanitizer.bypassSecurityTrustResourceUrl(urlSanitazed);
}
在HTML中，你可以使用img来做这样的事情：
<img
[src]="getUrl(id)"
></img>
试试下面的标签，它帮我搞定了。
<meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data:">
试试这个标签：
<meta http-equiv="Content-Security-Policy" content="default-src * gap:; script-src * 'unsafe-inline' 'unsafe-eval'; connect-src *; img-src * data: blob: android-webview-video-poster:; style-src * 'unsafe-inline';">