Rails Content Security Policy not allowing external images from API

Question

I am using an external API to display images from source https://i.ibb.co

The img src URL looks like this: https://i.ibb.co/R0VHJbd/ds.png

In production, I'm having an issue displaying the images. In the console, the 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:".

However, even after setting my Content Security Policy in the index.html to:

I am still getting the error

I am also getting the same error when attempting to upload through the API, even though the connect-src is defined in my meta tag

Refused to connect to 'https://api.imgbb.com/1/upload?expiration=600&key=' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.

I have rack-cors enabled to allow all requests

application.rb

config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins '*'
    resource '*', headers: :any, methods: :any
  end
end

config/initializers/rack_cors.rb

Rails.application.config.middleware.insert_before 0, Rack::Cors do
    allow do
        origins '*'
        resource '*', 
        headers: %w(Authorization),
        expose: %w(Authorization),
        methods: :any
    end
end

config/initializers/content_security_policy.rb

Rails.application.config.content_security_policy do |policy|
  policy.default_src :self, :https
  policy.font_src    :self, :https, :data
  policy.img_src     :self, :https, "i.ibb.co", :data
  policy.object_src  :none
  policy.script_src  :self, :https
  policy.style_src   :self, :https
  # If you are using webpack-dev-server then specify webpack-dev-server host
  policy.connect_src :self, :https, "http://localhost:3035", "ws://localhost:3035" if Rails.env.development?

  # Specify URI for violation reports
  # policy.report_uri "/csp-violation-report-endpoint"
end

How can I resolve this?

Note: This is an Angular project running on the Rails server, so the Angular index.html that is served on the homepage is compiled first, followed by Rails

For reference: my project on Heroku

Rails Content Security Policy not allowing external images from API

0 Answers