LoginSignup
4

More than 5 years have passed since last update.

Phoenixのphx.gen.htmlでpasswordフィールドを生成するときは忘れずにtemplateを変更しよう!

Posted at

この記事の概要

  • phx.gen.htmlでpasswordフィールドをテンプレート生成する際にはform.html.erbtext_fieldpassword_fieldに変更する

問題の再現

こんな感じで適当にアプリケーション生成して、passwordフィールドを持つUserモデルを生成してみます

mix phx.new hoge
cd hoge
mix ecto.create
mix phx.gen.html User User users name:string password:string

忘れずにresources "/users", UserControllerをrouter.exに追加してmix ecto.migrateします

そうすると以下のようなform.html.eexが生成されると思います

hoge\lib\hoge_web\templates\user\form.html.eex

<%= form_for @changeset, @action, fn f -> %>
  <%= if @changeset.action do %>
    <div class="alert alert-danger">
      <p>Oops, something went wrong! Please check the errors below.</p>
    </div>
  <% end %>

  <div class="form-group">
    <%= label f, :name, class: "control-label" %>
    <%= text_input f, :name, class: "form-control" %>
    <%= error_tag f, :name %>
  </div>

  <div class="form-group">
    <%= label f, :password, class: "control-label" %>
    <%= text_input f, :password, class: "form-control" %>
    <%= error_tag f, :password %>
  </div>

  <div class="form-group">
    <%= submit "Submit", class: "btn btn-primary" %>
  </div>
<% end %>

このままにしておくと?

mix phx.serverしてlocalhost:4000/users/newにアクセスしてみましょう
image.png

こんな感じでNameフィールドを空にしてあえてエラーが出るようにしてsubmitしてみます(この時点でパスワード表示されているのでマズイです)
すると以下のようなエラーが出ます

image.png

入力したパスワードが表示されてる!!
ちなみにパスワードハッシュ化してる場合はハッシュ化済みのパスワードが表示されるので、セキュリティ的に大変マズイです

解決策

こういう時にPhoenixは良い関数を用意してくれています。password_inputです!
先ほどのform.html.eexでpassword入力フォームのtext_inputとなっている部分をpassword_inputに変換します

form.html.eex
  <div class="form-group">
    <%= label f, :password, class: "control-label" %>
    <%= password_input f, :password, class: "form-control" %>
    <%= error_tag f, :password %>
  </div>

もう一度localhost:4000/users/newにアクセスしてみるとこうなります

image.png

ちゃんとパスワード隠れてますね!submitしてみると以下のようにちゃんとパスワードフィールドは空で返ってきます

image.png

text_input と password_input の違い

公式の説明を見てみると、入力したデータを再利用しないような配慮がされているみたいですね

For security reasons, the form data and parameter values are never re-used in password_input/3. Pass the value explicitly if you would like to set one.

password_input/3 | Phoenix.HTML.Form – Phoenix.HTML v2.12.0
text_input/3 | Phoenix.HTML.Form – Phoenix.HTML v2.12.0

まとめ

ちゃんとドキュメント把握しておくの大事ですね!
ちなみにshow.eexとかindex.eexにもパスワード表示されているので忘れずに削除しておきましょう笑

余談ですが本記事執筆時点(2018/10/25)でmix phx.serverすると{:plug_cowboy, "~> 1.0"}を追加するようにエラーが出るので、その場合はmix.exsに追加してmix deps.getすればOKです

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4