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
ぬるぬる動かせ! Riveでアニメーション実装🐾
kno3a87
1
210
開発チーム・開発組織の設計改善スキルの向上
masuda220
PRO
20
11k
Tool Catalog Agent for Bedrock AgentCore Gateway
licux
6
2.4k
時間軸から考えるTerraformを使う理由と留意点
fufuhu
15
4.7k
「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点で安全に使うには
taitotnk
0
840
パッケージ設計の黒魔術/Kyoto.go#63
lufia
3
430
ソフトウェアテスト徹底指南書の紹介
goyoki
1
150
テストカバレッジ100%を10年続けて得られた学びと品質
mottyzzz
2
580
Navigation 2 を 3 に移行する(予定)ためにやったこと
yokomii
0
140
FindyにおけるTakumi活用と脆弱性管理のこれから
rvirus0817
0
500
「待たせ上手」なスケルトンスクリーン、 そのUXの裏側
teamlab
PRO
0
500
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
4
1.4k
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
51
5.6k
Being A Developer After 40
akosma
90
590k
Bash Introduction
62gerente
615
210k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
112
20k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Documentation Writing (for coders)
carmenintech
74
5k
How to Ace a Technical Interview
jacobian
279
23k
What's in a price? How to price your products and services
michaelherold
246
12k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Building an army of robots
kneath
306
46k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
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 と併用で対策は可能です。
ご清聴ありがとうございました