Phoenix의 phx.gen.html에서 password 필드를 생성 할 때 잊지 않고 template를 변경하십시오!

7120 단어 ElixirPhoenix

이 기사 개요


  • 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

    이런 느낌으로 Name 필드를 비워서 굳이 에러가 나오도록(듯이)하고 submit 해 봅니다 (이 시점에서 패스워드 표시되고 있으므로 마즈이입니다)
    그러면 다음과 같은 오류가 발생합니다.



    입력한 비밀번호가 표시됩니다! !
    덧붙여서 패스워드 해시화하고 있는 경우는 해시화 끝난 패스워드가 표시되므로, 보안적으로 몹시 마즈이입니다

    해결책



    이 때 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로 이동하면 이렇게됩니다.



    제대로 비밀번호 숨어 있네요! submit 해 보면 아래와 같이 제대로 패스워드 필드는 하늘로 돌아옵니다



    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
    여담입니다만 본 기사 쓰기 시점(2018/10/25)에서 index.eex 그러면 mix phx.server 를 추가하도록 에러가 나오므로, 그 경우는 {:plug_cowboy, "~> 1.0"} 에 추가하고
  • 좋은 웹페이지 즐겨찾기