Request요청 시 공백이 포함된 URL에 유의하라

Request요청 시 공백이 포함된 URL에 유의하라

프론트와 백앤드 사이에 데이터를 주고 받기 위해 Rest API를 많이 사용한다. 이를 위해 특정 URL를 통해 요청(Request)를 하게 된다.

 

이때 사용되는 URL은 ASCII 문자 집합으로 이루어져 인터넷을 통해서만 보낼 수 있다. 그러나 URL에 있는 ASCII로 대체할 수 없는 문자들이 있을 수 있다. 이러한 경우 URL Encoding을 통해 %와 16진수의 조합으로 ASCII로 대체할 수 있도록 변환한다. [ URL Encoding ]

문제점

아래와 같은 url이 있다고 생각해보자.

http://www.example.com/?value=">"

이러한 경우 URL Encoding을 통해 적절히 Encoding되어 아래와 같은 URL로 변환된다.

var url = 'http://www.example.com/?value=">"';
console.log(encodeURI(url)) // 출력 : "http://www.example.com/?value=%22%3E%22"

이처럼 URL Encoding이 이루어진다.

그러나 별도의 encodeURI 함수를 거치지 않아도 기본적으로 제공되는 request 관련 기능들을 활용하면 내부에서 Encoding되어 전송된다.

 

문제는 이러한 Encoding이 문제가 발생할 수 있다는 것이다.

아래의 예시들을 보자.

http://www.example.com/my example

이처럼 URL에 공백이 있는 경우에는 아래처럼 Encoding이 된다.

http://www.example.com/my%20example

그러나 문제는 URL 마지막에 공백이 있는 경우이다.

http://www.example.com/my%20example%20 // expect
http://www.example.com/my%20example    // result

위와 같이 URL 마지막에 있는 공백이 URL Encoding을 통해 적절히 변환되기를 바라지만 사실상 이는 보장되지 않을 수 있다는 것이다.

 

encodeURI 함수에서는 아래처럼 잘 동작하는 것을 확인할 수 있다.

var url = 'http://www.example.com/my example ';
console.log(encodeURI(url)) // 출력 : "http://www.example.com/my%20example%20"

그러나 Request를 위해 제공되는 API에서도 이처럼 잘 동작한다고는 보장할 수 없다. 실제로도 이러한 문제가 발생된다.

해결방안

이러한 문제는 공백을 무자비하게 사용하거나, 의도치 않은 공백이 들어가게 되어 마주할 수 있는 문제일 것이다.

그러나 이 문제는 간단하게 해결할 수 있다.

 

위에서 본 것과 같이 공백에 대해 명확히 Encoding하는 함수들을 활용하는 것이다. 그러나 이는 굉장히 번거로울 수 있을 것이다.

 

이보다 더 간단하면서 명확한 방법은 바로 아래와 같이 URL의 끝을 명확히 하는 것이다.

http://www.example.com/my example /

이처럼 끝에 /를 붙여 끝을 명확히 하게 되면 우리가 원하는 결과대로 Encoding이 이루어진다.

마무리

사실 URL에 공백이 들어가는 것이 좋은 것은 아니다. 일반적으로 공백을 대신하여 "_", "-", "+"와 같은 기호를 활용하여 요청을 하게된다.

그러나 우리가 사용하는 Rest API에서 공백을 사용하지 않는다고 보장할 수는 없을 것이다. 그렇기 때문에 우리는 URL의 끝을 명확하게 명시하여 문제를 최소화할 수 있을 것이다.