タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
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
XSSがあってもlocalStorageに保存するのに比べてcookieのhttpOnlyはjsから読めないので強いと言うことですが、SPAのサイトであれば、XSSを使ってAPIを呼び出し放題なので、セッションのcookieがjsで読めなくても危険性には大差がないのでは？と思うのですが私の認識がおかしいでしょうか？ - ockeghem page
徳丸本の中の人 OWASP Japanアドバイザリーボード EGセキュアソリューションズ代表 IPA非常勤職員 脆弱性診断、WAFの販売・導入、セキュリティコンサルティングをやっています。 https://t.co/F0kveu1nJM
Auth TokenをlocalStorageに入れようが、cookieに入れようがどっちもXSS危険性には無防備（同ドメイン内なら ...） - Qiita
Auth TokenをlocalStorageに入れようが、cookieに入れようがどっちもXSS危険性には無防備（同ドメイン内なら ...）JavaScriptcookieJWTxsstoken tokenを保存する場所 localStorage cookie cookie (http only) メモリ内 (変数) よく言われるのが JWT tokenをlocalStorageに入れるべきではない ということ。 理由としてはJavascriptで簡単に読めてしまうので、XSSがあった場合意図しないスクリプトを動かされてしまい、結果としてtokenが盗まれるというもの。 対応策として cookie (http only) を色んな所で推奨してる。 https://techracho.bpsinc.jp/hachi8833/2019_10_09/80851 http://cryto.net
JS で wasm のダウンロードや TypedArry を通じた操作をやってると、コード内や localStorage にバイナリを埋め込みたいときがあります。 考え方 JS の内部エンコーディングは UTF16 と決められているので、UTF16で表現可能な範囲を1文字として、バイナリをインライン化すればサイズが小さくて済むはず Chrome は CompressionStearm でブラウザ内で deflate できるので、あれば圧縮する https://chromestatus.com/feature/5855937971617792 Chrome ではない場合、deflate 処理は飛ばしてそのまま。localStorage の読み書きなら途中でブラウザ自体のサポート増える/消えるなどしない限り一貫性は取れる 今回はやってないが、インラインJSに埋め込む場合、50kb を超えたあた
Using localStorage in Modern Applications: A Comprehensive Guide When it comes to client-side storage in web applications, the localStorage API stands out as a simple and widely supported solution. It allows developers to store key-value pairs directly in a user's browser. In this article, we will explore the various aspects of the localStorage API, its advantages, limitations, and alternative sto
window.localStorage がプライバシー設定によってブロックされた場合に SecurityError を投げなくなりました | Firefox サイト互換性情報
window.localStorage は従来、ユーザーのプライバシー設定によって使用できない場合、具体的には Cookie が無効となっている際に SecurityError 例外を投げていました。Firefox 67 以降、このプロパティはそうした場合単に null となり、JavaScript に適切な try-catch 処理が書かれていないため一部のサイトが読み込まれない問題を解消します。 // なお、window.localStorage が null となる場合、 // これは引き続き TypeError を投げます window.localStorage.setItem(key, value); // そのため以下のように書く必要があります。 const storage = window.localStorage; if (storage) { // ストレージを使用 st
はじめに localStorageは基本的に同じドメイン内（厳密にはポート番号なども一致している必要がある）でしか有効ではありませんが、postMessage API（Web Messaging API）を使用することでクロスドメインでも共有することができます。 調べてみても古い記事が多かったり、サンプルのコードが無かったりだったので自分用の備忘録も兼ねてやり方をご紹介します。 構成 【ドメインA】 ・localstorageのデータを持つ側。 ・ドメインBからの要求に応じてlocalstorageの操作を行う。 【ドメインB】 ・ドメインAに保存されているlocalstorageの値の参照や更新を要求する側。 （実際の動作確認はA側をGithub Pages、B側をローカルサーバーに置いた状態で行いました。） ドメインA側 ドメインB側からのメッセージをトリガーにlocalstorage
ReactフックでlocalStorageを使用する方法 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
このチュートリアルでは、ローカルストレージにアクセスし、それを使用してアプリケーションの状態を保存する方法を説明します。 ※前提条件として、Reactの概念およびReactフックの基本を理解していることを確認してください。 Webストレージとは フォームコンポーネントの作成 フォーム入力をlocalStorageに保存 localStorageに保存されたデータの削除 カスタムフックとしてカプセル化 データ検証とエラー処理 localStorageでuseEffectフックを使用 getItem()でデータの読み取り 最後に ユーザーからユーザー名とパスワードを受け取り、それをユーザーのコンピュータのlocalStorageにデータとして保存するReactアプリケーションを構築します。 Webストレージとは 2つの主要なWebストレージメカニズムがあります。 React localStor
Nuxt.jsでログインをどうやるか、そしてCookieからlocalStorageへ - DJ lemon-Sour's diary (prod.hisasann)
🦑 まえがき Nuxt.js でいわゆる basic なログインの仕組み （ユーザーID・パスワードを入れる系）を作ろうとすると、なかなか大変で、これは Cookie が SSR 時と CSR 時に API サーバーまで勝手に送信するしないの話などあり、結構気にする箇所は多くなります。 Cookie を使ったパターン では、 Cookie はあくまでも Nuxt.js 側のみで使用し、 BFF との通信は、リクエストヘッダーにログイントークンをのせて送信しています。 また、ログイン処理後はレスポンスヘッダーからログイントークンをもらい、それを Cookie に保存します。 それについての考察は以下にまとめております。 Nuxt.jsを使ったログイン周りの仕組みについて · hisasann/typescript-nuxtjs-boilerplate Wiki また、 OAuth 版ではあ
JavaScript localStorageの使い方 データ保存と削除 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
本日はJavaScriptでローカルストレージを使用する方法について学習します。 localStoragとは？ localStorageの使用方法 ローカルストレージを使用する LocalStorageへのオブジェクトの保存 最後に Web StorageまたはlocalStorageとはなんなのか、メリットやデメリットそして安全性などに関する詳しい事は下記で解説しております。 dev-k.hatenablog.com このチュートリアルの前提条件は、JavaScriptに関する基本的な考え方を持っていることです。 事前準備 ・JSのある程度の知識 ・Web Storageのメリット・デメリット・安全性等 ・テキストエディタ(VS Codeなど) ・ブラウザはChromeを使用します それでは少しlocalStoragのおさらいだけしましょう。 必要ない方はスキップして頂いて構いません。
JavaScriptを使ってlocalStorageにデータを保存する方法と、保存したデータを取得、または保存されているデータを破棄する方法です。 また、有効期限やデータの保存量制限、その他注意点も紹介しています。 localStorageが使えるか確認するlocalStorageの処理を実装する場合、window.localStorageでアクセスしているブラウザがlocalStorageが使えるか確認処理を記述して、使える場合のみに処理を実装します。 if (window.localStorage) { //localStorageの処理 }localStorageへデータを保存するlocalStorageへデータを保存するにはlocalStorage.setItem()を利用します。 localStorage.setItem()は保存するデータのキー名と文字列データを設定して実行しま
環境 Vue.js 2.5.17 Vuex 3.0.1 webpack 3.12 前提条件 コンポーネント毎にdataオプションで保持データを管理するのは厳しいので、Vuexの状態管理で一元管理することが前提です。その方が、ストアの管理だけに集中できますので楽ちんです。 dataオプションからVuexへの移行は配列構造を除いて難しくありませんでした。 オブジェクトの配列をVuexのストアと各コンポーネントに設置するコントロールへバインドする方法だけ模索する必要がありました。その記事はこちら。 localStorageの読み込みと保存の実装 本当はプラグインにした方がよさそうですがはじめての実装なので、Vuexのストア構造内に直接実装します。分けたくなったら分ければいいかなぁという感じです。 シミュレーション用のデータ構造として以下のようなstore構造があります。 ※ getters、mu
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>canvas画像をLocalStorageに保存</title> </head> <body> <canvas id="mycanvas" width="800" height="500"></canvas> <script> window.onload = function () { var canvas = document.getElementById("mycanvas"); var ctx = canvas.getContext("2d"); var img = new Image(); img.onload = function () { ctx.drawImage(img, 0, 0); window.localStorage["キー"] = canvas.
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
この記事は CBcloud Advent Calendar 2019 19日目の記事です。 CBcloud 徳盛です。 HTML5のLocal Storageを使ってはいけない（翻訳）やAuth0のドキュメント内のWhere to Store Tokens に記載されている通り、LocalStorageに保存するのはアンチパターンだと認識してはいますが、その理由を自分の言葉で説明しろと言われると無理だったので調べてみました。 CORS時のCookieの挙動をある程度理解する まずCookieとは サーバがブラウザに送信する小さなデータです。この情報はブラウザに保存され、次のリクエスト時に保存されたデータがサーバへ送信されます。 詳しくはこの辺りを参照してください。 ・HTTP Cookie - HTTP | MDN - Mozilla ・HTTP Cookieとは：超入門HTTP Cook
localStorageを使ったVueプロジェクトのユニットテストがnot definedでコケる件 | DevelopersIO
localStorageを使ったVueプログラムを書いて、それのユニットテストを書いたところコケてしまいました。調べてみるとVueに限らず、フロントのユニットテストではあるあるなようですので、忘れないためにもエントリにしておきます。 こんにちは。サービスグループの武田です。 ユニットテスト、書いてますか？ある程度大きくなってしまったプロダクトにゼロからテストを書くのはたいへんですよね。というわけで、小さいうちからテストは書くべきです。今回スモールスタートでlocalStorageを使ったプログラムを書いて、それのユニットテストを書いたところコケてしまいました。調べてみるとVueに限らず、フロントのユニットテストでは あるある なようですので、忘れないためにもエントリにしておきます。 環境 今回の検証環境は次のような環境になっています。 $ node -v v10.15.3 $ vue -V
GitHub - bgstaal/multipleWindow3dScene: A quick example of how one can "synchronize" a 3d scene across multiple windows using three.js and localStorage
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Result ダークモードにも使えるテーマスイッチです。サンプルは簡単なものですがスタイルはCSSで制御しているので応用は効くと思います。 JavaScriptは切り替えとlocalStorageへの保存に利用されています。 javascript//デフォルト設定 const pressedButtonSelector = '[data-theme][aria-pressed="true"]'; const defaultTheme = 'green'; //buttonにセットしたカスタムデータ属性に準じてテーマ切り替え const applyTheme = (theme) => { const target = document.querySelector(`[data-theme="${theme}"]`); document.documentElement.setAttribute
仕様 永続化したデータが localStorage に保存されている アプリ初期化 (初回ロード) 時に localStorage にアクセスしてデータを state に変換する state に基づきコンポーネントの出し分けを行う 環境 Next.js 13.2.1 React 18.2.0 TypeScript 4.9.5 jotai 2.0.3 localStorage にデータを保存し state として扱うライブラリには jotai を使うことにした cf. React 👻 jotai を使うと localStorage を使った永続化が簡単だった件について 問題 アプリ初期化時に localStorage にアクセス可能になるまでにラグがある localStorage のデータを state に変換するまでにラグがある (state の更新が非同期のため) 永続化 state
Webサービスのドメインを変更したい機会があり、Local Storage や IndexedDB に保存した情報(認証情報等を含む)をクロスオリジンでセキュアに移行する必要がありました。 小さな実装ですが気をつけることがちらほらあるので、具体的なシナリオを元に実装を紹介します。 シナリオ LocalStorage の some-data というキーに格納されたデータを https://src.example.com から https://dest.example.com に移行するシナリオを考えます。 以下の図のような処理を実装します。 移行元の実装 (src) まず、移行元では window.parent (=iframeの親)にデータを送ります。移行データだとわかるよう、data-transfer: prefix をつけて送信しています。 この時、Window#postMessage
JavaScriptで実現！ローカルストレージ(localStorage)を使ったデータ共有の基本｜DAD UNION – エンジニア同盟
Web開発の世界では、情報を効果的に保持する方法が常に重要です。特に、異なるページ間でのデータの受け渡しは、ユーザー体験の向上に直結します。以前、「JavaScriptのsessionStorageを使ってセッションキーに設定した値を別ページで表示する方法」を紹介しましたが、今回はそれと似ているものの、少し異なるテクニックをご紹介します。それは、JavaScriptのlocalStorageを活用したデータの保存と、そのデータを別ページでの表示です。 Web Storageとは Web Storageには、localStorageとsessionStorageの二種類があります。これらは、ブラウザ上でより多くのデータを安全に保存するために使われます。両者の主な違いは、データの持続性にあります。localStorageはデータを永続的に保存し、ブラウザが閉じられてもデータは保持されます。一方
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ブラウザ内でバイナリを圧縮してコードやlocalStorageに埋め込む
Using localStorage in Modern Applications - A Comprehensive Guide | RxDB - JavaScript Database
異なるドメイン間でlocalstorageを共有する方法 - Qiita
JavaScript | localStorageへのデータ保存と取得・破棄、注意点など | ONE NOTES
【Vue.js】Vuex + LocalStorageで入力内容をブラウザに保持する | kawadeblog
画像をlocalStorageに保存、取得 - Qiita
SPA認証トークン、Cookieに保存するか？LocalStorageに保存するか? - Qiita
localStorageで保存可能の、シンプルなテーマ切り替え
Next.js localStorage で永続化したデータを初期化するまでローディングにしたいのメモ
クロスオリジンでLocalStorage等のデータをセキュアにやりとりする
www.pointheart.net
fusetter.com
shibuya24.info
www.sallowsl.com
www.green-up1.com
cinemandrake.com