【Rails】ユーザーが選択した要素の情報をパラメーターに送る
こんにちは😊Kintarouです。
現在エンジニア転職を目指してTECH CAMPにてプログラミング学習中です👨🎓
夢はフリーランスエンジニアになって働く人が働きやすいシステムを作ること！
と、愛する妻と海外移住すること🗽
プログラミングや読んでいる本のことなど、ブログに書いていきます！
twitter : https://twitter.com/ryosuke_angry
今回はユーザーが選択した要素の情報をパラメーターに送る方法についてまとめます！
今回参考にさせて頂いたサイト様🙇♂️
Action View フォームヘルパー - Railsガイド
パラメーターに何を送信するのか
送信するデータは当然ユーザーが何かしら選択したり入力したりしたものを送りたいわけですから、inputタグ等で入力されたものを送ります。
ですが、ユーザーの入力方法は必ずしも入力フォームで行うわけではないかと思います。
※JavaScriptでclickした要素を強調させ、その強調した要素のdata-idを送るなど。
ではそのような場合にどうやってパラメーターに情報を送るのでしょう？
要素を隠してパラメーターに割り込ませる
※割り込ませるというと少し語弊があるかもですが、適切な表現が思い当たりませんでした😅
以下のようにinput type="hidden"としておくことで要素を隠しておき、valueの情報を一緒に送ることができます。
※チャットアプリケーションのチャットグループを作成する際に、入力されたグループ名とログインユーザー、選択されたユーザーのidをパラメーターに送る事を想定しています。
<%= form_with model:@task, local: true do %> <%= f.text_field :name, placeholder='グループ名を入力してください' %> <input room_name="room[user_ids][]" type="hidden" value=<%= current.user.id%>> <input room_name="room[user_ids][]" type="hidden" class="select-user"> <%= f.submit 'グループ作成' %> <% end %>
これでユーザーから見た画面上にはinput要素は現れませんが、ログインユーザーのidを送信することが出来ます。
選択したユーザーのidを送信する場合、JavaScriptで要素を強調すると同時にsetAttributeで要素のdata-idをselect-userに付与してしまえばよいですね。
※data-idにはカスタムデータ属性として、あらかじめ要素のidを付与しておきます。
authenticity_tokenとは
送ったパラメーターの内容をbinding.pryなどで確認している時にいつも出てくるこいつは何なんだろうと思ってました。
こちらクロスサイトリクエストフォージェリへの保護のためのセキュリティ機能のようで、セキュリティ機能が有効になっている場合GET以外の全てのフォームで生成されるもののようです。
※今回の記事の内容から少し逸れますが、formヘルパーを使う場合に自動生成される中で、こちらもhiddenで隠した要素として生成されていたのでついでに触れました。
<%= form_tag do %> Form contents <% end %> #↓ <form accept-charset="UTF-8" action="/home/index" method="post"> <div style="margin:0;padding:0"> <input name="utf8" type="hidden" value="✓" /> <input name="authenticity_token" type="hidden" value="f755bb0ed134b76c432144748a6d4b7a7ddf2b71" /> </div> Form contents </form>
クロスサイトリクエストフォージェリ(CSRF)
ユーザーによる認証が完了したと考えられるWebアプリケーションのページに、悪意のあるコードやリンクを仕込む攻撃方法。
そのWebアプリケーションへのセッションがタイムアウトしていなければ、攻撃者は本来認証されていないはずのコマンドを実行できてしまいます。
GETとPOSTを適切に使い分けることと、上記のセキュリティトークンをリクエストに追加することで対策することができます。
以上、どなたかの参考になれば幸いです😊
