#WEBエンジニア勉強会03

1. Copyright © Virtual Technology, Inc
ログイン画⾯やユーザー登録
画⾯などを安全に作るための
お決まりパターンについて
2017/10/7 WEBエンジニア勉強会 #03
⽵嵜 伸⼀郎(@stakezaki)
1

2. Copyright © Virtual Technology, Inc
⽵嵜 伸⼀郎 （たけざき しんいちろう）
twitter id:stakezaki
（有）バーチャルテクノロジー代表取締役
2

3. Copyright © Virtual Technology, Inc
vte.cx フロントエンドエンジニアが
すべてのシステムを作る未来
”もうフルスタックエンジニアはいらない。
HTMLとJSの知識さえあればWebサービスを
開発できる。
そのような世界を私たちは⽬指しています。”
3
https://t.co/304KqnnlYB

4. Copyright © Virtual Technology, Inc4

5. Copyright © Virtual Technology, Inc
で、作りました！
• https://qiita.com/stakezaki/items/d38
2fd100abcba200963
5
Same originでログイン認証ができ、⾃由にカスタマイズできる画⾯

6. Copyright © Virtual Technology, Inc6
本体の画⾯①
②
ログイン画⾯
ユーザ登録画⾯
基本情報登録画⾯
TOP画⾯
ユーザ情報
パスワード変更画⾯ パスワードリセット画⾯
ログイン、ユーザ認証の鉄板パターン
このパターンから外れるとUXの低いものになりセキュリティにも弱くなる

7. Copyright © Virtual Technology, Inc
セキュリティを考慮した基本ルール
• パスワードを保存/記録しない
– DBはもちろんサーバログにも出さないハッシュ化は必須
• ログイン試⾏に何回か失敗したらロック
– よくあるのはCAPTCHA
• アドレスバーを確認できるように
– 隠さない！ドメイン名とhttpsがわかるように
• パスワードの強度チェック
– 登録時に⻑さや種類などで強度をチェックする
• 本⼈確認をしっかりと
– 基本的にメールリンクを踏ませることで⾏う
– ユーザ登録後とパスワードリセット時(ログインできない場合を考慮)
• WebAPIで認証
– いまどきHTML formではなくXHRだよね
7

8. Copyright © Virtual Technology, Inc
APIとThin Server Architecture
8
・・・
REST
• クライアントからRESTでサーバリソースにアクセス
• サーバからはJSONやXMLのデータを返すのみ
データ

9. Copyright © Virtual Technology, Inc
API認証するならHTML FORM受付は廃⽌すべき
• 理由）CSRF対策を簡単にできるから
9
すべてのHTTPヘッダに X­Requested­With： XmlHttpRequestがついている前提

10. Copyright © Virtual Technology, Inc
JSONPは使わない
• 理由
– PWA Service Workerへの攻撃に使われる可
能性があるから
10
https://speakerdeck.com/masatokinugawa/pwa-study-sw

11. Copyright © Virtual Technology, Inc
その他のセキュリティ対策
• クリックジャッキング対策
– レスポンスヘッダに「 X-Frame-Options
SAMEORIGIN 」をつけるだけ
• キャッシュ対策
– すべてのレスポンスヘッダに以下をつけるだけ
• Pragma: no-cache
• Cache-Control: no-cache, no-store, must-
revalidate
• Expires: Fri, 1 Jan 2010 00:00:00
• 11

12. Copyright © Virtual Technology, Inc
ログイン⽅式をWebAPIに適⽤可能か？
12
詳しくはWebで

13. Copyright © Virtual Technology, Inc
パスワードのハッシュ化が重要な理由
13
• 万⼀漏れても⽣PWじゃなければギリギリセーフ
– リクエスト時もハッシュ化するのがおすすめ
– ⽣PWを保管しているのがバレたら信⽤ガタ落ち

14. Copyright © Virtual Technology, Inc
UXを考慮した設計
• ユーザ登録画⾯は必要最低限の項⽬とする
– 基本的にユーザIDとPWのみ、その他は次の画⾯で
• CAPTCHAは３回失敗したときに出す
– ログイン画⾯で最初から出すと⼊⼒が⾯倒
– ただし、ユーザ登録画⾯とパスワードリセット画⾯
では必須とする（リピート攻撃対策とCSRF対策）
• パスワード強度チェックはリアルタイムで
– ⼊⼒していくと強弱を表⽰してくれるようなもの
14

15. Copyright © Virtual Technology, Inc
ReactのReCAPCHAコンポーネント
15
https://github.com/dozoisch/react-google-recaptcha

16. Copyright © Virtual Technology, Inc
パスワード強度チェックコンポーネント
• パスワードの⻑さや⽂字の種類で強弱を
判定
16
https://github.com/mmw/react-password-strength

17. Copyright © Virtual Technology, Inc
ちなみに、正規表現でチェックする場合
• UXの観点からはあまりおすすめしない
17

18. Copyright © Virtual Technology, Inc
その他、nice to have
• ログイン履歴
– アクセス時間、ブラウザ種類、アクセス場所
– 第三者による不正な操作がないかをセルフ
チェック
• ソーシャルログイン
– Twitter、Facebook、Googleなど
– パスワードを保存しなくて済む
• 2要素認証
18

19. Copyright © Virtual Technology, Inc
10/25 React 勉強会やります！
https://vtecx.connpass.com/event/67541/
19

20. Copyright © Virtual Technology, Inc20
support@virtual-tech.net
パートナー募集中！