ユーザー体験重視のSPAアーキテクチャ改 - laiso
JavaScriptフレームワークを取り巻く状況は、常に変化を続けています。近年では、サーバーサイドレンダリング（SSR）とクライアントサイドレンダリング（CSR）のバランスは、重要な検討事項です。 ChatGPTのRemix採用 2024年9月、ChatGPTがNext.jsからRemixに移行したことが明らかになりました。この出来事は、Remixの母体であるReact Router系のコミュニティで大きな話題となり、移行の理由について様々な憶測を呼びました。 JavaScriptエキスパートのWes Bos氏（学習動画教材とかを作っている人）は、ChatGPTのフロントエンドのソースコードを分析し、OpenAIがRemixを採用した理由について独自の考察を展開しました。 www.youtube.com 緊急で動画を回すWes Bos氏 Wes Bos氏の分析によると、ChatGPTのア
SPAのアプリケーションで、外部のIdPを使ってOpenID Connect によるログイン機能を開発しようと考えています。IDトークンの保存先として、ブラウザのCookieかサーバーのDBに保存するかの2つの案があると思っています。調べた限り、サーバーサイドで持つべきという意見が多いように見えますが、以下のような背景がある中で開発しても、ブラウザのCookieでは持つべきなのではないのでしょうか？ - IDトークン自体にも、個人の属性（氏名等）情報は無いことを確認している - サーバーサイドでIDトーク
SPAのアプリケーションで、外部のIdPを使ってOpenID Connect によるログイン機能を開発しようと考えています。IDトークンの保存先として、ブラウザのCookieかサーバーのDBに保存するかの2つの案があると思っています。調べた限り、サーバーサイドで持つべきという意見が多いように見えますが、以下のような背景がある中で開発しても、ブラウザのCookieでは持つべきなのではないのでしょうか？ - IDトークン自体にも、個人の属性（氏名等）情報は無いことを確認している - サーバーサイドでIDトークンの署名検証をして、IDトークンの改ざんが無いか確認する - Http Only属性：JSによるCookieへのアクセスを防ぐため - Secure属性：流出防止のため - SameSite=strict：CSRF対策のため 結論から言えば、「どちらでもよい」となります。しかし、恐らく話は
Remix の SPA モード
Remix の SPA モード 2024.01.14 Remix は React のフルスタックフレームワークで、Web 標準に基づいた API で構築されていることが特徴です。Node.js のようなサーバーサイドの JavaScript 環境で動作することを前提としています。しかし、現実の世界ではサーバーを用意せずに、静的なファイルをホスティングするだけの環境で Web アプリケーションを構築することが有効な場合も多くあります。このような需要を満たすために、Remix v2.5.0 から実験的に SPA モードが導入されました。 Remix は React のフルスタックフレームワークで、Web 標準に基づいて構築されていることが特徴です。例えばデータのミューテーションはクライアントからサーバーの API をコールするのではなく、HTML のフォームを使って行うといます。また Resp
TanStack Router（& Query）はSPA開発で求めていたものだった✨【Reactのルーティングとデータ取得】
Reactの技術選定においてルーティングとデータ取得は特に重要な役割を担っています。 もちろんNext.jsやRemixのようなフレームワークを採用すれば、個別のライブラリを追加することなくルーティングからデータ取得までフレームワークが提供するAPIを使って実装することができます。 しかし、AI ShiftのようなBtoBのサービスにおいてはSPAで十分なことがほとんどで、Next.jsなどのフレームワークの採用がtoo muchになりかねません。 この記事は2024年2月時点の技術選定において、TanStack RouterがSPAのルーティングライブラリとして非常に有力な候補であることを紹介します。 はじめに TanStack RouterとTanStack Queryの採用がSPAアプリケーションにおける最適解の一つになりうることをその特徴と実際の設計例をもとに解説します。 TanS
業務システム SPA のフロントエンド技術選定（2023年版） - KAKEHASHI Tech Blog
本エントリはカケハシ Part 2 Advent Calendar 2023の13日目の記事です。 （Part 1もおもしろい記事がいっぱいあるので、ぜひご覧ください。） はじめに こんにちは。カケハシでソフトウェアエンジニアをしている平松です。 今年、新規プロダクト立ち上げの機会があり、その際に行ったフロントエンドの技術選定について紹介したいと思います。 フロントエンドの領域は選択肢が豊富で、変化のスピードも速いため、プロダクトの要件に適した技術を選ぶことはひとつの挑戦です。 実際、フロントエンド技術選定のヒント 【令和五年度版】のアドベントカレンダー記事を読んで、その難しさを改めて感じました。 今回の新規プロダクトは、ユーザがログインして利用するtoBの業務システムです。 私はカケハシでは2度目の新規プロダクト立ち上げですが、前回の経験を活かしつつ、新しいアプローチにも挑戦しています。
SPA + WebAPI でアプリケーションを構築するときの CSRF 対策についてのメモ
モノリス(MPA)だと、CSRF 対策として CSRF トークンを置いて検証するのが主流で、だいたいフレームワークに実装されてる機能を使うけど、SPA だと HTML は静的にビルドされるので、トークンを埋め込むことができない 埋め込むなら SSR をすることになるけど、BFF と API サーバーは一般に別なので、トークンの管理が大変 セッションを管理したいのは API サーバー (CSRF トークンはセッションに置いて API 呼び出し検証する必要があるので) だけど、CSRF トークンを set-cookie できるのは BFF のサーバーなので色々大変。考えたくない まずもって(他の理由で SSR する必要があるならともかく) SSR もしたくないし 埋め込みではなく、ページロード後に API サーバーに CSRF トークンを問い合わせる案 一応できなくはないけど、読み込み時の状態
[Laravel9×React]SPA認証のログイン状態管理方法について｜ytmemo
結論 Laravel Sanctumの「sanctum/csrf-cookie」 が実行されるとCSRFトークンを`XSRF-TOKENクッキーの中に保存します。` この「XSRF-TOKEN」が取得できるかどうかでログイン状態を判定する手法が良いと思います。 CSRF Protection | Laravel Readouble XSRF-TOKENはフロントエンドからも取得できます。Cookieへの保存なので他のサイトから窃取される心配もないです。便利な「react-cookie」というライブラリもあり読み書きも簡単、ログアウト時に削除する設計で良いと思います。 はじめに 何を書いているか Laravel9(sanctum)でAPI側を、Reactでフロントエンドを開発するプロジェクトの場合、どのようにユーザーのログイン状態を管理するの良いのか、調査しつつ諸々試して失敗しつつ、こうする
![[Laravel9×React]SPA認証のログイン状態管理方法について｜ytmemo](https://cdn-ak-scissors.b.st-hatena.com/image/square/46f2070c3edbd0687b6fb0f85291307e1d4f3a09/height=288;version=1;width=512/https%3A%2F%2Fytmemo.com%2Fwp-content%2Fuploads%2F2022%2F10%2Feyecatch23.jpg)
サービス開発リファレンスを使ってCSRF対策をしてみよう | Fintan
はじめに こんにちは。西日本テクノロジー＆イノベーション室の齊藤です。 私の所属する西日本テクノロジー＆イノベーション室では、2020年9月末に「SPA + REST API構成のサービス開発リファレンス（以下サービス開発リファレンス）」を公開しました。こちらは、シングルページアプリケーション（以下SPA）とREST APIから構成されるWebアプリケーションを開発する際に活用して頂けるコンテンツになっています。 前回のブログでは、登録したTodoをCSVファイルとしてダウンロードする実装をご紹介しました。 今回はSPA + REST API構成でのCSRF対策について解説します。 サービス開発リファレンスを使ってWebアプリケーションを作成してみよう＜導入編＞ サービス開発リファレンスを使って1画面作成してみよう サービス開発リファレンスを使ってREST APIを1つ作成してみよう サー
React + Rails(API)で tokenを用いたCSRF対策の基礎(のメモ) - kappaZZ’s blog
cookieを利用した認証を採用した場合、必然的にCSRFの対策を行う必要がある。 Railsのようなモノリシックなフレームワークを用いている場合、デフォルトでCSRF対策が入っている(ことが多い)ためCSRFの考慮する必要はないが、 React + RailsのようなSPA環境では、CSRF対策に関してもある程度自分で手を加える必要がある。 試しにやってみたので、軽くメモ。 とりあえず動く程度のメモなので、セキュリティ的に色々不都合はあるかもしれない。今後要調査。 やったこと API側 (準備) - CSRF用の機能を有効化する - include ActionController::RequestForgeryProtection(in application_controller.rb) - apiモードだとデフォルトで含まれていない様子なので、includeが必要そう (token
SPAセキュリティ超入門 | ドクセル
スライド概要 SPA(Single Page Application)の普及が一層進んでおり、従来型のMPAを知らないウェブ開発者も生まれつつあるようです。SPA対応のフレームワークでは基本的な脆弱性については対策機能が用意されていますが、それにも関わらず、脆弱性診断等で基本的な脆弱性が指摘されるケースはむしろ増えつつあります。 本セッションでは、LaravelとReactで開発したアプリケーションをモデルとして、SQLインジェクション、クロスサイトスクリプティング、認可制御不備等の脆弱性の実例を紹介しながら、現実的な対策について紹介します。LaravelやReact以外のフレームワーク利用者にも役立つ説明を心がけます。 PHPカンファレンス2022での講演資料です。 PHPカンファレンスでの動画URL https://www.youtube.com/watch?v=jZ6sWyGxcCs
PHPカンファレンス2022にてSPAセキュリティ超入門の話をします
今年もPHPカンファレンスにてトークさせていただくことになりまして、以下のようなお話をいたします。 日時：9月25日(日) 14:40〜15:40 場所：大田区産業プラザPiO および YouTube 費用：無料 講演タイトル：SPAセキュリティ超入門 申し込み: connpass アジェンダ: SPA(Single Page Application)の普及が一層進んでおり、従来型のMPAを知らないウェブ開発者も生まれつつあるようです。SPA対応のフレームワークでは基本的な脆弱性については対策機能が用意されていますが、それにも関わらず、脆弱性診断等で基本的な脆弱性が指摘されるケースはむしろ増えつつあります。 本セッションでは、LaravelとReactで開発したアプリケーションをモデルとして、SQLインジェクション、クロスサイトスクリプティング、認可制御不備等の脆弱性の実例を紹介しながら
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
SPA開発とセキュリティ - DOM based XSSを引き起こすインジェクションのVue, React, Angularにおける解説と対策 - Flatt Security Blog
Vue.js logo: ©︎ Evan You (CC BY-NC-SA 4.0 with extra conditions(It’s OK to use logo in technical articles for educational purposes)) / React logo: ©︎ Meta Platforms, Inc. (CC BY 4.0) / Angular logo: ©︎ Google (CC BY 4.0) はじめに こんにちは。株式会社Flatt Securityセキュリティエンジニアの森(@ei01241)です。 最近のJavaScriptフレームワークの進化は著しく、VueやReactやAngularは様々なWebサービスに採用されています。そのため、多くのWebサービスがSPAを実装するようになりました。JavaScriptフレームワークは便利な一方で
【TypeScript】Next.js + Tailwind CSSを使用してさくっとSPAを作る方法
Next.js で簡単な SPA の雛形をつくる際の手順です。 ホームページを Flutter Web から Next.js に移行した際に少し躓いたので整理して記録します。 追記：この記事では従来のWEBアプリケーション(MPA)の対義語としてSPAと表記しています。Next.jsがSPAに分類されるかは様々な意見があるので混乱を招いたかもしれません。たくさんのLIKEと反応ありがとうございます。 環境 執筆時点での各種バージョンです。 Node: 14.17 Next.js: 12.0.4 Tailwind CSS: 2.2.19 TypeScript: 4.5.2 Next.js プロジェクトの作成 下記コマンドで Next.js プロジェクトを作成します。 CreateNextApp を使用すると簡単に TypeScript 対応できて便利ですね。 ソースファイルを src 配下に
SPAセキュリティ入門～PHP Conference Japan 2021
2. 徳丸浩の自己紹介 • 経歴 – 1985年 京セラ株式会社入社 – 1995年 京セラコミュニケーションシステム株式会社(KCCS)に出向・転籍 – 2008年 KCCS退職、HASHコンサルティング株式会社(現社名:EGセキュアソリューションズ株式会社)設立 • 経験したこと – 京セラ入社当時はCAD、計算幾何学、数値シミュレーションなどを担当 – その後、企業向けパッケージソフトの企画・開発・事業化を担当 – 1999年から、携帯電話向けインフラ、プラットフォームの企画・開発を担当 Webアプリケーションのセキュリティ問題に直面、研究、社内展開、寄稿などを開始 – 2004年にKCCS社内ベンチャーとしてWebアプリケーションセキュリティ事業を立ち上げ • 現在 – EGセキュアソリューションズ株式会社取締役CTO https://www.eg-secure.co.jp/ –
SPA の CSRF 対策や CORS について検証する - 30歳からのプログラミング
2021/4/23 追記 Twitter にて指摘を頂いたので追記。 詳細は当該ツイートを読んで頂きたいが、プリフライトリクエストを CSRF 対策として用いるのは適切ではないという内容。 この記事に書いた仕組みや挙動そのものが間違っているわけではないのだが、プリフライトリクエストはそもそもセキュリティのための機能ではない。 そして、詳しくは記事の続きを読んでほしいが、プリフライトリクエストが発生するということは、HTTP メッセージのやり取りが 1 回増えるということなので、パフォーマンス上、望ましくない。 代替案がないならともかく、リクエストのオリジンをチェックすれば対応できるのだから、敢えてプリフライトリクエストを利用する必要はない。素朴に書けば以下のようになるだろうか。 const ALLOW_ORIGIN = `http://localhost:${constants.SPA_P
SPAでのログイン認証とCSRF対策の実装(JWT使用) - Web備忘録
SPA(Vue + RailsAPI)で何とかログイン認証機能 + CSRF対策を実装したので、ブログにメモしておきます。 実装の概要 使用した技術たち JWT(JsonWebToken) アクセストークン、リフレッシュトークンって？ WebStorage JWTSession 遷移の概要(より正確な内容は要Gem参照) トークンストアの設定 バックエンド側の仕事 Signinコントローラー フロントエンド側の仕事 axiosのインスタンスの作成 main.jsでインスタンスの読み込み インスタンスの使用方法 ただ、ブラウザによって上手く動作しないものが… 3rd party cookiesとは？ 余談 実装の概要 今回は、JWT + (WebStorage + Cookie）を使って実装しました。（後に用語説明します） WebStorageとJWTによるセッションの管理（ログイン状態の管
C#でSPAが実現できる、Blazor WebAssemblyのはじめかた
ASP.NET Coreは、ASP.NET 4.xをベースにしていますが、Webフォームには対応していません。また、開発言語にVisual Basicが利用できなくなりました。 一方、ASP.NET Coreになって、新たなライブラリ、フレームワークが提供されています。Razor Pagesは、ASP.NET Core 2.0から利用できる機能で、MVVMパターンのWebアプリケーションを実現できるフレームワークです。 MVVMパターン Razor Pagesでは、Viewにあたる部分はRazor構文によるcshtmlファイル（HTMLを拡張して、C#コードなどを含めることができる）に、ViewModelはそのcshtmlから生成されるC#のクラスになっています。このあたりの構造は、その後にリリースされた、Blazorフレームワークでも同様となっています。 Blazorは、通常JavaSc
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SPAの歴史とRemix SPAモードという到達点 / the SPA's chronicle reaches to remix
SPAセキュリティ入門
