はじめに

先日フロントエンドLT会 - vol.5　#frontendltというオンラインイベントに参加してきました。
発表された方の中から、私が個人的に気になったもの、ためになったものをピックアップしてまとめておきます。

フロントエンドエンジニアが知っておきたいセキュリティについて

セキュリティというと、一般的にはバックエンドが頑張る仕事と思われがちですが、どれだけ強固なバックエンドを仕組んでもフロントが弱いと破られてしまう場合やそのリスクが高まるのは間違いありません。

参考資料
ヒグ！さんの発表スライド
フロントエンドが知っておきたいセキュリティについて

フロントエンドが最も気にすべきセキュリティ

トークン
認証＆認可

今回は時間の都合上トークンの例についてお話いただきました。

「トークン」とは

よく耳にする「トークン」とはそもそもなんなのか？
色々調べると証や印を意味する単語であり、ITの分野においては認証を識別するために用いられる文字列などを指すことが多いそうです。

トークンとは、証拠、記念品、代用貨幣、引換券、商品券などの意味を持つ英単語。ITの分野では、長いデータを最小の構成単位に分解したものや、何かの証や印になるようなデータや装置、器具などのことをトークンということが多い。
トークンとは

問題になるシーン

例えば、現状Webで公開しているサイトをスマホのアプリからWebviewで呼び出して動作させようとした場合、ただページだけを閲覧するサイトなら問題ないが、会員ページや決済などの認証認可が必要になる場合に、アプリからログインした際のトークンをWebview経由でどうやってサイト側に渡すかが問題になるそうです。

解決策

Authorization headerで渡す
URLのクエリで渡す
ローカルストレージ経由で渡す
js発火時の引数として渡す
トークンではなくワンタイムパスワードを使用

1. Authorization headerで渡す

HTTPにAuthorizationリクエストヘッダを追加する。
メリット：一番メジャーな手法であり。鉄板。
デメリット： SPA(Single Page Application)では使えない

詳細はこちらのスライドが図解でわかりやすいです。
参考スライド

2. URLのクエリで渡す

URLのクエリ(http://hoge?token=fuga)にトークンを渡す。
メリット: SPAでも動作できる。
デメリット: サーバーサイドのログやGAに残る（セキュリティ的によくない）
よく言われるのがwire sharkで傍受される心配があるという事象だが、暗号化されるのでそれはない。ドメイン名はわかってしまうがクエリは暗号化されている。
それよりかは、サーバーのログの取り方によっては生データが残っている可能性の方が危険度が高いといえる。

Wire Sharkとは
LAN上に流れているパケットを「見える化」するパケットキャプチャツール
～Wiresharkで「TCP/IP」モデルをのぞき見る～

残りの方法について

残る３つの手法については、まだまだ文献が少なかったり、実装方法が煩雑になりすぎるデメリットの方が大きいので、あまり推奨はされないようです。

草を生やす技術

人の役に立つ技術が素晴らしいのは誰しもが理解していますし、誰しもがそのような技術や技術が使われたサービスや商品を望んでいると思います。
でも、やっぱり開発は自分が楽しむことも重要なんじゃないかなとこの発表を見て改めて感じましたw

草を生やす技術
 Gitリポジトリ

どんなことをしたのか

GitのContributionsに人工芝を生やす。

GitのContributionsが更新されるタイミング

Gitでは以下の日付が更新されるとContributionsが更新されるみたいです。

Author Date
コミットの著者のcommit日付
git commit --dateで更新
Commit Date
コミットを取り込んだ人のcommit日付
git rebase / git commit --amendで更新

更新されるコマンドを無限に打てば無限に草を生やせるのでは？

こういうことも暇つぶし程度に遊んでみるのも面白いなと思いました。