Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Server側でStateを使用した時の情報漏洩の危険性を見てみる
Search
Yuki Ishii
November 08, 2024
Programming
1
110
Server側でStateを使用した時の情報漏洩の危険性を見てみる
SvelteKit で Shared State を server側で使用するときは気をつけましょう。
個人情報の漏洩につながる可能性があります。
Yuki Ishii
November 08, 2024
Tweet
Share
More Decks by Yuki Ishii
See All by Yuki Ishii
Rustのweb開発を助ける 便利なツール紹介
yuki0418
1
460
Other Decks in Programming
See All in Programming
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
oukayuka
2
880
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
110
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
660
AIコーディング道場勉強会#2 君(エンジニア)たちはどう生きるか
misakiotb
1
270
Team topologies and the microservice architecture: a synergistic relationship
cer
PRO
0
1.2k
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
620
RailsGirls IZUMO スポンサーLT
16bitidol
0
140
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
190
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
120
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
530
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
280
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
1.8k
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
GraphQLとの向き合い方2022年版
quramy
49
14k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
We Have a Design System, Now What?
morganepeng
53
7.7k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Why Our Code Smells
bkeepers
PRO
337
57k
A designer walks into a library…
pauljervisheath
207
24k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
720
Balancing Empowerment & Direction
lara
1
390
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Transcript
Server側でStateを使用した時の 情報漏洩の危険性を見てみる Yuki Ishii (いっしー)
Memo - 自己紹介 1min - 目的紹介 1min - State management
について 1min - Avoid shared state on the server について 2min - 実技 4min - Conclusion 1min
自己紹介
自己紹介 - Yuki Ishii (いっしー) ポジション : Full-Stack Developer 経歴:
ex-CyberAgent 有限会社トップ・スペース はこぶね便事務局 (現 ひとりエンジニア) 使用言語: Rust, Svelte X: @Yuki_Ishii_Dev Bsky: @yuki-ishii Blog: https://blog.yuki-dev.com/ 今年から Rust.tokyo の Organizer してます
目的
今回の登壇の背景・目的 SvelteKit のドキュメントに下記のように記載されてます。
今回の登壇の背景・目的 - 理屈がわかったので実際に体験してみたい - 初学者などは気をつけないといけないため - せっかくだから Runes $state を使ってみる
- (svelte/store から writable もあるが)
Rune について
Runeとは Svelte 5 で導入された Svelte compiler をコントロールするための Keyword です。 ‘$’
から始まる関数となります。 今回は $state を使用して reactive state を管理していきます。 React の useState() に似たものです。
Shared State の仕組み
Shared State の仕組み $state などは memory 上に ‘count’ 変数 を作成します。
Shared State の仕組み - Browserの場合 Client側の場合は Browser上のメモリに変数が作成されるので他のユーザーとは共有 しません。
Shared State の仕組み - Serverの場合 Server側の場合、同じサーバーのメモリにアクセスされるので変数が共有されてしまう。 基本 Server は Long
life なので 変数が生き続けている。 個人情報などが漏れてしまう。
実際にみてみましょう
要件 - Integer を保存しておく Counter Store を作成します。 - Counter Store
は increment と decrement 関数を保有して Integer を操作しま す。 - Client側 (+page.svelte) と Server側 (+page.server.ts) で使用して 比較してみます。 - import { writable } from 'svelte/store' があるが、今回は $state を使用していき ます。
+page.svlte で使用した場合 +page.svelte 側で $state をする場合はブラウザー上のメモリに変数が作成されます。
+page.server.svelte で使用した場合 SvelteKit server 上のメモリに変数が作成されます。複数のユーザー同じリファレンスの 変数を操作するので、値が共有されてしまいます。
まとめ - Shared State (storeなど)はサーバー側では使わないようにしましょう。 - Context API と併用で対策は可能です。
ご清聴ありがとうございました