Certificate for this server is invalid with S3 and Paperclip

Question

I'm working in a Rails 5 application which is deployed by the moment on Heroku. I'm using Postgrsql for data storage, Paperclip to manage image uploads and AWS S3 to store all the uploaded images.

To accomplish this I used this very detailed and useful tutorial from Heroku dev which really help me a lot.

I use the same configuration for development env to be able to test it. Actually it works like a charm in dev.

When I deploy to Heroku and after running migrations, setting up ENV variables I create a new Brochure which accepts a cover image; and everything goes good. The images are stored correctly in AWS S3.

But when I render de image in a view I wit just don't work. I got the following errors in browsers console:

Safari browser:

Failed to load resource: The certificate for this server is invalid. You might be connecting to a server that is pretending to be “sponsors.matchxperience.s3.amazonaws.com” which could put your confidential information at risk.

Chrom canary:

Failed to load resource: net::ERR_INSECURE_RESPONSE

I don't know what's the matter because in development environment everything works.

Can anybody help me out with this or any idea what's going on?

production.rb (the same in development.rb)

Rails.application.configure do
  # We’ll also need to specify the AWS configuration variables for the production Environment.
  config.paperclip_defaults = {
    storage: :s3,
    # s3_protocol: 'http',
    s3_credentials: {
      bucket: ENV.fetch('AWS_S3_BUCKET'),
      access_key_id: ENV.fetch('AWS_ACCESS_KEY_ID'),
      secret_access_key: ENV.fetch('AWS_SECRET_ACCESS_KEY'),
      s3_region: ENV.fetch('AWS_REGION')
    }
  }
end

brochure.rb

class Brochure < ApplicationRecord
  # This method associates the attribute ":cover" with a file attachment
  has_attached_file :cover, styles: {
    card: '500x330#',
  }

  # Validate the attached image is image/jpg, image/png, etc
  validates_attachment_content_type :cover, :content_type => /\Aimage\/.*\Z/
end

paperclip.rb at config/initializers/

Paperclip::Attachment.default_options[:url] = ':s3_domain_url'
Paperclip::Attachment.default_options[:path] = '/:class/:attachment/:id_partition/:style/:filename'

Answer 1

After searching and reading different sources for this error I found many different solutions for similar errors but no one seemed to be related with Rails 5 directly and sincerely I don't even though it has something to see with Ruby or Rails.

I was convinced it was something with the AWS S3 server and I was right, I fixed it. Finally reading the official documentation for creating a new bucket I realized that it was something ridiculously simple.

In the documentation it says we can use periods . and hyphens - in our bucket's name:

Can contain lowercase letters, numbers, periods (.), and hyphens (-).

Must start with a number or letter.

Must be between 3 and 63 characters long.

...

So, I named my bucket as:

sponsors.matchxperience

Which was right written, BUT talking about server's URLs it may confuse the browser's requests to point to a different server and that was happening in my case. That's why I got that error.

The solution

Just create another bucket (or renaming the actual one may function) and copied all the content named as:

sponsors-matchxperience

And magically it just works fine in production on Heroku. I don't know what's going on with the AWS documentation but for me, that whats the error, periods . in my bucket's name.

I hope it could be useful for someone else.