宮水の日記

宮水の日記

主に書評や資格取得について記事を書いています。

cookie_js【JSライブラリ1日1個】

 JSライブラリを1日1つ紹介する

1日1つJSのライブラリを調べる、第3弾です。 

① ライブラリに関するドキュメントを最初から最後まで読む

② 実際に使ってみる or 使い方を調べる

③ ライブラリを3行で説明する

 

本日は、cookie_jsのドキュメントを読みました。

 

ドキュメント

github.com

 


 

実際に使ってみる

今回もこちらを使用しました。

unpkg.com

 

console.logでcookiesを出力してみます。

 

f:id:kattyan53:20191213220959p:plain

 

色々取れましたが、アプリケーション側でないと

cookie.set('key', 'value');

とかできないのでしょうか...

 

f:id:kattyan53:20191213221102p:plain

他にも、cookiesをセット、取得、削除ができるようです。

 

そもそもcookieってなんだっけ...

JavaScriptスクリプトからコンピューターに勝手に書き込むことは許されていません。その代わりに、ブラウザー側でCookieと呼ばれる仕組みを提供しています。Webアプリでは、このCookieを利用することで、クライアントに対して小さなテキストを保存できるようになります。

JavaScript本格入門より)

 

弊社のコードでは、フロント側から言語の設定についてCookieをsetしているのを発見しました!

 

 わからなかったところ

今はWebStorageもあり、似たようなことができるのかな?と思ったのですが、どうしてこのプラグインを導入していたのか、何が違うのかもう少し調べてみようと思いました。

このライブラリを使わないと、アプリケーション側からCookieの設定ができないとかですかね...?

 

3行でまとめる

- cookie_jsはCookieを簡素化した小さなJavaScriptライブラリ

Cookieの設定、取得、削除が可能

 

フィードバック

- ブラウザで使えるストレージにはCookieのほかにLocal/Session Storageもあるし、IndexedDBやCache APIもある。

ウェブ ストレージの概要  |  Web  |  Google Developers

- Cookieは多くのブラウザで4KB程度のデータしか保存できないが、Local/Session Storageは5MBまで保存できる。

CookieJavaScript APIは `document.cookie` しかなくて使いにくい(だから cookie_js がある)が、Local/Session StorageはネイティブのJS APIがあり、StorageEvent を subscribe することもできる。IndexedDBに至っては、非同期に処理されるので大量の読み書きにも耐え、構造化データをトランザクションを活用しながら保存することが可能。

- その他の仕様は以下のページがよくまとまっているので読む。

javascript.info

ja.javascript.info

 

- local storageに関しては、これを使ってはいけないという翻訳記事が物議を醸し出していた。Auth0の記事やOWASPのチートシートも合わせてみてみるとより理解が深まる。

HTML5のLocal Storageを使ってはいけない(翻訳)

- local storageにトークン入れちゃいけない話いまだに納得できない→他にもっと悪いことできそうだし、悪意があるパッケージが入ってくるケースよりも他の脆弱性を作り込んじゃうケースの方が多いかもしれない。

The npm Blog — Details about the event-stream incident

 

- 最近はCookieを利用してマーケティング目的のトラッキングを規制する動きがあり、その発端となったEUの the ePrivacy Directive は通称Cookie法、などとも呼ばれている。そのうち日本にくるときのためにちょっと知っておいてもいいかも。

【巨額制裁金リスクから自社を守れ】すぐにわかるCookie規制への対応ポイント|Global Reach

 

今日は仕事の進捗がよくなく、全然調べることができなかったので明日、今週のライブラリで気になったところを調べる続きをやります!

以上です!