A message "The change you wanted was rejected" was generated during the registration process - Ruby on Rails, Heroku, Cloudflare

The message "The change you wanted was rejected" was generated while a user was trying to register for a dance event via website www.wcslux.com. The app is developed in Ruby on Rails, deployed on Heroku. The website is using Cloudflare to handle SSL on the custom domain www.wcslux.com.

Here below the log from Heroku:

2024-06-25T07:33:24.390090+00:00 app[web.1]: I, [2024-06-25T07:33:24.389976 #6]  INFO -- : [d3d5c8b1-48f4-417f-aa12-97f4ca3047c3] Started POST "/dancers" for 172.71.127.26 at 2024-06-25 07:33:24 +0000
2024-06-25T07:33:24.390729+00:00 app[web.1]: I, [2024-06-25T07:33:24.390655 #6]  INFO -- : [d3d5c8b1-48f4-417f-aa12-97f4ca3047c3] Processing by DancersController#create as HTML
2024-06-25T07:33:24.390740+00:00 app[web.1]: I, [2024-06-25T07:33:24.390722 #6]  INFO -- : [d3d5c8b1-48f4-417f-aa12-97f4ca3047c3]   Parameters: {"authenticity_token"=>"[FILTERED]", "dancer"=>{"name"=>"name of the dancer", "email"=>"[REDACTED], "phone"=>"[REDACTED]", "role"=>"Leader", "partner"=>"", "pass"=>"Full pass"}, "commit"=>"Complete Registration"}
2024-06-25T07:33:24.390862+00:00 app[web.1]: W, [2024-06-25T07:33:24.390833 #6]  WARN -- : [d3d5c8b1-48f4-417f-aa12-97f4ca3047c3] HTTP Origin header (https://www.wcslux.com) didn't match request.base_url (http://www.wcslux.com)
2024-06-25T07:33:24.391049+00:00 app[web.1]: I, [2024-06-25T07:33:24.391025 #6]  INFO -- : [d3d5c8b1-48f4-417f-aa12-97f4ca3047c3] Completed 422 Unprocessable Entity in 0ms (Allocations: 122)
2024-06-25T07:33:24.391664+00:00 app[web.1]: F, [2024-06-25T07:33:24.391570 #6] FATAL -- : [d3d5c8b1-48f4-417f-aa12-97f4ca3047c3]   
2024-06-25T07:33:24.391665+00:00 app[web.1]: [d3d5c8b1-48f4-417f-aa12-97f4ca3047c3] ActionController::InvalidAuthenticityToken (HTTP Origin header (https://www.wcslux.com) didn't match request.base_url (http://www.wcslux.com))

The head of the app contains the following :

  <head>
    <title><%= full_title(yield(:title)) %></title>
    <title><%= yield(:title) %> | </title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta charset="utf-8">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
    <%= render 'layouts/shim' %>
  </head>

The Production.rb file specifies that config.force_ssl = false given that we are using Cloudflare to handle SSL on the WCSLUX domain. We kept the config.force_ssl set to false:

config.force_ssl = false

Please note that submitting a registration via the form on Heroku instead of the custom domain WCSLUX works perfectly fine.

Why does the error message appear when I submit a registration via the custom domain WCSLUX? Any help to solve this problem is very much appreciated.

Solution

First, I have activated the Automated Certificate Management for my app in Heroku. Second, I have set the encryption mode to “Full (Strict)” as recommended. Third, I have created 2 additional rules in Cloudflare as follows:

Cache Rules:

ACME Challenge
(starts_with(http.request.uri.path, "/.well-known/acme-challenge/"))
Cache status: Bypass cache

Configuration Rules:

ACME Challenge
(starts_with(http.request.uri.path, "/.well-known/acme-challenge/"))
Automatic HTTPS Rewrites: Off
Browser Integrity Check: Off
Opportunistic Encryption: Off
Security Level Essentially Off
SSL: Off

I implemented these 3 actions to make the app work.