이 섹션에서는 앱의 Client side 동작과 Bubble서버의 Server side 동작의 차이점을 다룹니다.
(1) Intro
이 글 전체에서 반복적으로 언급될 중요한 주제는 보안 관점에서 클라이언트 측과 서버 측의 차이점을 보는 것입니다.
Bubble 앱을 실행하면 두 대의 컴퓨터가 함께 동작하여 작업을 완료합니다.
- 컴퓨터 1: 스마트폰, 태블릿, 컴퓨터 등 사용자가 사용하는 기기
- 컴퓨터 2: 데이터베이스를 저장하고 많은 워크플로 작업을 수행하는 Bubble 서버
플러그인, API 및 외부 데이터베이스 연결과 같은 타사 서비스를 통해 더 많은 시스템을 혼합할 수 있지만, 사용자의 기기와 Bubble 서버는 앱을 실행하는 데 필요한 두 가지 필수 구성 요소입니다.
이 두 시스템이 클라이언트 측(Client side)과 서버 측(Server side)으로 표현되는 것입니다.
(2) Client side
1. Client side 동작
Bubble의 모든 작업과 표현식을 Bubble 서버에서 처리할 필요는 없습니다. Client side는 사용자 장치에서 처리되는 모든 작업을 포괄하는 용어입니다.
- Bubble은 코드가 없는 플랫폼이지만 Bubble앱은 모든 주요 웹 브라우저에서 실행됩니다.
- 즉, 브라우저가 인식할 수 있는 최종 앱 사용 코드를 만들어야 합니다.
Client side 작업은 다음과 같습니다.
- 사용자의 브라우저에서 발생합니다.
- 서버로 보내기 전에 사용자 인터페이스 렌더링, 사용자 상호 작용 처리 및 데이터 처리를 포함합니다.
- 일반적으로 애니메이션, form 유효성 검사, 사용자 Input과 같은 시각적 요소와 사용자 경험이 포함됩니다.
- 코드에 액세스할 수 있고 악의적인 사용자가 조작할 수 있으므로 보안이 덜 철저할 수 있습니다.
2. Client side 보안
사용자가 페이지 로딩을 시작하면 서버와 사용자 장치(Client side)가 함께 동작하여 작업을 완료합니다. 이때, 양측의 보안 구성이 다르기 때문에 보안에 대해 논의할 때 각각 어디서 무슨 일이 일어나는지 이해하는 것이 유용합니다.
브라우저는 사용자 장치로 들어온 많은 파일과 데이터들을 숨기지만, 결국 애플리케이션란 서버가 사용자의 장치로 보내는 파일 및 데이터들의 모음입니다.
- 이러한 파일과 데이터는 사용자 장치에 저장되며 브라우저는 이를 사용하여 페이지에 항목을 표시하거나 입력을 받아들입니다.
- 사용자가 데이터와 상호 작용하는 Client side에서는 일부 정보에 접근할 수 있어야 하며 암호화해서는 안 됩니다. 그렇지 않으면 사용자가 사용할 수 없습니다.
- 그러나 이것이 클라이언트 측이 "안전하지 않다"는 의미는 아닙니다. 대신, 특정 정보를 통해 누구 또는 무엇을 신뢰할 수 있는지 알 수 있는 것이 중요합니다. 특히 페이지 방문자가 제어가능하다면 Third party의 Client side접근도 안전합니다.
- 따라서 이러한 보안문제는 사용자에게 유용한 정보(예: 검색 결과)를 제공하거나 입력을 허용(예:폼 양식) 해야 하는지 말아야 하는지를 개인 정보 보호 규칙(Privacy rule)과 작업 흐름 조건식(workflow condition)을 통해 결정하는 것입니다.
- 이러한 조치를 통해 서버는 어떤 정보가 공유되야 하는지에 대한 최종 결정권을 갖고 사용에게 부적합한 정보가 노출되는 것을 방지합니다.
먼저 사용자가 앱에서 처음으로 페이지를 로드할 때 어떤 일이 발생하는지 살펴보겠습니다.
3. 페이지 로드 중
Bubble 앱에서 페이지를 로드하면 브라우저는 다음과 같은 몇 가지 작업을 수행합니다.
1) Client side 에서 Bubble 서버로 연결
- TLS(https)로 암호화된 HTTP 프로토콜을 사용하여 Bubble서버에 연결합니다.
2) 사용자 장치에 다양한 파일을 다운로드
- HTML, CSS(페이지 모양을 지정하는 파일) 페이지에 표시되는 사진, 글꼴 및 기타 미디어를 다운로드합니다.
3) 앱이 제대로 작동할 수 있도록 하는 JavaScript 코드를 다운로드
- 앱이 작동하는 데 필수적인 Bubble에서 생성된 내장파일 코드
- 작성자가 플러그인 편집기에서 구축한 것에서 생성된 플러그인 JavaScript 코드 (Bubble서버에서 로드)
- 플러그인에 의해 추가된 JavaScript 코드, 사용자가 추가한 타사 플러그인의 JavaScript 코드 (예: Google analytics 플러그인은 Google에서 제공하는 JS 파일을 로드하고 실행할 수 있음)
4) 페이지 렌더링
- 브라우저는 다운로드된 파일을 해석하고 HTML, CSS 및 JavaScript 코드에 지정된 대로 페이지를 렌더링 합니다.
5) WebSocket 연결을 설정합니다.
- 이를 통해 Client side 브라우저와 버블 서버 간의 실시간 통신이 가능해지고, 페이지의 데이터가 동적이며 변경 사항이 있을 경우 즉시 업데이트됩니다.
6) 필요한 데이터 로드
- 브라우저는 Bubble 데이터베이스 (및 필요한 경우 타사 API )에서 데이터를 가져오고 이를 참조하는 페이지의 요소(element)에 데이터를 표시합니다.
7) 사용자 입력 수신 대기
- 이제 페이지가 로드되고 사용자는 입력 요소의 데이터 및 요소 클릭과 같은 입력 제공을 시작할 수 있습니다. 이러한 작업 중 일부는 Client side에서 처리되는 반면 다른 작업은 처리를 위해 Bubble 서버(Server side)로 전송됩니다.
이와 같이 페이지가 로드될 때 많은 데이터가 Bubble 서버에서 사용자 기기로 이동하며 이는 앱이 실행되는 데 필요한 데이터들입니다.
4. 데이터 로드 중
위의 6) 번 항목인 필요한 데이터 로드를 자세히 살펴보겠습니다. 이는 Bubble이 페이지에 표시하는 데 필요한 데이터가 있는지 데이터베이스를 확인한다는 의미입니다.
- 예를 들어, 데이터베이스의 작업 목록을 표시하는 페이지를 로드하는 경우 개인 정보 보호 규칙(Privacy rule)에 따라 현재 사용자가 볼 수 있도록 허용하는 작업 데이터 유형의 모든 필드가 다운로드됩니다.
이는 보안에 몇 가지 영향을 미칩니다.
- 데이터는 서버와 전송 중에 암호화됩니다.
- 그런 다음 장치에서 암호가 해독되고 브라우저에 일반 텍스트로 저장됩니다.
- Bubble은 특정 데이터 Type의 모든 필드를 다운로드합니다.
- 즉, 화면에 작업 이름만 표시해도 Bubble은 다른 모든 필드를 로컬 저장소에 다운로드합니다.
- 이런 위험을 피하기 위해, 특정 데이터나 해당 필드를 보호하려면 Bubble이 해당 데이터를 다운로드하지 못하도록 개인 정보 보호 규칙(Privacy rule)을 설정해야 합니다.
현재 사용자에 저장된 모든 필드(개인 정보 보호 규칙: Privacy rule에 의해 숨겨진 필드 제외)는 앱의 설정 방법에 관계없이 페이지가 로드될 때 항상 다운로드됩니다.
데이터가 로컬 장치에 다운로드된다는 사실이 사용자가 데이터를 자유롭게 조작할 수 있다는 의미는 아닙니다. 해당 부분은 여전히 서버에서 안전하게 처리됩니다. 이는 단지 데이터를 볼 수 있다는 의미입니다.
5. Client side에서의 처리
사용자가 앱에서 실행하는 많은 작업들은 그것들이 완료되기 위해 서버로 전송될 필요가 없습니다. 실제로 대부분의 작업들은 사용자 기기에서 발생하는 다른 작업들을 참조해서 작동하므로 서버에서 처리할 수 없습니다.
예를 들어 아래 나열된 것과 같은 이벤트, 작업 및 조건은 대부분의 경우 로컬에서 완료됩니다.
- 페이지로의 이동 Action을 사용하여 해당 페이지로 이동(탐색)
- 요소(element)를 표시하거나 숨김
- 요소(element)의 모양이나 스타일 변경(색상, 글꼴 등)
- 데이터를 Bubble 서버로 보내기 전에 form에서 사용자 데이터 입력의 유효성을 검사
- 로컬에서 계산을 수행하거나 데이터를 조작
- 로컬 콘텐츠(예: 사용자 입력)와 함께 Custom state 저장
- 애니메이션 또는 시각 효과를 트리거
- 브라우저 내에서 사용자 정의 JavaScript 코드를 실행
- 조건이 참일 때 실행(조건식이 서버 측에서 발생하지 않는 경우)
- X초마다 반복 실행
- 이 외에도 많은 이벤트와, Action들이 있으며 플러그인을 통해 더 많은 작업들을 추가할 수 있습니다.
- 이 목록은 데이터베이스에 대한 요청에 의존하지 않는 작업과 표현식이 클라이언트 측에서 처리되므로 이론적으로는 변조될 수 있음을 보여줍니다.
워크플로는 완료를 위해 서버에 의존하거나 의존하지 않는 이벤트, Action 및 조건식을 혼합할 수 있다는 점을 명심하는 것이 중요합니다. 예를 들어 Client side 이벤트는 server side Action을 트리거할 수 있고 그 반대의 경우도 마찬가지입니다.
(3) Server side
Client side와 달리, Bubble 서버에서는 데이터가 다르게 작동합니다.
서버의 모든 데이터(앱 데이터베이스에 저장됨)는 안전하게 암호화되며 Server side 워크플로는 악의적인 접근으로부터 안전하게 보호되는 방식으로 실행됩니다. 즉, Server side 작업은 다음과 같습니다.
- 사용자의 브라우저에서 멀리 떨어진 Bubble 서버에서 실행됩니다.
- 앱 데이터베이스에서 데이터 처리, 집계, 저장 및 검색은 물론 서버 측 워크플로 실행 및 계산 수행도 포함됩니다.
- 인증, 데이터베이스 쿼리, 복잡한 로직 실행과 같은 작업을 담당합니다.
- 보호된 환경에서 처리되므로 더욱 안전합니다.
1. Server side에서의 처리
일부 작업은 클라이언트에서만 발생할 수 있는 것처럼 다른 작업들은 Bubble 서버 없이는 발생할 수 없습니다.
예를 들어 아래 나열된 것과 같은 이벤트, Action 및 조건식은 서버 측에서만 처리되어야 합니다.
- 데이터베이스에서 항목 생성, 업데이트 및 삭제
- 서버 측 워크플로 실행(데이터베이스 및 API 워크플로가 포함된 워크플로)
- 복잡한 계산, 집계 및 데이터 처리 수행
- 데이터베이스 쿼리 및 데이터 필터링
- 사용자 인증 및 접근 제어 관리
- 타사 API 또는 SQL 데이터베이스 와 통합
- 사용자에게 이메일 또는 기타 알림 보내기
- 파일 업로드 및 저장 처리
(4) 결론
이러한 설명을 통해 우리는 몇 가지 간단한 결론을 내릴 수 있습니다.
1. 사용자의 장치에 도달하는 데이터는 페이지에 표시되지 않더라도 해당 사용자가 볼 수 있습니다.
- 사용자가 예상한 것보다 더 많이 전송하지 않도록 사용자 기기에 도달하는 데이터의 흐름을 제어해야 합니다.
- Privacy rule 설정을 통해 이를 제어해야 합니다.
2. 사용자의 장치에서 수행되는 워크플로 및 조건은 안전한 것으로 간주되어서는 안 됩니다.
- 서버에서 어떤 종류의 처리가 일어나고 클라이언트에서 어떤 일이 일어나는지 알아야 합니다.
- 이러한 이해를 바탕으로 실용적인 보안을 추구할 수 있습니다.
