PWA(Progressive Web Apps)

소개

웹 개발에서의 SPA(Single Page Application)과 함께 떠오르는 하나의 트렌드.

Web에서 Native App과 같은 경험을 할 수 있다?

Web이 오프라인에서도 동작한다?

Web이 백그라운드로 동작한다?

Web인데 사용자한테 알람도 보내? 뭐야 앱이야?

PWA가 왜 필요한가?

PWA의 기능

PWA(Progressive Web Apps)란 무엇인가? 장점과 구현 사례

• TWA(Trusted Web Activity)

  플레이스토어에서 다운도 가능(몇 가지 기준을 통과하면)

  앱 내부에서 브라우저 인스턴스가 구동되는데,

  PWA로 구성된 앱의 홈페이지를 시작 페이지로 하는 모바일 애플리케이션임.

  앱인데, 거기서 웹이 돌아가는데, 화면이나 기능은 앱같은 ..?

동작 원리

우선 짚고 넘어갈 점은, App이 아니라 WEB이기 때문에 HTML, CSS, Javascript를 그대로 이용한다는 점임.

• ServiceWorker 소개

  브라우저와 서버 가운데에서 동작하는 Javasript 코드.

  (ServiceWorker 이용하는 경우) 도메인당 1개의 ServiceWorker 존재하고, 홈페이지 접속 시에 자동으로 등록 및 동작.

  

  브라우저와 독립적인 스레드로 동작.

  웹캐시를 이용해서 오프라인 상태일 때에도 사이트가 동작하도록 함.

  브라우저와 서버 사이의 request, response를 intercept 할 수 있는데, 이 과정에서 cache에 데이터가 존재할 경우에는 cache 데이터를 반환함.

  

  

  앱 다운로드 없이도 앱 아이콘을 홈 화면에 추가할 수 있고, 이 경우에 URL바 없는 브라우저와 같이 동작함(일반적으로 느끼기에 앱과 똑같음)

  iOS 11.3 PWA demo

  사용자의 동의를 얻은 경우에는 푸시 알람을 보낼 수 있다.

  푸시 알람을 위해서 FCM(Firebase Cloud Messaging)과 같은 서비스를 이용한다.

  

  

  ServiceWorker은 백그라운드에서 동작하기 때문에, 해당 웹사이트가 꺼져 있는 경우에도 푸시 알람을 받을 수 있다. (브라우저 프로세스가 살아있다면)

  본인 브라우저의 Service Worker 확인 : chrome://serviceworker-internals/?devtools

  

논문 소개

2018 CCS, KAIST 손수엘 교수님 랩실

Pride and Prejudice in Progressive Web Apps: Abusing Native App-like Features in Web Applications

논문 발표 당시에 PWA에 대해 보안, 개인정보 노출에 대해 체계적으로 조사한 첫 논문.

다양한 관점에서 취약점 & 개인정보 노출을 발견하였는데,

• Phishing risk가 존재하는 브라우저 디자인 설계

  Firefox와 Android 용 Samsung Internet에서 도메인 이름이 없이 섬네일 아이콘과 메시지만 전달하였음. (Youtube나 Whatsapp 등 아이콘으로 위장하여 피싱 공격이 가능함.)

• Push 서비스를 제공하는 third-party 서비스에서의 취약점

  사용자의 push 알람에 표시되는 도메인을 임의로 변경할 수 있는 취약점이 발견됨.

• 사용자의 방문 기록을 추정할 수 있는 Cache 관리 취약점.

  사용자를 자신의 사이트로 들어오게 한 다음, <iframe>으로 다른 사이트를 접속하게 했을 때 ServiceWorker가 동작하는 것을 관찰하면 사용자가 이전에 접속했던 사이트들에 대해서 추정할 수 있음. Android, Desktop 용 Firefox가 이 공격에 취약.

• ServiceWorker가 백그라운드, 오프라인에서도 동작하는 것을 이용해서 background computation을 시킬 수 있는 취약점.

  모네로 코인을 채굴하는 ServiceWorker을 개발함으로써 이를 증명함.