More than 3 years have passed since last update.

【Bootstrap】いきなりログアウトできなくなった〜なんでや？CSRF問題らしい〜

Posted at 2021-01-20

解決したいこと

Bootstrapを導入してからログアウトができなくなってしまった。

発生している問題・エラー

ログイン後、ヘッダー部分にあるログアウトボタンを押すとエラーメッセージが出て、一生ログアウトできない。

該当するソースコード

application.html.erb

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Jekyll v4.0.1">
    <title>Party Freak</title>

    <%= stylesheet_link_tag 'application', media: 'all'%>

〜以下略〜

以前のソースコード

application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Party Freak</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

〜以下略〜

自分で試したこと

<html>の<head>部分の記述を導入前に戻すと、ログアウトができるようになる。
最終的には<head>から下を入れ替えることでエラーが出ず、以前のようにログアウトができるようになった。
なお、ログインと新規投稿については問題のあったソースコードでもできていた。
部分的に入れ替えてみたり色々試してみて数十分、記述を追加するとログアウトできるようになるものを発見。

application.html.erb

<%= csrf_meta_tags %>
<%= csp_meta_tag %>

この二つでした。
調べてみるとクロスサイトリクエストフォージュリに関する記述。
Railsが**セキュリティ的に危ないからやめときなさい！**と注意をしてくれているということでした。
ありがとうRailsさん、いつもエラーで怒ってごめんね。

エラーが出なくなったソースコード（head以下を変更しました

application.html.erb


<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Jekyll v4.0.1">
    <title>Party Freak</title>
    <%= csrf_meta_tags %>　　　　　　　⬅️追加
    <%= csp_meta_tag %>　　　　　　　　⬅️追加　　
    <%= stylesheet_link_tag 'application', media: 'all'%>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>　　　⬅️なぜかこれも追加
〜以下略〜

一番下のJSを入れないとログアウトできなかったのが謎です。
何度やってもこれがないとダメなようですが理由がわかりません。
どなたか理由がわかる方がいらっしゃれば教えていただければ幸いです。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up