Reputation: 1183
I recently pushed an application to production on Heroku. It is a combined Ruby on Rails (API) and Angular application.
I pushed the Angular version to a separate isolated (Angular only) Heroku build, and the images and functionality work as expected.
On the integrated Angular Rails version, I am getting the following error:
Refused to load the image 'https://i.ibb.co/R0VHJbd/ds.png' because it violates the following Content Security Policy directive: "img-src 'self' data: https://www.google-analytics.com".
I am only getting this error on the combined Angular Rails to build, but not on the Angular only build.
I tried adding several combinations of the <meta http-equiv
tag, including
<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:">
But all of these still do not work in rendering the images.
I am using a symbolic link to render the Angular portion in /public for Rails
For reference, these are my live builds:
Upvotes: 1
Views: 6131
Reputation: 49321
I used helmet to deploy one of my node projects to heroku: Here is the setting:
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,
})
);
This article explains how to set up for ruby_rails:
You can use this package for ruby-rails : https://github.com/github/secure_headers
Note that the configuration you see is just a sample, depends on what you are implementing in your code, you have to fill the fields.
Upvotes: 2
Reputation:
Try this tag:
<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';">
Upvotes: 0
Reputation: 291
Try the following tag, it did the trick for me.
<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:">
Upvotes: 0
Reputation: 3022
Could it be that you need to "sanitize" that external url image?
Try to add domething like this in the component you have the link to the image("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);
}
And in the HTML you use the img doing somethink like this:
<img
[src]="getUrl(id)"
></img>
Upvotes: 0