플랫폼이 민감한 데이터를 어떻게 보호하는가?
Flutter-web + iframe 환경에서 FlutterSecureStorage가 Safari에서 hang하는 문제를 트러블슈팅하면서, 브라우저 보안 모델 / 인증 패턴 / 모바일 보안 아키텍처를 체계적으로 공부하기 위해 만든 레포입니다.
오픈닥터 서비스는 Flutter-web(레거시)에서 Next.js로 점진적 마이그레이션 중이다. Next.js가 iframe으로 들어가는 구조에서, Safari의 ITP(Intelligent Tracking Prevention)가 iframe 내 IndexedDB 접근을 침묵 차단하면서 FlutterSecureStorage.read()가 무한 대기(hang)하는 문제가 발생했다.
이 문제를 해결하면서 "왜 Safari만 이런가?", "FlutterSecureStorage는 내부적으로 뭘 쓰는가?", "모바일에서는 왜 안전한가?"라는 질문이 이어졌고, 그 답을 찾기 위해 아래 4가지 주제를 정리한다.
| 순서 | 주제 | 디렉토리 | 핵심 질문 |
|---|---|---|---|
| 1 | 브라우저 보안 모델 | 01-browser-security-model/ |
Same-Origin Policy, ITP, 쿠키/스토리지 격리는 어떻게 작동하는가? |
| 2 | 웹 인증 패턴 | 02-web-auth-patterns/ |
토큰을 쿠키 vs 메모리 vs 스토리지 중 어디에 저장해야 하는가? |
| 3 | 모바일 앱 보안 기초 | 03-mobile-app-security/ |
Keystore/Keychain은 뭐고, 앱 샌드박스는 어떻게 작동하는가? |
| 4 | OS 보안 아키텍처 | 04-os-security-architecture/ |
TEE, Secure Enclave는 뭐고, 하드웨어 레벨 보안은 어떻게 동작하는가? |
각 디렉토리에 README.md(개념 정리)와 questions.md(스스로 답해볼 질문)가 있다. 순서대로 진행하되, 1~2번이 실무와 가장 직결된다.