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

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:

CodePudding user response：

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>

CodePudding user response：

If you are serving templating files, you need to set favicon.

import favicon from "serve-favicon";

app.use(
  "/favicon.ico",
  // I assume you already registered your public folder to express
  favicon(path.join(__dirname, "..", "public", "favicon.ico"))
);

Also set up cors-policy:

import cors from "cors";
app.use(cors());