My Story, My Life

뭘 만들다 보니.. textarea 에 있는 텍스트를 URL 로 보내야 되어야 했다..
그러나 URL 에 !@#$% 같은 특수한 문자들을 바로 보낼경우 이상하게 된다.
예를 들어 가끔 띄어쓰기가 주소창에 %20 으로 되어 있는것을 본 경우가 있었을 것이다..

RFC¹ 1738 문서에 Uniform Resource Locators 즉 URL 에 대해 서술하고 있다.
내용인즉, URL에는 US-ASCII character set의 일부분만 사용 할수 있게 제한 하는 것이다.

사용 가능한 Character 들은 alphanumerics [0-9a-zA-Z] (숫자, 영문 대소문자), 그리고 특수문자 [$-_.+!*'(),] (괄호 제외) 만이 가능하다.

쓰다보니 URL 과 URI 그리고 URN 의 차이점에 대해 보게 되었는데 이건 다른 포스팅에서 서술하겠다.

어찌되었든 그래서 인코딩 되어야 하는 Character 는 몇가지가 있다.

* ASCII Control characters (아스키 컨트롤 문자열)
    이유 : 이 문자들은 표시가 불가능하다.
    문자 : ASC II 에 00-1F hex (0-31 dec) 그리고 7F hex (127 dec)

* Non-ASCII characters (비 아스키 문자열)
    이유 : 이 문자열들은 아스키 문자가 아니기 때문에 URL에 사용이 불가능하다.
    문자 : 비 아스키 문자와 ASC II 의 절반 80-FF hex (128-255 dec)

* Reserved characters (예약된 문자열)
    이유 : 이 문자열들은 이미 URL 에서 다른 용도로 사용되고 있다.
    문자 : Dollar ("$")
             Ampersand ("&")
             Plus ("+")
             Comma (",")
             Forward slash/Virgule ("/")
             Colon (":")
             Semi-colon (";")
             Equals ("=")
             Question mark ("?")
             'At' symbol ("@")

* Unsafe characters (안전하지 않은 문자열)
    이유 : 몇몇 문자열들은 URL 에서 잘못 인식될수도 있다.
    문자 : 띄어쓰기 : 띄어쓰기를 여러번 할경우 몇몇 띄어쓰기가 읽히지 않을수도 있다.
             ", <, > : HTML 문서에서 사용 URL 을 쓰기위해 사용되는 문자열들이다.
             # : HTML에서 이미 Anchor 로 사용되는 문자열이다.
             % : URL에서 escape 문자로 사용되는 문자열이다.
             {, }, |, \, ^, ~, [, ], ` : 어떤 시스템들에서는 다른 방식으로 표현 될수 있다.

즉, 이런 문자열을 사용하기 위해서는 이 문자열들을 다른 방식으로 표현해 내야 한다. 이것을 URL escape 문자라고도 한다.

이문제로 혼자 한시간 동안 끙끙하다가...
이웃 블로거에게 물어보니.. escape 라는 기본 펑션에 대해 알게 되었다..

Javascirpt 에는 escape(), encodeURI(), encodeURIComponent() 이 세가지 함수들이 있다.
비슷한 작업을 하지만 조금씩 다르게 작용한다.

escape();
MSDN² Jscript Reference에 의하면..

The escape method returns a string value (in Unicode format) that contains the contents of [the argument]. All spaces, punctuation, accented characters, and any other non-ASCII characters are replaced with %xx encoding, where xx is equivalent to the hexadecimal number representing the character. For example, a space is returned as "%20."

즉, 비 아스키 문자열을 %xx 의 형태로 변형 해주는 함수 이다. xx 에는 문자열을 나타내는 16진수가 들어간다.

encodeURI():
MSDN Jscript Reference에 의하면,

The encodeURI method returns an encoded URI. If you pass the result to decodeURI, the original string is returned. The encodeURI method does not encode the following characters: ":", "/", ";", and "?". Use encodeURIComponent to encode these characters.

URI에 사용되는 URI로 변환해주는 함수이다. ":", "/", ";", "?" 는 변환하지 않는다.

encodeURIComponent():
MSDN Jscript Reference에 의하면,

The encodeURIComponent method returns an encoded URI. If you pass the result to decodeURIComponent, the original string is returned. Because the encodeURIComponent method encodes all characters, be careful if the string represents a path such as /folder1/folder2/default.html. The slash characters will be encoded and will not be valid if sent as a request to a web server. Use the encodeURI method if the string contains more than a single URI component.

URI에 사용되는 URI로 변환해주는 함수이다. 모든 문자열을 변환해주기에 조심해서 사용해야한다.

이 세가지 함수가 각각 변환해주는 문자열의 종류가 각각 다르다.
예를 들어 ~!@#$%^&*(){}[]=:/,;?+\'"\\ 란 문자열을 각각 변환하면
escape(): %7E%21@%23%24%25%5E%26*%28%29%7B%7D%5B%5D%3D%3A/%2C%3B%3F+%27%22%5C
encodeURI(): ~!@#$%25%5E&*()%7B%7D%5B%5D=:/,;?+'%22%5C
encodeURIComponent(): ~!%40%23%24%25%5E%26*()%7B%7D%5B%5D%3D%3A%2F%2C%3B%3F%2B'%22%5C
이렇게 변환 된다.

즉, 정리하자면.
escape() 는 @*/+
encodeURI() 는 ~!@#$&*()=:/,;?+'
encodeURIComponent() 는 ~!*()'
를 변환해 주지 않는다.

다음은 URL Escape Code 정리

URL Escape Code

¹ RFC : Request for Comments, RFC는 새로운 연구, 발명이나 인터넷 기술에 적용되는 방법들을 써놓은 문서들을 일련번호를 매겨 배포한다. 위키피디아. RFC. RFC 1738.

² MSDN : Microsoft Developer Network, The portion of Microsoft responsible for managing the firm's relationship with developers. 위키피디아. MSDN.

링크 : MSDN JScript Reference - escape(), encodeURI(), encodeURIComponent()

출처 : URL Encoding, xkr.us / javascript, HTML Coded Character Set, URL Escape Code

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.