如何使用 Rails 修复 Shopify 应用中的“ActionController::InvalidAuthenticityToken”错误？

Question

我正在开发模式下运行 Shopify 应用程序，Rails 5.2 托管在远程 ngrok 服务器上。 当我尝试发布记录时，我从 Rails 收到“ActionController::InvalidAuthenticityToken”错误。 当我禁用 CSRF 令牌时，Shopify 应用程序不起作用并显示错误，因此我不想禁用 CSRF 保护，但不知道如何绕过此错误而不这样做。 任何帮助将不胜感激。

Rails 5 ActionController::InvalidAuthenticityToken error and ActionController::InvalidAuthenticityToken

参考以上两个问题我在我的application_controller.rb中添加了以下代码

skip_before_action :verify_authenticity_token
protect_from_forgery prepend: true, with: :exception

但是，错误仍然存​​在。

提交后导致错误的表单

<form action="/create_shipment" method="post">
    <%= token_tag %>
      <div class="form-group">
        <label>Username</label>
        <input type="text" class="form-control" name="username" placeholder="e.g. johnsmith">
        
      </div>
      <div class="form-group">
        <label>Secret Key</label>
        <input type="text" class="form-control" name="key" placeholder="e.g. 34ssdfkje3483jkdj83...">
      </div>

      <button type="submit" name="submit" class="btn btn-primary">Submit</button>
</form>

路由文件

Rails.application.routes.draw do
  root :to => 'home#index'
  post '/create_shipment', :to => 'add_user#add_shipment_data'
  get '/products', :to => 'products#index'
  
  mount ShopifyApp::Engine, at: '/'
end

add_user_ontroller.rb

class AddUserController < ApplicationController
  def add_shipment_data
    @user = AddUser.new
    @user.username = params[:username]
    @user.secret_key = params[:key]
    @user.save
  end
end

shopify_app.rb

ShopifyApp.configure do |config|
  config.application_name = "Shipment Method"
  config.old_secret = ""
  config.scope = "write_products, read_products, read_customers, read_orders, write_orders" # Consult this page for more scope options:
                                  # https://help.shopify.com/en/api/getting-started/authentication/oauth/scopes
  config.embedded_app = true
  config.after_authenticate_job = false
  config.api_version = "2021-01"
  config.shop_session_repository = 'Shop'
  config.allow_jwt_authentication = true
  config.allow_cookie_authentication = false

  config.api_key = ENV.fetch('SHOPIFY_API_KEY', SHOPIFY_API_KEY).presence
  config.secret = ENV.fetch('SHOPIFY_API_SECRET', SHOPIFY_API_SECRET).presence
  if defined? Rails::Server
    raise('Missing SHOPIFY_API_KEY. See https://github.com/Shopify/shopify_app#api-keys') unless config.api_key
    raise('Missing SHOPIFY_API_SECRET. See https://github.com/Shopify/shopify_app#api-keys') unless config.secret
  end
end

错误截图

Answer 1

我花了很多时间试图弄清楚为什么我在使用 ngrok 时遇到 CSRF 错误。 事实证明，大多数（所有？）浏览器都有一个域列表，它们不会存储可由子域访问的 cookie，ngrok.io 就在此列表中。 Firefox 只是告诉您域无效，而 chrome 告诉您域对主机无效，而不是真正的原因。

我的第一个解决方案是做 Rails.application.config.session_store :cookie_store, ..., tld_length: 3

然后我决定了这个

module ActionDispatch                                                                             
  class Cookies
    class CookieJar                                                                               
      alias handle_options_orig handle_options                                                    
      def handle_options(options)
        if request.host  =~ /ngrok.io/                                                            
          options[:tld_length] = 3                                                                
        end
        handle_options_orig(options)                                                              
      end
    end
  end
end

浏览器将存储 X.ngrok.io 的 cookie，但不会存储 .ngrok.io 似乎是默认的。

这是用于 Rails 5