공백을 플러스 (+) 또는 % 20으로 인코딩 할 때?


답변:


481

+공간을 의미 application/x-www-form-urlencoded같은 URL의 쿼리 부분 등의 내용을 :

http://www.example.com/path/foo+bar/path?query+name=query+value

이 URL에서, 매개 변수 이름은 query name공백으로하고, 값은 query value공백으로하지만, 경로에있는 폴더 이름은 문자 그대로 foo+bar, 없습니다 foo bar .

%20이 컨텍스트 중 하나에서 공백을 인코딩하는 올바른 방법입니다. 당신이 URL의 일부 URL 인코딩에 포함시킬 문자열을 필요 그래서 경우에 공백을 대체하기 위해 항상 안전 %20과 및 흑자를 %2B. 이것은 예입니다. encodeURIComponent()JavaScript에서 않습니다. 불행히도 PHP에서 urlencode 가하는 것이 아닙니다 ( rawurlencode 가 더 안전합니다).

참조 또한 HTML 4.01 사양 응용 프로그램 / x-www-form-urlencoded를


5
브라우저가 첫 번째 형식을 수행 할 때와 두 번째 형식을 언제 수행해야합니까?
Muhammad Hewedy

11
브라우저는 query+name=query+value로 양식에서 매개 변수를 작성합니다 <input name="query name" value="query value">. query%20name양식에서 작성되지는 않지만 대신 양식을 사용하는 것이 안전합니다. 당신은 함께 youself 양식 제출 퍼팅하는 경우 XMLHttpRequest. 에 공백이있는 URL이 있으면 <a href="http://www.example.com/foo bar/">브라우저는 %20실수를 해결 하기 위해 URL을 인코딩 하지만 아마도 의존하지 않는 것이 가장 좋습니다.
bobince

6
자바 스크립트 메이크업에 어떤 기능 foo barfoo+bar?
Sisir

21
@Sisir : URL 형식 인코딩을 수행하는 JS 함수가 없습니다. encodeURIComponent(s).replace(/%20/g, '+')정말 필요한 경우 자연스럽게 할 수 있습니다+
bobince

2
그것은 양식으로 코딩 된 것의 매우 혼란스러운 예입니다. URL과 관련이 없습니다.
Dave Van den Eynde 2016 년

54

http://www.example.com/some/path/to/resource?param1=value1

물음표 앞의 부분은 % 인코딩 ( %20공백의 경우)을 사용해야하며 %20, 물음표 다음 +에 공백을 사용할 수 있습니다 . 실제 +물음표 가 필요한 경우를 사용하십시오 %2B.


6
@DaveVandenEynde 왜 안돼?
cerberos 2016 년

10
잘못 되었기 때문입니다. URL에 적용되지 않는 이전 application / x-www-form-urlencoded 미디어 유형의 일부입니다. 또한 decodeURIComponent해독하지 않습니다.
Dave Van den Eynde 2016 년

3
예, 아마도 RFC 1630에서 복사되어 실제로는 표준이 아닙니다. tools.ietf.org/html/rfc3986 이 표준입니다 (IPv6 등을 위해 다시 업데이트 됨). 물론 브라우저는 여전히 "지원"하지만 그 의미는 무엇입니까? 쿼리 문자열을 읽고 브라우저가 아닌 디코딩하는 서버 또는 클라이언트 코드입니다. 브라우저는 단순히 그것을 앞뒤로 전달하며 +, 예약 문자 이므로 브라우저에 의해 보존됩니다.
Dave Van den Eynde 2016 년

18
Google은 검색 URL에서 공백으로 +를 사용합니다 ( google.com/#q=perl+equivalent+to+php+urlencode+spaces+as+%2B ).
Justin

2
참고로 : Rails는 +기본적으로 ( { foo: 'bar bar'}.to_query=> foo=bar+bar) 를 사용하여 공백을 디코딩합니다.
wrtsprt

46

따라서 여기의 답변은 모두 불완전합니다. URL에서 공백을 인코딩하기 위해 '% 20'을 사용하는 것은 RFC3986에 명시 적으로 정의되어 있으며 URI는 작성 방법을 정의합니다. 이 사양에서는 공간 인코딩에 '+'를 사용하는 것에 대한 언급이 없습니다.이 사양만으로 이동하는 경우 공백은 '% 20'으로 인코딩해야합니다.

공백을 인코딩하는 데 '+'를 사용하는 것에 대한 언급은 HTML 사양의 다양한 화신, 특히 콘텐츠 유형 'application / x-www-form-urlencoded'를 설명하는 섹션에서 나옵니다. 양식 데이터를 게시하는 데 사용됩니다.

이제 HTML 2.0 사양 (RFC1866) 은 섹션 8.2.2에서 GET 요청 URL 문자열의 쿼리 부분을 'application / x-www-form-urlencoded'로 인코딩해야한다고 명시 적으로 말했습니다. 이론적으로 이것은 쿼리 문자열의 URL에서 '?'다음에 '+'를 사용하는 것이 합법적이라고 제안합니다.

하지만 ... 정말 그렇습니까? HTML 자체는 내용 사양이며 쿼리 문자열이있는 URL은 HTML 이외의 내용과 함께 사용할 수 있습니다. 또한 최신 버전의 HTML 사양에서는 'application / x-www-form-urlencoded'콘텐츠에서 '+'를 유효한 것으로 계속 정의하지만 GET 요청 쿼리 문자열이 해당 유형으로 정의되어 있다고 말하는 부분을 완전히 생략합니다. 실제로 HTML 2.0 스펙 이후의 쿼리 문자열 인코딩에 대한 언급은 없습니다.

어느 것이 우리에게 질문을 남겼습니까? 확실히 쿼리 문자열에서 '+'를 지원하는 많은 레거시 코드와 코드를 생성하는 많은 코드가 있습니다. '+'를 사용하면 깨지지 않을 확률이 높습니다. (실제로, 나는 최근에 GET 쿼리에서 '% 20'을 공백으로 받아들이지 못하는 주요 사이트를 발견했기 때문에 최근에 모든 연구를 수행했습니다. 실제로 모든 퍼센트 인코딩 된 문자를 디코딩하지 못했습니다. '사용하는 것도 관련이있을 수 있습니다.)

그러나 HTML 2.0 사양의 언어를 사용하지 않고 사양을 완전히 읽었을 때 URL은 RFC3986으로 완전히 커버되므로 공백은 '% 20'으로 변환되어야합니다. HTML 문서 이외의 다른 것을 요청하는 경우에는 반드시 그렇습니다.


답변에 추가하기 위해 Chrome은 기본적으로 URL에 공백을 %20( <a href="?q=a b">) 로 인코딩 하지만 양식을 보낼 때 +부호를 사용합니다 . 명시 적으로 +부호 ( <a href="?q=a+b">)를 사용하거나을 사용 하여 양식을 보내서이를 대체 할 수 있습니다 XMLHTTPRequest.
x-yuri

URLSearchParams developers.google.com/web/updates/2016/01/urlsearchparams 를 추가하는 목적을 이해하기가 어렵습니다.이 방법은 기존 방식으로 작동합니다 (SPACE를 '+'로 직렬화). IE11에서도 지원되지 않습니다!
님 페타 민

9

항상 공백을 "+"가 아닌 % 20으로 인코딩하는 것이 좋습니다.

RFC-1866 (HTML 2.0 사양)으로, "application / x-www-form-urlencoded"컨텐츠 유형 키-값 쌍에서 공백 문자를 "+"로 인코딩하도록 지정했습니다. (문단 8.2.1. 하위 단락 1 참조). 이 방식으로 양식 데이터를 인코딩하는 방법은 이후의 HTML 사양에도 나와 있습니다. application / x-www-form-urlencoded에 대한 관련 단락을 찾으십시오.

다음은 RFC-1866에서 "http://example.com/over/there?name=foo+bar"와 같이 인코딩 공백을 허용하는 URL의 문자열 예입니다. 따라서 RFC-1866에 따르면 "?"뒤에 만 공백을 플러스로 바꿀 수 있습니다. 다른 경우에는 공백이 % 20으로 인코딩되어야합니다. 그러나 컨텍스트를 결정하기가 어렵 기 때문에 공백을 "+"로 인코딩하지 않는 것이 가장 좋습니다.

RFC-3986, p.2.3에 정의 된 "예약되지 않은"을 제외한 모든 문자를 백분율로 인코딩하는 것이 좋습니다.

unreserved = ALPHA / DIGIT / "-" / "." / "_" / "~"

1
.Net Framework에서 UrlEncode는 QueryString에서 '+'를 사용하지만 최신 .Net Core % 20이 사용됩니다
Michael Freidgeim

@ MiFreidgeimSO-stopbeingevil 알려 주셔서 감사합니다. 현대의 .Net Core는보다 일관되고 호환되기로 결정했습니다.
Maxim Masiutin

2

차이점 : 다른 답변보기.

사용하는 경우 +대신 %20? 사용 +어떤 이유로, 당신은 URL 쿼리 문자열 (수 있도록하려는 경우에 ?.....) 또는 해시 조각 ( #....) 더 읽기를. 예 : 실제로 이것을 읽을 수 있습니다 :

https://www.google.se/#q=google+doesn%27t+encode+:+and+uses+%2B+instead+of+spaces ( %2B= +)

그러나 다음은 읽기가 훨씬 어렵습니다. (적어도 나에게는)

https://www.google.se/#q=google%20doesn%27t%20oops%20:%20%20this%20text%20%2B%20is%20different%20spaces

+Google이 사용하기 때문에 +(위의 첫 번째 링크 참조) 아마도 이것에 대해 생각한 이후로 아무것도 깨뜨리지 않을 것이라고 생각 합니다. +읽을 수있는 + Google이 괜찮다고 생각하기 때문에 스스로 사용하려고합니다 .


7
나는 "가독성"주장이 '+'에 대한 최선의 방어책이라고 말한다. "google does it"주장은 잘못된 것입니다. en.wikipedia.org/wiki/Argument_from_authority
FlipMcF

2
@FlipMcF 권위있는 잘못된 주장 위키 백과 페이지는 " 전문 분야 이외 의 주제에 대해 권위가 인용 된 경우 또는 인용 된 권위가 진정한 전문가아닌 경우 "에 관한 것입니다. 그러나 컴퓨터, HTTP 및 URL은 인코딩은 물건입니다 전문 구글의 영역입니다.
KajMagnus

3
@FlipMcF이 경우 Google의 행동을 인용하는 것은 URL에서 "+"를 사용하는 데 유효한 주장입니다. 구글이 권위라는 것은 아니지만 구글이 아마도 가장 큰 인터넷 회사 일 것입니다. 만약 그들이 어떤 식 으로든 무언가를한다면, 브라우저가 언젠가 그 관행을 지원하지 않기로 결정하지 않을 것입니다. 또한 Google 크롬은 공유가 가장 높은 브라우저 중 하나이며 Google이 원하는 모든 것을 지원합니다. "% 20"대신 "+"를 사용하는 사람은 가까운 미래에 어려움을 겪지 않을 것이라고 말하고 싶습니다.
jdferreira

나는 권위에 대한 호소를 거부하기 위해 대중에게 호소하는 다른 곳 에서이 논쟁을 계속하고 싶습니다. 적어도 우리는 모두 한 가지에 동의 할 수 있습니다 : '+'는 '% 20'보다 우수
FlipMcF

1
링크 위로 마우스 커서를 가져 가면 (데스크톱) 브라우저가 창의 맨 아래에 디코딩 된 URL을 표시하기 때문에 실제로 % 20이있는 URL은 읽기가 훨씬 쉽습니다. 더하기 부호는 변경되지 않은 상태로 표시됩니다.
Martin
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.