RailsでCSPに引っかかった話

結論

config/initializers/content_security_policy.rbにwebのconsoleに表示されてるリンクを追加すればいい。

ことの発端

Railsで開発
↓
CapybaraでSeleniumのChrome Headless Driverでテスト
↓
serverをrunしていれば通るテストが通らなくなった

環境

• Ruby 2.5.3
• Rails 5.2.3

関係ない環境

• Capybara 2.18.0

あとテストはminitestで書いてます

バグを見る

Headlessじゃなくても通らないかチェックする。

*_test.rb

setup do
  Capybara.server_port = 3000
  Capybara.server_host = "localhost"
  Capybara.app_host = "http://localhost:3000"
  Capybara.current_driver = :selenium_chrome
end

実行結果

F

Failure:
Test#test
[test/integration/*_test.rb:*]:
Expected false to be truthy.

通らない。
通らないテストにsleep 3000とか入れて、検証画面を開ける時間を稼ぐ。
テストを実行→sleepしたら右クリックから検証を選択→コンソールを開く

コンソール

Refused to connect to 'http://localhost:3000/***`
because it violates the following Content Security Policy directive: 
"connect-src https://s3-us-west-2.amazonaws.com/rubygems-dumps/ 
https://*.fastly-insights.com https://api.github.com".

？？？？？？

全然わからないのでググりまくる。

解決へ

https://qiita.com/sola-msr/items/1f3106cb4a097c883880
こちらのページがヒット。

web.configを開いて以下Content-Security-Policyの部分、script-srcとimg-srcとframe-srcにポリシー違反として出てきたURLを追加（＝こいつらは読み込んでいいというリスト）をすればちゃんと表示されるようになりました。

なるほど、Content-Security-Policyのviolateに表示されてるのを追加すればいいと……
Railsはこういのは多分configでいじってると予想。またググってると
https://bauland42.com/ruby-on-rails-content-security-policy-csp/

お〜〜これですね。

ということで解決

conifg/initializersから似たようなファイルを見つける。

config/initializers/content_security_policy.rb

Rails.application.config.content_security_policy do |policy|
  unless Rails.env.development?
    ...
    policy.connect_src :self ,...
    ...
  end
end

適当に:selfを追加する。(localhost:3000に入れなかったため)
これでテストを走らせると……

実行結果

Finished in 8.905670s, 0.5614 runs/s, 0.8983 assertions/s.
5 runs, 8 assertions, 0 failures, 0 errors, 0 skips

よーし！！！！

今回の教訓

多分CSPなんてRailsの基礎なので、基礎をやらずにコーディングすると痛い目にあう。終わり。