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

【问题标题】：Cannot load images on production, violates Content Security Policy directive: "img-src 'self' data无法在生产中加载图像，违反内容安全策略指令：“img-src 'self' data
【发布时间】：2022-01-30 15:58:53
【问题描述】：

我最近在 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 部分

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

【问题讨论】：

看起来 rails 正在使用它自己的 CSP，你能确定 config/initializers/content_security_policy.rb 中没有配置任何内容吗？
Lik @Chris，我认为您必须检查 rails CSP。这个article 可以帮助你。祝你好运:)

标签： node.js ruby-on-rails angular heroku

【解决方案1】：

您是否需要“清理”该外部网址图像？

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

【讨论】：

试过不行

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

试试这个标签：

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

【讨论】：

【解决方案4】：

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

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

【讨论】：