Kyle
Kyle

Reputation: 1183

Cannot load images on production, violates Content Security Policy directive: "img-src 'self' data

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

Answers (4)

Yilmaz
Yilmaz

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:

https://blog.sqreen.com/integrating-content-security-policy-into-your-rails-applications-4f883eed8f45/

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

user16849174
user16849174

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

coder123
coder123

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

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

Related Questions