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
480
Other Decks in Programming
See All in Programming
そのpreloadは必要?見過ごされたpreloadが技術的負債として爆発した日
mugitti9
2
3.3k
Your Perfect Project Setup for Angular @BASTA! 2025 in Mainz
manfredsteyer
PRO
0
160
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
izumin5210
0
3.3k
オープンソースソフトウェアへの解像度🔬
utam0k
13
2.6k
ALL CODE BASE ARE BELONG TO STUDY
uzulla
1
150
kiroとCodexで最高のSpec駆動開発を!!数時間で web3ネイティブなミニゲームを作ってみたよ!
mashharuki
0
130
CSC305 Lecture 03
javiergs
PRO
0
240
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
820
TFLintカスタムプラグインで始める Terraformコード品質管理
bells17
2
160
Devoxx BE - Local Development in the AI Era
kdubois
0
130
Le côté obscur des IA génératives
pascallemerrer
0
140
CSC305 Lecture 04
javiergs
PRO
0
270
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
463
33k
How GitHub (no longer) Works
holman
315
140k
Done Done
chrislema
185
16k
Leading Effective Engineering Teams in the AI Era
addyosmani
1
25
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
Statistics for Hackers
jakevdp
799
220k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
The Invisible Side of Design
smashingmag
301
51k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
590
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
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 と併用で対策は可能です。
ご清聴ありがとうございました