VeeValidate の"穴"を踏み抜いてしまった

Transcript

1. VeeValidate の”穴”を 踏み抜いてしまった 2019.9.6 v-sendai #3 @楽天株式会社 江口 拓弥
2. 自己紹介 江口 拓弥 v-sendai 皆勤賞で LT やってる人です。 最近の構成は、 Nuxt.js x TypeScript x Firebase x Auth0 です！ 2 akathea_
3. おことわり このLTで登場するコードは、全て v2系の内容になります… 29 Jul. - VeeValidate 3.0 is out !!! 3 akathea_
4. VeeValidateとは？ akathea_
5. “ Template Based Validation Framework For Vue.js 5 akathea_
6. 非同期かつリアルタイムに バリデーションできる 6 akathea_ https://codesandbox.io/s/x2k1l2y17o
7. ドキュメントも豊富 7 akathea_
8. i18nも楽ちん！ 8 akathea_
9. こんな感じでバリデーション <input name="mail" :value="mail" placeholder="メールアドレス" validate="required|email" validate-name="メールアドレス" /> 9 akathea_
10. 超便利！ akathea_
11. ある日、痛ましい事件が… 11 メールマガジンが配 信できなかったユー ザー見てたら メアドに全角文字 入ってるんだけどこ れはバグ？ ？！ 運用チーム 私 akathea_
12. (そもそも)メールアドレスの 正しいフォーマットって？ akathea_
13. RFC 5322 13 http://srgia.com/docs/rfc5322j.html#p3.4 akathea_
14. 実はこんなメールアドレスがある 14 ◦ ...hoge…@docomo.ne.jp □ 先頭や@直前に「.」は使ってはいけない。「 .」を２回以上連続して使ってはいけない。いけな いのだが、docomoのキャリアメールでは許可されている。 ◦ “hoge huga”@example.com □ 「“」と「”」に囲まれていた場合、間にスペースが利用できる。 できるが、そもそもダブルクオート使えるメールサービスを知らない。 ◦ 管理者@ぶいせんだい.jp , föö@bår.de □ RFC 6530 によって、メルアド(ユーザー名、ドメイン名どちらも )に マルチバイトが許可された。 Gmailも 2014年に送受信に対応。 とはいえ見たことはない。 akathea_
15. 実はこんなメールアドレスがある 15 ...確かに存在する…! ...するが…! ...こんなアドレスがあるはずがない…! v.sendai３@gmail.co 全角 明らかに typo akathea_
16. 入力値をどうチェックすべきだった？ 16 ◦ メールアドレスのベリファイ※は実施していたが 利用時の必須条件にしていなかった ※会員登録されたアドレス宛にワンタイムURL付き確認メールを送信 ◦ 何度も会員登録できる仕組みではなかった →ユーザーは登録ミスに気づいても再登録できなかった →厳格なチェックが必要だった ◦ 「メールアドレスに使える文字は半角だけ」 という固定概念があった ◦ VeeValidateを始め、有名なライブラリなら そのへんも面倒見ていると勘違いしてしまった akathea_
17. まとめ akathea_
18. まとめ 18 ◦ 有名なライブラリ・フレームワークにも穴はある □ そもそも日本人以外は、今回の事象を 穴とも思っていないかもしれない ▪ i18n と l11n は違う ◦ メールアドレスに限らず、世の中の常識が変わっているという 可能性を常に考慮する □ 常に最新の情報をキャッチアップし続ける ◦ 厳格なチェックが必要なときはちゃんとテストする ◦ 本当に穴っぽかったらPR出していこう！ akathea_
19. ご清聴ありがとうございました 19