74. URL Parameters(중급) : 버블의 URL 매개변수 기능, 구조, 설정, url parameter 보안

URL Parameter(매개변수)는 URL에 배치하는 정보입니다. key-value의 쌍을 이루는 구조를 따르며 다양한 유형의 데이터를 보유할 수 있습니다. 이 글에서는 정보전달을 하는 URL Parameter에 대해 알아봅니다.

 

(1) URL Parameter의 구조

1. URL의 기능

애플리케이션의 모든 페이지(인덱스 페이지 제외)에는 규칙적인 패턴을 따르는 자체 URL이 있습니다.

https://my-bubble-application.bubbleapps.io/mypage

만약 자체 도메인(mydomain)이 설정되어 있다면

https://www.mydomain.com/mypage

이렇게 하면 브라우저가 올바른 도메인과 올바른 페이지를 가리킵니다.

• 실제로 해당 URL정보는 올바른 페이지를 브라우저로 보내도록 서버에 지시하는 것입니다.
• 즉, 브라우저는 해당 URL을 서버로 보내고 서버는 응답으로 페이지를 표시하는 데 필요한 파일을 보냅니다.

 

2. URL Parameter의 기능과 구조

URL Parameter도 기능을 제공하지만 서버와 통신하는 대신 현재 페이지에 메시지를 보낼 수 있습니다.

• 즉, Bubble 앱은 브라우저의 URL 표시줄에서 URL Parameter를 쓰고 읽을 수 있으며 해당 정보를 다른 용도로 사용할 수 있습니다.

 

URL Parameter는 전체 페이지 URL 뒤에 나열되며 물음표(?)로 해당 URL과 구분됩니다.

• Parameter(매개변수)가 여러 개인 경우 앰퍼샌드(&)로 서로 구분됩니다.

? name=john

각 URL Parameter(매개변수)는 위와 같이 key(키)와 value(값)으로 구성됩니다.

• key(키)는 name과 같은 고유한 텍스트 문자열로 Parameter(매개변수)를 식별합니다.
• value(값) 은 John과 같이 Parameter(매개변수)가 보유한 데이터입니다.
• 구조는 위와 같이 name=John처럼 key=value의 쌍으로 표현됩니다.
• 전체 페이지 URL 끝에 배치하고 앞에서 살펴본 것처럼?로 URL과 분리하면 다음과 같이 표시할 수 있습니다.

https://www.mydomain.com/mypage?name=John

 

이제 조금 더 복잡하게 만들기 위해 name 매개변수(Parameter)를 firstname으로 변경하고 lastname이라는 두 번째 Parameter(매개변수)를 추가해 보겠습니다.

https://www.mydomain.com/mypage?firstname=John&lastname=Doe

• 이 예시에서 Bubble은 URL 표시줄에서 전체 이름 John Doe를 식별할 수 있습니다.

다음은 어떻게 이런 일이 일어나는지 알아보겠습니다.

 

(2) URL Parameter 읽기

1. 참고: 브라우저의 URL Parameter인식

매개변수를 포함하여 URL 표시줄을 잘 조작할 수 있는 플러그인(plugin)이 있습니다.

• Parameter(매개변수)가 GO TO Page Action(페이지로 이동 액션)으로 작성되지 않은 경우 Bubble이 매개변수에 대한 업데이트를 항상 포착하지 않는다는 점을 알고 있어야 합니다.
• 즉, 브라우저가 변경 사항을 인식하려면 페이지를 다시 로드해야 하거나 플러그인이 업데이트된 값을 반환할 수 있어야 한다는 의미입니다.

 

2. URLParameter 설정 및 읽기

우리가 다룬 것처럼 URL Parameter(매개변수)는 키와 값으로 구성되며 값을 반환받기 위해 어떤 키를 찾아야 하는지 Bubble에 지시해야 합니다 .

• 이를 위해 페이지 URL 데이터 소스에서 데이터 가져오기(Get data from page URL)를 사용하는 표현식을 설정합니다.(아래 사진 참고)

Get data from page URL 설정하기

• 데이터 소스를 선택한 후 Bubble은 몇 가지 추가 매개변수를 요청합니다.

 

url parameter type 설정

1. 은 매개변수를 식별하는 키입니다. 이름(John)을 가져오려고 하므로 이름을 firstname으로 설정합니다.
2. 어떤 종류의 데이터를 예상할지 Bubble에 Type을 알려야 합니다. 여기서는 텍스트로 설정하였습니다*.*

• key를 설정하자마자 오른쪽에서 Bubble이 페이지 URL에서 Get firstname from page URL(이름 가져오기라)는 표현식을 업데이트하는 것을 볼 수 있습니다.
• URL에 Parameter(매개변수)가 name=John 있는 경우 텍스트 element는 사용자에게 John이라는 이름을 표시합니다.
• 반면에 URL Parameter(매개변수)를 찾을 수 없거나 값이 비어 있으면 아무것도 표시되지 않습니다.

 

(3) 다양한 데이터 유형 읽기

위의 예시에서 텍스트 데이터 type을 사용하여 간단한 정보인 이름을 읽었습니다. 그러나 URL Parameter를 사용하여 다른 데이터 type을 읽을 수도 있습니다.

 

1. Bubble의 일반 데이터 유형 형식 읽기

Bubble의 일반 데이터 type(텍스트, 숫자, 날짜 등)은 모든 브라우저와의 호환성을 보장하기 위해 특정 형식이 필요합니다.

: Bubble은 대부분의 경우 올바른 서식을 자동으로 적용하지만, 하드코딩된 링크가 있거나 다양한 데이터 유형의 서식이 있다면 어떻게 올바른 서식이 지정되는지 알아보겠습니다.

 

1) 문자/숫자/지리적 주소/파일/이미지

대부분의 경우 값을 읽을 때 원하는 대로 텍스트와 숫자를 추가할 수 있지만 일부 브라우저에서는 특수 문자로 인해 문제가 발생할 수 있습니다.

• 호환성을 보장하기 위해 일반적으로 유효하지 않은 문자를 퍼센트-인코딩(percent-encoding)을 사용하여 인코딩하여 URL에 포함할 수 있습니다.

퍼센트-인코딩(percent-encoding)에서 문자는 아래의 예시와 같이 다른 문자로 변환됩니다. 
(예를 들어 문자 /는 %2F로 변환되고 문자 '는 %27로 변환됩니다.)

 

제품의 이름 [ O'Donnel t-shirt in white/blue ]을 인코딩 하고 싶다고 가정해 보겠습니다.

• 이 글에는 세 개의 특수 문자가 있습니다. 공백, ' 및 /
• 퍼센트-인코딩(percent-encoding)을 하면 다음과 같이 표현가능합니다.

https://www.mydomain.com/mypage?productname=O'Donnel T-shirt in white%2 Fblue

• 워크플로우에서 Goto page Action을 사용하여 URL Parameter를 추가하면 Bubble은 필요에 따라 문자열을 자동으로 인코딩합니다. 하드코딩된 링크를 설정하는 경우 퍼센트-인코딩을 수동으로 추가해야 할 수 있습니다.
• Bubble의 형식을 URL 연산자로 사용하여 텍스트를 올바른 형식으로 변환할 수 있습니다.
• 파일 및 이미지에는 URL 문자들이 포함되어 있으며 퍼센트-인코딩 형식도 필요합니다.

 

2) 숫자 범위

숫자 범위는 단일 데이터 유형으로 전달할 수 없습니다.

• 대신 범위를 최소 및 최대 수로 나누어 숫자 매개변수를 구분해야 합니다.
• 예를 들어 값이 1 인 min이라는 매개변수와 값이 5 인 max라는 매개변수를 추가할 수 있습니다.
• 그런 다음 범위를 참조해야 할 때 range operator(범위 연산자)를 사용하여 두 값을 유효한 숫자 범위로 결합할 수 있습니다.

3) 날짜

날짜 형식은 다음과 같습니다.

형식: 월 일, 년 시:분 am/pm 또는 M/D/YYYY h:mm am/pm
(예시: 1970년 1월 1일 오전 8:50)

• 날짜에는 퍼센트-인코딩도 필요하며 Bubble이 자동으로 적용합니다.

위의 예시 인코딩: Jan%201%2C%201970%208%3A50%20am
여기서 %2C는 쉼표(,), %3A는 콜론(:), %20은 공백을 나타냅니다.

 

4) 날짜 범위

• 숫자 범위와 같은 날짜 범위는 startdate 및 enddate와 같은 두 개의 개별 값으로 전달된 다음 범위 연산자(range operator)와 결합되어야 합니다.
• 위의 날짜 섹션에 설명된 대로 날짜는 퍼센트 인코딩으로 전달되어야 합니다.

 

5) 날짜 간격

• 날짜 간격은 서로 다른 날짜시간 데이터 사이의 밀리초 수로 전달됩니다.

 

6) 예 아니요

• 예/아니오 값은 기록된 대로 전달됩니다.( 예 또는 아니요)

 

2. 사용자 정의 데이터 유형 항목 읽기

URL Parameter에서 사용자 정의 데이터 유형에 연결할 수도 있습니다.

• 올바른 항목을 읽고 검색하려면 해당 항목의 Unique ID가 매개변수에 있어야 합니다.
• 매개변수의 이름(키)은 결과에 영향을 미치지 않지만 Get data from page URL data source(페이지 URL 데이터 소스에서 데이터 가져오기)를 사용하는 경우 아래 예시와 같이 올바른 데이터 유형(type)으로 설정해야 합니다.

사용자 데이터 유형 연결하기

 

1. 먼저 올바른 매개변수를 식별하는 이름(키)을 설정합니다.
2. 그런 다음 유형을 검색하려는 데이터 유형으로 설정합니다.
3. 그런 다음 Bubble을 사용하면 해당 항목과 관련된 페이지 URL 데이터 소스에서 데이터 가져오기 에 연산자를 추가할 수 있습니다.

 

• 이 예시에서는 task의 Name(이름)을 가져옵니다.
• 이 경우 URL은 다음과 같습니다.

https://www.mydomain.com/mypage?task=1676895495518x833172344879202800

 

3. 옵션 세트

옵션 세트에서 옵션을 검색할 수도 있습니다. 옵션 세트에는 고유 ID가 없지만 표시 필드에 저장된 값으로 식별됩니다.

위의 예시에 데이터 유형과 마찬가지로 매개변수에 임의의 이름을 지정할 수 있지만 유형을 검색하려는 옵션 세트로 설정해야 합니다.

 

url parameter로 옵션세트 받아오기

 

1. 먼저 올바른 매개변수를 식별하는 이름(키)을 설정합니다.
2. 유형을 검색하려는 옵션 세트로 설정합니다.
3. Bubble을 사용하면 해당 옵션 세트와 관련된 페이지 URL 데이터 소스에서 데이터 가져오기 에 연산자를 추가할 수 있습니다.

 

• 이 예시에서 우리는 State의 약어(Abbreviation)를 받아옵니다.
• 이 경우 URL은 표시 필드에 주 이름을 포함한 경우 다음과 같습니다.

https://www.mydomain.com/mypage?state=Texas

 

(4) URL 매개변수 설정

페이지에 URL Parameter를 전달하는 방법에는 두 가지가 있습니다.

1. 페이지가 로드될 때 URL과 함께 포함하는 것

• 예를 들어 parameter가 포함된 URL로 페이지에 연결합니다.
• URL을 링크에 복사/붙여 넣기만 하면 Bubble이 페이지 로드 시 매개변수를 인식하게 됩니다.

 

2. 워크플로우의 Go to page Action을 사용

이렇게 하면 페이지에 더 많은 매개변수 보내기를 쉽게 설정할 수 있습니다.

또한 매개변수를 제공하고 보내는 모든 정보에 필요한 인코딩이 적용됩니다.

 

go to page action 으로 url parameter 보내기

 

• Go to page Action을 사용하면 위의 그림과 같이 매개변수를 List에 추가하여 매개변수를 보낼 수 있습니다.
• 왼쪽 입력 필드는 key(키)이고 오른쪽 필드는 value(값)입니다.

* 같은 페이지에 남아 있으면 페이지가 다시 로드되지 않지만 매개변수가 즉시 업데이트 되어 값이 변화됩니다. 
Go to page Action(페이지로 이동 작업)은 이미 보고 있는 동일한 페이지로 이동하는 경우 페이지를 다시 로드하지 않습니다. 즉, 페이지를 다시 로드하지 않고도 URL 매개변수를 설정하고 변경할 수 있다는 의미입니다.

 

(5) FAQ: URL Parameter

1. URL Parameter에서 데이터 List를 전달할 수 있습니까?

• 각 URL 매개변수에서 한 번에 하나의 값만 전달할 수 있습니다.
• (그러나 브라우저에서 지원하는 최대 URL 길이 내에서 필요한 만큼 많은 매개변수를 생성할 수 있음). List를 전달하는 해결 방법이 있을 수 있지만 현재로서는 Bubble에서 공식적으로 지원하지 않습니다.

 

2. URL Parameter는 안전합니까?

URL Parameter는 그 자체로는 안전하지 않지만 Parameter사용과 관련해서 잠재적인 취약점을 이해하고 사용해야 합니다.

 

예를 들어:

• url parameter가 사용자에게 완전히 노출되므로, 사용자가 그것을 편집할 수 있고 원하는 대로 URL 매개변수를 추가, 제거 및 변경할 수 있습니다.
• 물론 브라우저의 URL 표시줄에도 완전히 표시되므로 민감한 데이터를 포함해서는 안 됩니다.
• 페이지-탐색(이동)에 사용한 경우, 기술에 정통한 사용자는 URL 매개변수를 주의 깊게 보면 해당 구조를 이해할 수 있음을 명심하십시오
• 다른 방법으로 페이지-탐색(이동)을 보호하지 않으면 사용자가 접속하지 않아야 하는 페이지에 접속할 수 있습니다.
• URL에 사용자 지정 데이터 유형을 포함하면 해당 항목의 unique ID가 표시됩니다.
• 다시 말하지만 이것은 그 자체로는 취약점이 아니지만 취약점으로 이어질 수 있습니다.
• 예를 들어 누군가가 URL의 unique ID를 교체하여 자신의 것이 아닌 레코드를 볼 수 있습니다.
• 이것은 개인정보 보호 규칙으로 보호해야 하는 항목이 될 수 있습니다.