HTML5のLocal Storageを使ってはいけない（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Randall Degges - Please Stop Using Local Storage 原文公開日: 2018/01/26 著者: Randall Degges 日本語タイトルは内容に即したものにしました。 画像は元記事からの引用です。 初版公開: 2019/10/19 追記更新: 2024/04/05 -- リンク情報を記事末尾に移動しました 本気で申し上げます。local storageを使わないでください。 local storageにセッション情報を保存する開発者がこれほど多い理由について、私にはさっぱり見当がつきません。しかしどんな理由であれ、その手法は地上から消えてなくなってもらう必要がありますが、明らかに手に負えなくなりつつあります。 私は毎日のように、重要なユーザー情報をlocal storageに保存す
こちらのスライドは以下のサイトにて閲覧いただけます。 https://www.docswell.com/s/ockeghem/ZM6VNK-phpconf2021-spa-security シングルページアプリケーション(SPA)において、セッションIDやトークンの格納場所はCookieあるいはlocalStorageのいずれが良いのかなど、セキュリティ上の課題がネット上で議論されていますが、残念ながら間違った前提に基づくものが多いようです。このトークでは、SPAのセキュリティを構成する基礎技術を説明した後、著名なフレームワークな状況とエンジニアの技術理解の現状を踏まえ、SPAセキュリティの現実的な方法について説明します。 動画はこちら https://www.youtube.com/watch?v=pc57hw6haXkRead less
SPA認証トークンはlocalStorageでもCookieでもない、Auth0方式はいいねというお話 - @mizumotokのブログ
SPA認証トークンをどこに保存するかは論争が絶えません。localStorageやCookieがよく使われますが、Auth0は違う方法を採用しています。この記事では、Auth0のトークン管理の方式を理解でき、トークン管理上のセキュリティへの理解を深めることができます。 SPAの認証トークンをどこに保存するか ブラウザでトークンを保存できる場所 保存場所の比較 メリット・デメリット Auth0のアプローチ トークンはインメモリに保存 OpenID Connect準拠とトークン取得のUI/UXの悪化回避を両立 Auth0のjsライブラリ ログイン アクセストークンの（再）取得 図解 ログイン アクセストークンの（再）取得 自サービス内の認証だけのもっと簡易な構成 ログイン IDトークン取得 まとめ SPAの認証トークンをどこに保存するか React やVueで認証付きSPA（Single Pa
WebアプリケーションでJWTをセッションに使う際の保存先は（自分なりに説明できれば）どちらでもよいと思います - 日々量産
以下のツイートを読んで気持ちが昂ったので。 みんな、もうSNSでいがみ合うのはやめよう。 平和に好きなJWTの話でもしようよ。 JWTの格納場所はlocalStorageとCookieのどっちが好き？— 徳丸 浩 (@ockeghem) 2022年2月11日 というのも、JWTをセッションに使うときに保存先含めて一時期悩んでいたので、その時の自分の解。 ただ、考えるたびに変化しているので、変わるのかもしれない。 要約 タイトル。 あとは優秀な方々が既に色々考えておられるのでそちらを読むとよいでしょう。 SPAセキュリティ入門～PHP Conference Japan 2021 JWT カテゴリーの記事一覧 - r-weblife どうしてリスクアセスメントせずに JWT をセッションに使っちゃうわけ？ - co3k.org JWT形式を採用したChatWorkのアクセストークンについて -
iCARE Developer Meetupは、月次で開催している株式会社iCAREが主催するエンジニア向けのLT勉強会です。18回目の今回は、Ruby on Railsをテーマに行いました。サーバーサイドエンジニアの越川氏からはToken認証機能について。 Rails APIモードで開発するときの認証用のトークンはどこに保存すればいいの問題 越川佳祐氏：私からは、「Rails APIモードにおけるToken認証機能について」というテーマでLT（ライトニングトーク）をしようと思っていたんですが、スライドを作っていて「あれ、これ別にRailsだけの話じゃなくない？」と思ってしまいました。みなさんの中にも、そう思う方がいるかもしれないんですが、もうこれで作っちゃったのでご了承ください。 私は株式会社iCAREで、サーバーサイドエンジニアをしている、越川と申します。Twitterは@kossy0
サマリ CookieやlocalStorage等でセッション管理しているウェブサイトがクリックジャッキング対策していない場合、どの条件で被害を受けるかを説明する。SameSite属性のないCookieでセッション管理しているウェブサイトは、主要ブラウザのデフォルト設定ではクリックジャッキングの影響を受けない。一方、loaclStorageにトークン類を格納するウェブサイトでは、Google Chrome等のブラウザでクリックジャッキングの影響がある。また、ブラウザの設定を変更した場合の影響についても説明する。 クリックジャッキングとは クリックジャッキングとは、一言で説明すると「ウェブサイト利用者に意図しないクリック（タップ）をさせる」攻撃です。ウェブサイト上で意図しないクリックを勝手にさせられると、重大な結果になる場合があります。例えば、このURLを閲覧すると、以下のようにTwitter
🐟Twitter魚拓 - Twitter画像化保存サービス
📦 ローカル保存なので安全安心 画像はローカルストレージに保存されます。 外的要因で削除される等のリスクがありません。 ⚖ 裁判資料作成、誹謗中傷の対策に 画像には撮影日時とURLが自動挿入されます。 証拠保全や裁判資料として利用できます。 📝 PDF印刷機能 任意の画像を簡単にPDF化できます。 1ツイートを1枚に適切なサイズで印刷できます。
作成日 2023-02-28 更新日 2023-02-28 author @bokken_ tag Clear-Site-Data, storage, Cookie はじめに Clear-Site-Data というクライアントサイドのデータを削除するための仕様がある。提案自体は2015年頃からある仕様だが、最近 Safari の Beta Release にリリースされ、もうすぐ主要ブラウザで実装が出揃う形になる。¶ この記事では、Clear Site Data とはどういう仕様なのかをまとめる。¶ Clear Site Data とは Web アプリケーションでは、オフライン時にも利用できるようにリソース (データ) をキャッシュしたり、パフォーマンスを高めるため、 local マシンにリソース (データ) を保持することがある。また、サービスをログインするのに Cookie にセッショ
Cookie vs Local Storage マルウェア耐性等に差はあるか？Google Chromeによる保存時の暗号化を検証する - Flatt Security Blog
はじめに こんにちは。セキュリティエンジニアの@okazu_dmです。 皆さんはブラウザにおいてLocal StorageやCookieに格納されている値が暗号化されているかどうかを考えたことはあるでしょうか。これらWebサービスの認証・認可において使われるデータが、XSSのようなアプリケーションの脆弱性への耐性に差があるかどうかは頻繁に議論されるところです。 しかし、ブラウザに保存されたデータが暗号化されているかどうかはまた別の攻撃経路への耐性の話であり、馴染みがないのではないでしょうか。 これは、基礎知識としてLocal StorageとCookieの仕組み/挙動の紹介と比較をしつつ、Google Chromeにおけるそれらの暗号化の実装上の違いを検証する記事です。 なお、保存先のストレージとAuth0のアクセストークンのXSS耐性との関連は過去に別の記事で検証しています。興味がある方
ざっとこんな感じですかね？ WEBストレージは、保存容量が大きいですね。幅があるのはブラウザによって違うからです。あとはサーバー側にいちいちデータの通信をしないところがクッキーとの大きな違いですね。 ちなみに、ローカルストレージはオリジン単位（プロトコル://ドメイン名:ポート番号）でデータを保存するので、当然、別ウィンドウやブラウザを閉じてもデータは共有され続けます。一方、セッションストレージは同じドメインのサイトを別々のウィンドウで開いていても、それぞれが別のsessionStorageとなることに注意っす。 クッキーはWEBストレージより有効期限が自由に設定できますね。 クッキーはサーバー側からクライアントに対してクッキーをセットするようにレスポンスを返す必要があるので、サーバー側の言語で書かれることが多いです。一方、WEBストレージは完全にクライアント側の操作なので基本的に値の取得
export default { install(vue) { vue.prototype.$storage = { get(key) { // localstrageからとる return localStorage.getItem(key) }, set(key, value) { // localstrageへ保存 localStorage.setItem(key, value) }, } }, } <script> /////////////// 省略 /////////////// methods: { setLocalStrage(){ // ローカルストレージに値を保存する this.$storage.set('email', this.email) }, sgtLocalStrage(){ // ローカルストレージに値を取得する this.$storage.get('emai
![[Vue.js]Vue.jsでLocalStrageを使う - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/6056be05008653eedd56fc29e7dccab083ca5ac6/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCVnVlLmpzJTVEVnVlLmpzJUUzJTgxJUE3TG9jYWxTdHJhZ2UlRTMlODIlOTIlRTQlQkQlQkYlRTMlODElODYmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtY2xpcD1lbGxpcHNpcyZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTY2NjU4M2MwYTEwNjA0ZjcyMzg4ZWM0N2YwYjdkMTc2%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwc2FiYV91bmlfdG9yb18mdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWYyYjA1MmU5OWU2YTA4YTJiZGFmYmI4MWMwYTI2OGU0%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D5aedd39a395bf227d05e847083f81626)
はじめに localStorageは基本的に同じドメイン内（厳密にはポート番号なども一致している必要がある）でしか有効ではありませんが、postMessage API（Web Messaging API）を使用することでクロスドメインでも共有することができます。 調べてみても古い記事が多かったり、サンプルのコードが無かったりだったので自分用の備忘録も兼ねてやり方をご紹介します。 構成 【ドメインA】 ・localstorageのデータを持つ側。 ・ドメインBからの要求に応じてlocalstorageの操作を行う。 【ドメインB】 ・ドメインAに保存されているlocalstorageの値の参照や更新を要求する側。 （実際の動作確認はA側をGithub Pages、B側をローカルサーバーに置いた状態で行いました。） ドメインA側 ドメインB側からのメッセージをトリガーにlocalstorage
Vue/Jestテストのハマりどころ３選!! - RAKUS Developers Blog | ラクス エンジニアブログ
はじめに こんにちは。choreiiです。最近自チームで扱っている商材のフロントエンドのテストコードを大量に書く機会がありました。その中で大きくハマった３点について紹介します。 はじめに 環境 1. ライフサイクルフックをmock化（上書き）したい 2. テストによってcomputedを差し替えたい 3. localStorageをmock化したい まとめ 参考 環境 Vue：2.6.11 vue-test-utils：1.0.0-beta.29 Jest：23.6.0 1. ライフサイクルフックをmock化（上書き）したい 以下のようにbeforeMountで初期化処理を書いている場合、beforeMountをまるごとmock化（上書き）したくなる時があります。 <script> export default { beforeMount() { // コンポーネントで必要なデータの取得や
Updates to Storage Policy
A website can store data on a user’s device using various storage APIs: localStorage, IndexedDB, File System, etc. It’s an important capability allowing websites to be functional offline with good performance by serving local resources. However, the storage capacity is not unlimited. In fact, it is usually much smaller than a device’s disk size. Bad things could happen when the capacity is full li
HOME JavaScript入門[HTML5編] Storageのデータを消去する このページでは、Storageに書き込んだデータを消去する方法について見ていきます。 cookieの場合、データ保持期間を定めて書き込みを行ないますが、 ローカルストレージではずっとデータが残ります。それで意図的に消去しないと、 ゴミデータが蓄積されてしまうことになりかねません。 Storageのデータ消去方法 では最初にデータを消去する方法を見ておきましょう。 localStorage.removeItem(キー名) ローカルストレージの指定されたキー名のデータを消去します。 sessionStorage.removeItem(キー名) セッションストレージの指定されたキー名のデータを消去します。 localStorage.clear() ローカルストレージの全データを消去します。 sessionSto
Using JavaScript to fill localStorage to its maximum capacity
Using JavaScript to fill localStorage to its maximum capacity Earlier this week, I had to test how one web app I work on behaves when it tries to store some data in an already full localStorage. To do so, I wanted to find a way to programmatically fill localStorage to its maximum capacity using JavaScript. Knowing that the only way to detect when the localStorage is full is catching the QuotaExcee
JavaScriptで実現！ローカルストレージ(localStorage)を使ったデータ共有の基本｜DAD UNION – エンジニア同盟
Web開発の世界では、情報を効果的に保持する方法が常に重要です。特に、異なるページ間でのデータの受け渡しは、ユーザー体験の向上に直結します。以前、「JavaScriptのsessionStorageを使ってセッションキーに設定した値を別ページで表示する方法」を紹介しましたが、今回はそれと似ているものの、少し異なるテクニックをご紹介します。それは、JavaScriptのlocalStorageを活用したデータの保存と、そのデータを別ページでの表示です。 Web Storageとは Web Storageには、localStorageとsessionStorageの二種類があります。これらは、ブラウザ上でより多くのデータを安全に保存するために使われます。両者の主な違いは、データの持続性にあります。localStorageはデータを永続的に保存し、ブラウザが閉じられてもデータは保持されます。一方
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SPAセキュリティ入門～PHP Conference Japan 2021
認証用トークン保存先の第4選択肢としての「Auth0」
2023年4月においてクリックジャッキング未対策のサイトはどの条件で被害を受けるか
クライアントの Cookie などのデータを削除する Clear Site Data という仕様について
CookieとWebStorageとSessionについてのまとめ - Qiita
[Vue.js]Vue.jsでLocalStrageを使う - Qiita
https://support.ebis.ne.jp/s/article/33499
異なるドメイン間でlocalstorageを共有する方法 - Qiita
Storageのデータを消去する－JavaScript入門（HTML5編）