无法在生产中加载图像，违反内容安全策略指令：“img-src 'self' data

Question

赏金将在 2 天内到期。 此问题的答案有资格获得+500声望赏金。 Kyle正在从有信誉的来源寻找答案。

我最近在 Heroku 上将应用程序推向生产。 它是 Ruby on Rails (API) 和 Angular 应用程序的组合。

我将 Angular 版本推送到单独的隔离（仅限 Angular）Heroku 版本，并且图像和功能按预期工作。

在集成的 Angular Rails 版本上，我收到以下错误：

拒绝加载图像“https://i.ibb.co/R0VHJbd/ds.png”，因为它违反了以下内容安全策略指令：“img-src 'self' data: 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 部分

作为参考，这些是我的实时构建：

• Angular 仅基于 Heroku 构建
• Angular 和 Rails 建立在 Heroku 上

Answer 1

您是否需要“清理”外部 url 图像？

尝试在具有图像链接的组件中添加这样的内容（“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>

Answer 2

如果您提供模板文件，则需要设置 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"))
);

还要设置 cors-policy：

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

在路由注册的基础上注册两个中间件。

Answer 3

试试下面的标签，它对我有用。

<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:">

Answer 4

试试这个标签：

<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';">

Answer 5

我使用头盔将我的一个节点项目部署到 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/

您可以将此 package 用于 ruby-rails： https://github.com/github/secure_headers

请注意，您看到的配置只是一个示例，取决于您在代码中实现的内容，您必须填写这些字段。