pip install flask-wtf
preventing from CSRF attack

크로스-사이트 리퀘스트 위조(CSRF) 보호

CSFR 공격은 악의적 웹사이트에서 희생자가 로그인한 다른 웹사이트로 리퀘스트를 전송할 때 일어난다.
이를 위해 Flask-WTF는 암호화 키를 설정하기 위한 애플리케이션이 필요하다.
이 키를 사용하여 암호화된 토큰을 생성하고 이 토큰은 폼 데이터와 함께 리퀘스트 인증을 검증하는데 사용된다.

app = Flask(__name__)
app.config['SECRET_KEY'] = 'hard to guess string'

app.config 딕셔너리는 프레임워크, 확장 혹은 애플리케이션 자체에서 사용하는 설정 변수들을 저장하기 위해 일반적으로 사용하는 공간이다.

폼 클래스

Flask-WTF을 사용할 때 웹 폼은 Form 클래스로부터 상속한 클래스에 의해 표현된다.
폼에 있는 필드는 각각 오브젝트로 표현된다.
각 필드는 하나 이상의 검증자(validator)가 붙어 있다.
검증자는 제출한 입력값이 올바른지 확인하는 함수이다.

from flask.ext.wtf import Form
from wtforms import StringField, SubmitField
from wtforms.validators import Required # NULL 값이 아님을 보장

class NameForm(Form):
  name = StringField('What is your name?', validator = [Required()])
  submit = SubmitField('Submit')

폼에 있는 필드는 클래스 변수로 정의되며 각 클래스 변수는 필드 타입과 관계된 오브젝트로 할당된다.
예를 들어, StringField 클래스는 항목을 type="text" 속성으로 표현한다.

Form 베이스 클래스는 Flask-WTF 확장에 의해 정의되므로 flask.ext.wtf에서 임포트된다. 그러나 필드와 검증자는 직접 WTForms 패키지로부터 임포트된다.

WTForms에서 지원하는 표준 HTML 필드의 리스트는 아래와 같다

필드 타입	설명
StringField	텍스트
TextAreaField	다중 라인 텍스트
PasswordField	패스워드 텍스트
HiddenField	숨겨진 텍스트
DateField	datetime.date 텍스트
DateTimeField	datetime.datetime 텍스트
IntegerField	정수 값의 텍스트
DecimalField	Decimal 값의 텍스트
FloatField	부동소수점을 갖는 수의 텍스트
BooleanField	True or False
RadioField	라디오 버튼 리스트
SelectField	선택 가능한 드롭다운 리스트
SelectMultipleField	다중 선택 드롭다운 리스트
FileField	파일 업로드 필드
SubmitField	폼 제출 버튼
FormField	폼 안에 폼
FieldList	주어진 타입의 필드 리스트

WTForms에 내장되어 있는 검증자의 리스트는 아래와 같다

검증자	설명
Email	이메일 주소
EqualTo	두 필드 값 비교 (패스워드 검증)
IPAddress	IPv4 네트워크 주소
Length	입력한 문자열의 길이를 검증
NumberRange	입력한 값이 숫자와 알파벳 범위인지 검증
Optional	Null 값을 허용하고 추가한 검증자를 건너뜀
Required	Null 값을 불허
Regexp	정규표현식에 대한 입력을 검증
URL	URL을 검증
AnyOf	입력이 가능한 값들 중 하나인지를 검증
NoneOf	입력이 불가한 값들 중 하나가 아니라는 것을 검증

폼의 HTML 렌더링

폼 필드는 호출이 가능하다.
Flask-Bootstrap은 전체 Flask-WTF 폼을 렌더링하기 위해 부트스트랩의 미리 정의된 폼 스타일을 사용하도록 상당한 상위 레벨의 헬퍼 함수를 제공한다.

<form method="POST">
  {{ form.name.label }} {{ form.name() }}
  {{ form.submit() }}
</form>

<!-- 위아래는 같은 것이다 -->

{% import "bootstrap/wtf.html' as wtf %}
{{ wtf.quick_form(form) }}

뷰 함수에서의 폼 처리

app.route에 methods를 등록하지 않으면, 해당 뷰 함수는 GET 리퀘스트만 처리한다.
validate_on_submit()은 폼이 제출될 때 True를 반환한다.

@app.route('/', methods=['GET','POST']
def index():
  name = None
  form = NameForm()
  if form.validate_on_submit():
    name = form.name.data
    form.name.data = ''
  return render_template('index.html', form=form, name=name)

리다이렉트와 사용자 세션

웹 어플리케이션이 브라우저에 의해 전송된 마지막 리퀘스트로 POST 리퀘스트를 남겨 두지 않도록 하는 습관을 들일 필요가 있다. (POST/REDIRECT/GET Pattern)

이 습관은 정상적인 응답 대신에 리다이렉트와 함께 POST 리퀘스트에 대해 응답하는 것이다.
그렇지 않으면 이전에 제출한 request를 페이지가 기억하여 새로고침을 시행할 시, 다시 한번 똑같은 리퀘스트가 제출되는 문제를 일으킨다.
이를 해결하기 위하여 POST/REDIRECT/GET 패턴으로 문제를 해결할 수 있다.
그런데 이 또한 기존에 저장된 사용자 정보를 잃어버릴 수 있다는 문제점이 있다.
이를 해결하기 위해 사용자 세션을 사용할 수 있다.

#hello.py
from flask import Flask, render_template, session, redirect, url_for

@app.route('/', methods=['GET','POST'])
def index():
  form = NameForm()
  if form.validate_on_submit():
    session['name'] = form.name.data
    return redirect(url_for('index'))
  return render_template('index.html', form=form, name=session.get('name'))

메시지 플래싱

때로는 리퀘스트를 완료하고 나서 사용자에게 상태 업데이트를 전달하는 것이 유용하다.
이는 로그인 시도에 따른 응답 메시지를 전달해야 하는 경우이다.
이를 위해 플라스크는 flash() 함수를 제공한다.

from flask import Flask, render_template, session, redirect, url_for, flash

@app.route('/'. methods=['GET','POST']
def index():
  form = NameForm()
  if form.validate_on_submit():
    old_name = session.get('name')
    if old_name is not None and old_name != form.name.data:
      flash('Looks like you have changed your name!')
    session['name'] = form.name.data
    form.name.data = ''
    return redirect(url_for('index'))
  return render_template('index.html', form = form, name = session.get('name'))

그런데 이렇게 flash()를 호출하는 것만으로는 메세지를 출력하기에 충분하지 않다.
베이스 템플릿을 활용하여 모든 페이지에서 보여질 수 있도록 만들어야 하기 때문이다.
get_flashed_messages() 함수는 이를 도와준다.

<!-- template/base.html -->
{% block content %}
<div class='container'>
  {% for message in get_flashed_messages() %}
  <div class="alert alert-warning">
    <button type="button" class="close" data-dismiss="alert">
      &times;
    </button>
    {{ message }}
  </div>
  {% endfor %}
  
  {% block page_content %}
  {% endblock %}
</div>
{% endblock %}