#React #フロントエンド #設計 #React プロジェクトのディレクトリ設計をもう5〜6年同じようなディレクトリ構造でやっている 1個のプロジェクトではなく複数のプロジェクトで全部同じような感じ それであまり困ったことがない のでどんな感じにしているかをメモしていく だいたい以下の構造で作る code:plaintext /src /api /domain /components /pages /utils （任意） index.tsx （任意） ルーターやフレームワークは（だいたい）問わない #Next.js だろうと React Router だろうと React Location だろうと関係ない #Redux を使ってようと #react-query や SWR を使ってようと関係ない 裏が Firestore でも #REST API でもやはり関係がない ……という程度
Recoil について勉強した
Fecebook が新しく発表した Recoil について 自分の学習手順 Getting Started | Recoil を写経して動かす Facebook 製の新しいステート管理ライブラリ「Recoil」を最速で理解する - uhyo/blog で非同期周りを理解 公式ドキュメントの API Reference で理解 <RecoilRoot ...props /> | Recoil これは自分が写経しながら書いた型定義。色々足りてないがチュートリアルで出る範囲は理解できる。 declare module "recoil" { export type RecoilState<T> = {}; export const RecoilRoot: React.ComponentType<{ initializeState?: (options: { set: <T>(recoilVal:
TabFS
Going through the files inside a tab's folder. For example, the url.txt, text.txt, and title.txt files tell me those live properties of this tab (Read more up-to-date documentation for all of TabFS's files here.) This gives you a ton of power, because now you can apply all the existing tools on your computer that already know how to deal with files -- terminal commands, scripting languages, point-
voicodという音声入力でメモを書けるシンプルなウェブアプリケーションを書きました。 音声入力でメモができるシンプルなアプリケーションを書きました。https://t.co/EHSKnNKNaL x-callbackを使ってショートカット.app 等と連携すれば、入力内容をNotionに保存したりできます。 Note: SpeechRecognitionに対応したブラウザ(ChromeやSafari)が必要 Source: https://t.co/NnzXVjlGnF pic.twitter.com/yzoA3VIzzl — azu (@azu_re) February 10, 2022 SpeechRecognitionというウェブブラウザで音声認識をするAPIを使っているので、このAPIに対応しているブラウザが必要になります。 具体的にはGoogle ChromeやSafariなど
はじめに 私は他人のコードをレビューしたことも自身のコードを他人にレビューしてもらったこともない初学者として現在のプロジェクトに加わりました。そこから現在までの2年間毎月10から20ほどのプルリクエストをレビューし、またチームメンバー内で読みやすいコードについて議論することで、徐々に読みやすいコードを書くためのポイントが掴めてきました。 これらの経験を通じて、私が現在考えている読みやすいコードを書くためのポイントを本記事にまとめていきます✍️ 前提 言語はJavaScriptで、レガシーな環境での手続き的なJavaScriptを想定しています。 「JavaScriptの文法やメソッドは理解してきたけど、より読みやすいコードの書き方がわからない」と感じている初学者向けです。 筆者は一般的なコーディング規約や設計原則についての書籍や資料をほとんど参照していません（読んだことがある本と言えばリー
OAuthの言葉周りを整理する
OAuthの仕組みとToken認証周りの言葉はいつまで経ってもはっきり理解できないものの一つでした。 しかし最近ようやく理解できるようになってきたのでとりあえずそれぞれの言葉の指すものや定義をここで整理してみようと思います。 リフレッシュトークン リフレッシュトークンとは アクセストークンの有効期限が切れたときに、認可サーバーにアクセストークンの更新リクエスト認証をするためのトークン。 OAuth自体はリフレッシュトークンがなくとも実装できるが、リフレッシュトークンはOAuthをより便利にするためのもの。 一般的に有効期限は長い。 ないとどうなるのか アクセストークンの期限が切れたらその度にSNS認証のあのログイン画面に飛ばされてメアドとパスワードの入力が必要になる。 セキュリティに関すること 有効期限が長くても安全性に問題がないと考えられる理由としては、アクセストークンの期限切れ時にしか
脱Reduxを試みて失敗した話、その原因と対策について
さて、年末が近づいてきましたが今年も 「Redux 使うべき使わないべきか」という話で盛り上がりましたね。 僕もずっと悩める人なのですが、@f_subal さんの Tweet や @takepepe さんの Next.js の状態管理 2020 が示すように Read 要件・Write 要件の多さで使い分けるという指針には深く納得をしました。 Redux の代替になるツールやノウハウもより活発に出てきて、Redux 以外の選択肢を考えるにあたって様々な学びがあった 1 年でした。 自分も色々と Redux 以外の選択肢を試していたのですが、その中で「やっぱ Redux を使えばよかった」と思ったときがあったので、これから Redux を剥がそうと考えている人に向けてその失敗談を語りたいと思います。 自分も手探りで正解がわかっていないところなのでアドバイス・反論・指摘などがあれば頂きたいです
Intro JS から Cookie を操作する document.cookie の改善を目的とした Cookie Store API についてまとめる。 document.cookie document.cookie は、ブラウザの API における代表的な技術的負債の一つと言える。 HTML Standard https://html.spec.whatwg.org/multipage/dom.html#dom-document-cookie 基本的な使い方は以下だ。 document.cookie = "a=b" console.log(document.cookie) // a=b まず、この API の問題を振り返る。 同期 API 最も深刻なのは、 I/O を伴いながら、同期 API として定義されているところだ。 この API は古くから実装されているため、I/O は非同期
The Ultimate Guide to handling JWTs on frontend clients (GraphQL) JWTs (JSON Web Token, pronounced 'jot') are becoming a popular way of handling auth. This post aims to demystify what a JWT is, discuss its pros/cons and cover best practices in implementing JWT on the client-side, keeping security in mind. Although, we’ve worked on the examples with a GraphQL clients, but the concepts apply to any
Reactの技術質問！！これで面接を圧倒すべし！
最近フロントエンドの副業案件の面接を受けていて、聞かれた技術質問や準備しておいた方が良い質問をまとめます。(実務経験 約2年) 今回何回か面接をしましたが、正直技術質問って普段普通に実装していてもそれを言語化して答えるのって結構難しいです。 面接はコミュ力ではなくて準備力です！ しっかり準備して挑みましょう！ 前提 面接を受けたときのスキル感は下記です。 フロントエンドが主戦場で、api周りはNode.jsで基本的なApiであれば対応可能。 インフラはそこまで経験なしといった感じです。 応募ポジション: フロントエンドエンジニア 応募先のフロントエンドスタック: Next.js, TypeScript 実務経験: 1年8ヶ月 言語、フレームワークの実務経験年数 Nuxt.js(Vue) ... 1年8ヶ月 Next.js(React) ... 半年(個人開発では2年触っている) TypeS
社内認証パスワードレス化のすゝめ
パスワードレスとは 「パスワードレス」とは言葉通り「パスワードが要らない」という意味です。パスワードにはたいてい「英数字・記号を含む8文字以上の複雑な文字列にしてください」「一年ごとに変更をしてください」といった煩わしい制約が存在します。利用者にしてみれば毎回違うパスワードを考えたり覚えたりするのは負担ですし、結局簡単なものや同じようなパスワードを使いまわしがちになり、管理者としても望んだ結果ではないという問題があります。パスワードレスはそういった煩わしさから利用者・管理者双方を解放します。 ヤフーの社内認証事情 ヤフーには一万人を超える社員が在籍しており、毎日一回以上認証の機会があります。 社員が社内ツールにアクセスすると、まずはじめに共通の入口である内製の社内認証基盤へとリダイレクトされます。そこで社員は実際のログイン手段として以下の三種類の認証方式から選択します（図1）。 社内ID/
Note: Read about past updates to this technology in other blog posts about Intelligent Tracking Prevention, the Storage Access API, and ITP Debug Mode. Intelligent Tracking Prevention (ITP) version 2.3 is included in Safari on iOS 13, the iPadOS beta, and Safari 13 on macOS for Catalina, Mojave, and High Sierra. Enhanced Prevention of Tracking Via Link Decoration Our previous release, ITP 2.2, foc
この記事はTSKaigi2024での以下の私の発表内容を書き下ろしたものです。 なぜAPIに型をつけたいのか 現代のWebのシステム開発において、クライアント・サーバーともに型のある言語で開発されることが増えてきました。静的な型検査はコードの堅牢性やよりよいメンテナンス性の向上をもたらします。 プログラミング内部だけで型検査をするだけでも十分メリットはありますが、外部I/Oに対する型付けが不十分だとそのメリットを最大限に発揮してるとは言えません。外部I/Oとは、例えばWebフロントエンドだとLocalStorageやDOMからの入力値、それからネットワーク通信（今回はこれをAPIと呼びます[1]）などですね。サーバー側でいうとAPIからの入力・レスポンスやデータベースへの読み書きが該当します。 個人的な経験から言うと、Webシステムの開発におけるエラーの多くはAPIやデータベースとのやり取
こちらの記事は、Simon Holdorf 氏により2020年01月に公開された『 9 Projects to Inspire Front-End Developers in 2020 』の和訳です。 本記事は原著者から許可を得た上で記事を公開しています。 2021年改訂版はこちら！ 「ポートフォリオに役立つJavaScriptプロジェクト40選（動画あり）」 続編もどうぞ！「フロントエンド開発者のための刺激的なプロジェクト10選」 最初からはっきりと言ってしまいましょう。プログラミングに関する本を何冊読んでも、ビデオやポッドキャストを何本観たり聞いたりしても、もしあなたがより良い開発者になりたいのであれば、継続的に練習することは欠かせません。 フロントエンドの世界には、React、Angular、Vueなど数多くのフレームワークが存在します。どれも素晴らしいものばかりで、それらがなければ
技術のトレンドと開発テクニックの知見を、無料で公開します！ いかに無駄な努力をせず、効果的にトレンドに沿ったアプリ開発ができるかを研究してきました。 この記事は、定期的にトレンドに沿って更新していこうと思います。 twitterもやってます！ 今後も情報発信しようと思うので、フォローお願いします！ https://twitter.com/joer_sbt 自分が一番知見のある、フロントエンドの分野中心に見解を述べたいと思います。 結論から言うと、 React, Next.js, Typescript, Tailwind, react-query, prettier, Stylelint, auth0, tRPC, Prisma, playwright, vscode, github actions, PostgreSQL, Terraform, Flutter これらの技術スタックが今後ま
2020年のWebAuthnアップデート
Digital Identity技術勉強会 #iddance Advent Calendar 2020 12日めの記事です。 年末ということで、気楽に2020年のWebAuthn関連の話題を振り返ってみたいと思います。WebAuthnは2019年に一度W3C勧告になりましたが、その後も色々な実装での採用の拡大や、WebAuthn Level2という新しい改訂版の仕様策定の進展など、2020年も色々動きがありました。それらの中から、興味を惹かれた話題を解説していきます。 SafariでFace ID/Touch IDがPlatform AuthenticatorとしてサポートWebAuthn周りで今年最大の進展というと、やはりSafariのWebAuthn実装がFace ID/Touch IDをPlatform Authenticator（内蔵の認証デバイス）としてサポートしたことが挙げられ
🐟Twitter魚拓 - Twitter画像化保存サービス
📦 ローカル保存なので安全安心 画像はローカルストレージに保存されます。 外的要因で削除される等のリスクがありません。 ⚖ 裁判資料作成、誹謗中傷の対策に 画像には撮影日時とURLが自動挿入されます。 証拠保全や裁判資料として利用できます。 📝 PDF印刷機能 任意の画像を簡単にPDF化できます。 1ツイートを1枚に適切なサイズで印刷できます。
普段使わないけど便利なWeb API 8選
MDNのWeb APIリストから、便利で、しかし普段のサービス開発ではあまり使われていない可能性のあるAPIを8個選びご紹介します。これらのAPIはあまり知られていないかもしれませんが、特定の状況や要件に対して非常に有効であることがあります。 Beacon API Beacon APIは、非同期でブロッキングしないリクエストをWebサーバーに送信するために使用されます。このリクエストはレスポンスを期待しないため、XMLHttpRequestやFetch APIを使ったリクエストとは異なりページがアンロード(ウェブページがユーザーによって閉じられるか、別のページに移動する際)される前にブラウザがビーコンリクエストを開始し、それを完了させることを保証します。 主な使用例としては、クライアント側のイベントやセッションデータをサーバーに送信するために使用されます。このAPIは、navigator.
この記事は、文化祭実行委員会に所属する[1]現高校 3 年生 3 人で文化祭の入退場混雑管理システム「CAPPUCCINO」を 2 年間に渡り開発し、実際に運用した記録を残したものです。 ＊この記事は以下の 3 名による共同執筆です 著者・開発者: すばる (@su8ru / Twitter:@su8ru_) 高校３年生。普段は TypeScript に使われながらウェブフロントエンド技術で遊んでいます。 たけ (@takeno_hito / Twitter:@Takeno_hito) こうこうさんねんせい。コーディングよりはゲームのほうが好きです。上下二人に揉まれながらも一応リーダーをやってました。 ふわわあ (@fuwa2003 / Twitter:@ibuki2003) 高3。Vimmer。半言い出しっぺなのに後半コード書いてないとかで最近は肩身が狭い思いをしています。 1. CAP
1. 始めに こんにちは、morioka12 です。 本稿では、バグバウンティの入門として、主に Web アプリケーションを対象にした脆弱性の発見・報告・報酬金の取得について紹介します。 1. 始めに 免責事項 想定読者 筆者のバックグラウンド Start Bug Bounty Bug Bounty JP Podcast 2. バグバウンティとは バグバウンティプラットフォーム Program Type Private Programs VDP (Vulnerability Disclosure Program) Asset Type 3. プログラムの選び方 Scope OoS (Out of Scope) 4. 脆弱性の探し方 (初期調査編) Subdomain Google Dorks Wayback Machine Wappalyzer JS Analyze [Blog] Java
私が29個ものブラウザ拡張機能を使っている深いわけ
私が29個ものブラウザ拡張機能を使っている深いわけ2021.05.07 22:3020,701 Shoshana Wodinsky - Gizmodo US ［原文］ （ おおぬま ） 使っている拡張機能で性格が分かる？ 突然ですが、隣の人のブラウザを見てみてください。もしエバーノートとトレロのファビコンだけが映っていれば、その人はタイプA（競争心が激しく外交的）の完璧主義者、もしくは過度に精神が落ち着いている人物です。 知り合いに倹約家はいますか？きっと、その人のブラウザはクーポンやプロモーションコード、キャッシュバック情報を知らせる拡張機能であふれているはず。 とここで、私自身が使用している拡張機能の紹介もしたいので、その前に先日のツイッターの話を。 実は先日、80個のタブが開いたスクリーンショットを面白半分でした際、うっかり拡張機能も表示してしまったんです。すると、タブの多さよりも、
JSフレームワーク「Vue.js」を習得するためにやったことをここにまとめます。2019年現在、最優先で取り組んでいるテーマです。随時更新中！！ ※2020/01/07追記：vuex-persistedstateでローカルストレージにデータを保存 Vue.js基本 三大フレームワーク比較とHello world そもそもJSフレームとは何か？どんなことができるのか？三大フレームワークと言われるReact、Angularなどと比較した結果、Vue.jsを最初にやってみることにした。 ※参考：三大フレームワークとかSPAとか仮想DOMとかわかりにくかったのでHellow Vue.jsしてみた！ イベント（v-on）、分岐（v-show、v-if）、ループ（v-for） イベント設定の「v-on」、条件分岐の「v-show」と「v-if」、ループの「v-for」でどんなことができるのか実際にやっ
スライド概要 シングルページアプリケーション(SPA)において、セッションIDやトークンの格納場所はCookieあるいはlocalStorageのいずれが良いのかなど、セキュリティ上の課題がネット上で議論されていますが、残念ながら間違った前提に基づくものが多いようです。このトークでは、SPAのセキュリティを構成する基礎技術を説明した後、著名なフレームワークな状況とエンジニアの技術理解の現状を踏まえ、SPAセキュリティの現実的な方法について説明します。 動画はこちら https://www.youtube.com/watch?v=pc57hw6haXk
ある日の我が家 娘（４歳）「パパ、セッションとかCookieってなあに？」 娘「サーバサイドの勉強してると出てくるやつ」 ワイ「おお、今日はその質問か」 ワイ「ええでええで〜、パパが教えたるで〜」 娘「わ〜い！」 ワイ「ワ〜イ！」 例えば月曜日 ワイ「例えば、月曜日の朝は仕事する気にならへんからTwitterを見るやろ？」 娘「うん！」 ワイ「せやからTwitterのホーム画面を見るために」 ワイ「ブラウザのアドレスバーにhttps://twitter.com/homeって打ち込むんや」 ワイ「まぁ実際にはブックマークから行くんやけど、まぁ同じことや」 ワイ「つまりブラウザ君を通して、サーバ君に」 「ワイのTwitterのホーム画面のHTMLをくれや〜」 ワイ「ってことを伝える訳や」 娘「うんうん」 ワイ「でもな？」 ワイ「それもCookieを使ってセッション管理をせんと実現できひんことや
この記事ははてなエンジニア Advent Calendar 2021 の 22 日目の記事です。 昨日の記事は id:shimobayashi さんの アジャイル推進活動にここ1年で吉兆がみえてきた要因について - 下林明正のブログ でした。 Chrome の DevTools の UI 部分は Web 技術でできています。Web 技術でできているので、DevTools を DevTools で inspect することもできます。 example.com を inspect している画面を inspect している様子 このことを知ったのは、10MB くらいある JavaScript ファイルにブレークポイントを貼りつつデバッグしていたら DevTools が固まるようになってしまい、ブレークポイントを解除しようにもその前に DevTools がフリーズしてしまうので詰んだ……、という出
3rd-party cookieもIDFAもないアドテックに向けた動きまとめ 各機能紹介編｜AD EBiS マーテック研究会
Privacy Sandbox等のクッキーレスアドテックに関する前回の記事から１年が経とうとしています。１年間様々なベンダーから提案が公開され、議論も進化のペースが激しく、しばらくまとめを断念していました。今年に入ってからもGoogle (ChromeとAds）やAppleからクッキーレス、IDレスアドテックについて発表が相次ぎましたが、主要提案の開発とリリーススケジュールが明らかになり、発散から収束フェーズに入ったと思われるので、一度状況まとめておきます。 振り返り Privacy SandboxはGoogle Chromeの開発チームが提案する、3rd-party cookieとフィンガープリンティングの代替技術（サイトを跨いだ計測とターゲティング機能、アドフラウド防止機能）およびサイトを跨いだユーザ単位のトラッキング防止機能の総称です。3rd-party cookieの段階的な廃止自
XSSの脅威を考察する - セキュアスカイプラス
はじめに こんにちは！CTOのはせがわです。 先日公開された、Flatt Securityさんのブログ「開発者が知っておきたい「XSSの発生原理以外」の話」、おもしろいですね。このXSSの記事に限らず、Flatt Securityさんのブログは役に立つ記事が多い*1ので、個人的には記事が公開されるのを毎回楽しみにしています！*2 たしかに、XSSの脅威についてはなかなか理解してもらうことが難しく、また一般的にはSQLインジェクション等と比べても脅威が低く見られることも多いため、XSSの脅威について少し掘り下げて考察したいと思います。 なお、この記事は「XSSの発生原因くらいは知ってるよ」という人を対象にしています。「XSSって何だっけ」という方は クロスサイトスクリプティング対策 ホンキのキホン (1/3)：CodeZine（コードジン） などの記事を参照してください。 技術的な面からの解
はじめに Reproで開発を担当しているEdward Fox (edwardkenfox) です。2021年頃から Repro Booster というプロダクトの立ち上げに携わっており、開発を通して得た知見を共有できればと思い立ち筆を取るに至りました。4年ぶりのテックブログ執筆で少しばかり緊張していますが（？）、張り切ってやっていこうと思います。 Repro Boosterとは 2022年11月に正式リリースした、ウェブサイトの表示速度向上を実現するサービスです。「タグを入れたその日から、Webサイトが速くなる」というタグラインのもと、タグ（JavaScript）の設置だけでウェブサイトの表示速度が簡単に実現できるということで、リリース以来多くのお客様・サイトでご利用いただいています。 Repro BoosterではServiceWorkerと呼ばれる技術を最大限活用して多くの機能が実現さ
ここ2年ほど、すっかりフロントエンド開発者になっている藤田です。以前、Reactフロントエンドの状態管理ライブラリRecoilについて記事を書きました。 Recoilで快適フロントエンド開発 Recoil Syncでさらに快適フロントエンド開発 その後どうなったかというと、実はRecoilからJotaiに乗り換えていて、半年ほど経ちましたので、Jotaiについて書きたいと思います。 サイトの一行目から「Recoilにインスパイアされた」と言ってるとおり、Recoilの良いところを受け継ぎ、不便なところを無くしたような状態管理ライブラリです。 Jotaiの基本 基本はRecoilとほとんど同じで、React.useStateを便利にしたような感覚で非常に簡単に使えます。3ステップで見てみましょう。 1. Providerで囲む アプリケーション全体を<Provider>で囲みます。 impo
EKS環境下でコストが増大する事例とfreeeのアプローチ - freee Developers Hub
はじめまして。freee の SRE チームに所属している nkgw （Twitter） です。 普段はエンジニアリングマネージャーをしつつ、開発チームの新規プロダクトリリースサポートをやっています。 我々のチームは大部分のプロダクトのコンピューティングリソース (CPU / Memory など) を Amazon Elastic Kubernetes Service (EKS) で実行できるようにインフラ基盤移行 (EC2 → EKS) を進めてきました。 移行プロジェクトの大部分は 2021 年 7 月に無事終わったのですが、移行スケジュールを最優先としたため割り当てている各リソースはかなり保守的 & 過剰でした。 (移行後の性能劣化が怖かったため、EC2 時代と比較し、1.5 倍のバッファを積むなど... etc) コスト増大したグラフ その結果、 去年と比較して、コストが倍以上に跳
最初に: clean architecture は誤解されている 『Clean Architecture 達人に学ぶソフトウェアの構造と設計』(以下『Clean Architecture』)を読んだことがありますか?例の同心円の図しか知らないという人も多いでしょう。 画像出典: Robert C. Martin 「The Clean Architecture」 さて、ここでクイズです。「Clean architecture とは、 controllers や use cases、entities というクラスを作って繋げるアーキテクチャのことだ、○か×か」。どっちでしょうか? → → → 正解は×です。 あの同心円は、あくまで clean architecture の一例として『Clean Acrhitecture』で紹介されたものです。 そう、clean architecture とはア
作成日 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 Set-CookieはHTTPのレスポンスヘッダーで、サーバーからユーザーエージェントへクッキーを送信するために使われる。 また、ユーザーエージェントはサーバーに送り返すことができる。 そのため、HTTP サーバーが HTTP ユーザーエージェントに状態を保存するために使用することができる。 Cookieの利用目的 セッション管理 ログイン状態や買い物時のカートの状態など パーソナライズ トラッキング Set-CookieとCookieヘッダ HTTP の Set-Cookie レスポンスヘッダーは、サーバーがユーザーエージェントへ Cookie を送信するために使用します。 HTTP/2.0 200 OK Content-Type: text/html Set-Cookie: yummy_cookie=choco Set-Cookie: tasty_cookie=straw
XSSがあってもlocalStorageに保存するのに比べてcookieのhttpOnlyはjsから読めないので強いと言うことですが、SPAのサイトであれば、XSSを使ってAPIを呼び出し放題なので、セッションのcookieがjsで読めなくても危険性には大差がないのでは？と思うのですが私の認識がおかしいでしょうか？ - ockeghem page
徳丸本の中の人 OWASP Japanアドバイザリーボード EGセキュアソリューションズ代表 IPA非常勤職員 脆弱性診断、WAFの販売・導入、セキュリティコンサルティングをやっています。 https://t.co/F0kveu1nJM
authorization_code_flow 1�U�U ��V�U @startuml UA -> App: /login UA <-- App: Redirect UA -> 認可サーバー: /auhorize UA <- 認可サーバー: ログインページ表示 UA -> 認可サーバー: ログイン UA <- 認可サーバー: 認可（AppにXXXを許可しますか？ UA -> 認可サーバー: OK UA <-- 認可サーバー: Redierct UA -> App: /callback?code=xxx&state=xxx App -> 認可サーバー: /token に認可コードを渡す App <- 認可サーバー: AccessToken App -> App: セッションにAccessToken保存 UA <- App: ログイン完了 @enduml bad_practice_auth
というアプローチを紹介してる記事があって、なるほど？と思ったのでまとめてみる。 元記事はこちら。 Leveraging Web Workers to Safely Store Access Tokens – The New Stack 毎度のことながら、今にはじまったことではない。 元記事いわく WebWorkerであれば、メインスレッドで実行されるであろうXSSや3rdのコードから触れないので安全！ 設計としては、 メイン: まず`Worker`をロード メイン: 初期化のメッセージを`postMessage()` クレデンシャルがあるならそれを渡す ワーカー: アクセストークンの準備 受け取ったやつ or そこで`fetch()`して、オンメモリに保存 （これで準備OK） メイン: APIにリクエストしてほしいと`postMessage()` ワーカー: APIに向けてアクセストークン
STORES でフロントエンド開発をしているushironokoです。今回は Vue でも SWR のようなしくみが使え、遠くない未来で標準的に使われることになりそうだ、という話を書きます。stale-while-revalidate とはどのようなものなのかについても簡単に解説していきます。 SWR(stale-while-revalidate) とは何か Vue や Nuxt 界隈の技術者はあまり縁がないため、そもそも SWR と称されるものが何者なのかご存知でない方も多いはずです。SWR は stale-while-revalidate と呼ばれるキャッシュ戦略に基づいたデータフェッチライブラリで、React のカスタムフックとして提供されています。つまり、元々 React 向けのライブラリとして作られたものです。 github.com stale-while-revalidate
Googleは相変わらずですね。 Googleのこのデータ収集の新たな試みは悪質です。「FLoC (The Federated Learning of Cohorts: コーホートの連合学習)」と呼ばれるこの新しい広告技術は、サードパーティのcookieや、サードパーティのLocalStorageといった関連技術に代わるものです。これがユーザーのプライバシーに有害となる、危険な歩みであることは明確です。 現在、Google Chromeで試験運用され、Chromiumブラウザエンジンの一部に組み込まれています。 ここで本題です。このGoogleの新技術に対する、Vivaldiのスタンスは？ VivaldiもChromiumのベースのブラウザですから、あって然るべき疑問です。Vivaldiは確かにページのレンダリングを適切に行うためにChromiumエンジンを使用していますが、Vivaldi
Auth0をシングルページアプリケーションに組み込む方法がより簡単になりました！ #Auth0JP | DevelopersIO
Auth0のシングルページアプリケーション組み込み用モジュール「auth0-spa-js」がリリースされました。非常に簡単にAuth0を組み込むことができるようになりました。 auth0-spa-js が正式リリース！ 認証基盤サービス（IDaaS）であるAuth0。最近は国内でもかなり認知度が上がってきたように思います。 Auth0をシングルページアプリケーションに組み込む方法は、今まで auth0.js を使う方法が一般的でしたが、つい先日シングルページアプリケーションでの利用に特化したモジュール auth0-spa-js が正式リリースされました。 auth0/auth0-spa-js: Auth0 authentication for Single Page Applications (SPA) with PKCE どこが簡単になったの？ Auth0のReactサンプルアプリケーシ
スティッキーセッションを使っていなければApplication Load Balancer障害に耐えれたかも？？？ Amazon EC2をステートレスにする為にやるべきこと | DevelopersIO
スティッキーセッションを使っていなければApplication Load Balancer障害に耐えれたかも？？？ Amazon EC2をステートレスにする為にやるべきこと セッション管理が必要なWebアプリケーションを使う場合でも､スティッキーセッションを利用しない方法を説明します｡また､ログをインスタンス内に保持しない方法やAuto Scaling化についても触れています｡ はじめに おはようございます､加藤です｡煽り気味なタイトルで申し訳ございません､念の為より詳細に記載しますが､スティッキーセッションを使っていなければApplication Load Balancer障害の影響を受けるのを防げたかもしれないという内容です｡ 今後同様の障害への対処として､このブログの対応は行う価値がありますが､これだけやっておけばOKという事では無い事をご理解ください｡ 2019年8月23日にAWS
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React プロジェクトのディレクトリ構成 - fsubal
音声入力でメモを書けるウェブアプリを書いた、x-callbackを使ったアプリケーション連携
【JavaScript】読みやすいコードの書き方 - Qiita
Cookie Store API による document.cookie の改善 | blog.jxck.io
The Ultimate Guide to handling JWTs on frontend clients (GraphQL)
Intelligent Tracking Prevention 2.3
TypeScriptとGraphQLで実現する型安全なAPI実装
2020年にフロントエンド開発者が作りたい9つのプロジェクト - Qiita
技術のトレンドと開発テクニックの知見を、無料で公開します！ - Qiita
文化祭入退場・混雑管理システム "CAPPUCCINO" 開発・運用記
バグバウンティ入門(始め方) - blog of morioka12
Vue.jsを習得するためにやった事 まとめ（随時更新） - Qiita
SPAセキュリティ入門～PHP Conference Japan 2021 | ドクセル
4歳娘「パパ、セッションとCookieってなあに？」 - Qiita
DevTools の Web 技術でできている部分を覗き見る - polamjaggy
ServiceWorkerの落とし穴8選 - Repro Tech Blog
Jotaiで快適フロントエンド開発 | 株式会社ヌーラボ(Nulab inc.)
ウェブフロントに見る clean architecture の一例
クライアントの Cookie などのデータを削除する Clear Site Data という仕様について
CookieとWeb Storageの仕様を比較する
authorization_code_flow
アクセストークンをWebWorkerで扱う - console.lealog();
Vue に stale-while-revalidate がやってくる - STORES Product Blog
VivaldiはGoogleの新技術FLoCからユーザーを守ります。 | Vivaldi Browser