HTML 공간이 % 20 대신 % 2520으로 표시됩니다.


109

firefox 브라우저에 파일 이름을 전달하면 공백 %2520 이 %20.

라는 파일에 다음 HTML이 있습니다 myhtml.html.

<img src="C:\Documents and Settings\screenshots\Image01.png"/>

myhtml.html파이어 폭스로 로드 하면 이미지가 깨진 이미지로 표시됩니다. 따라서 링크를 마우스 오른쪽 버튼으로 클릭하여 사진을 보면 다음 수정 된 URL이 표시됩니다.

file:///c:/Documents%2520and%2520Settings/screenshots/Image01.png
                    ^
                    ^-----Firefox changed my space to %2520.

이런 젠장? 내 공간을 %2520. 그것은 그것을 변환해야하지 %20않습니까?

브라우저가 내 이미지를 찾을 수 있도록이 HTML 파일을 어떻게 변경합니까? 여기서 무슨 일이 일어나고 있습니까?

답변:


219

그것이 무엇인지에 대해 약간의 설명 %2520:

공통 공백 문자는 %20사용자가 언급 한대로 인코딩됩니다 . %문자로 부호화된다 %25.

당신이 얻는 방법 %2520은 URL에 이미가 있고 %20다시 urlencoded %20되어 %2520.

이중 인코딩 문자입니까 (또는 사용중인 프레임 워크)?

편집 : 특히 로컬 링크의 경우 이것에 대해 약간 확장 합니다. 리소스에 연결하고 싶다고 가정합니다 C:\my path\my file.html.

  • 로컬 파일 경로 만 제공하는 경우 브라우저는 지정된 모든 문자를 인코딩하고 보호해야합니다 (위에서 %는 유효한 파일 이름 문자이므로 인코딩 되므로 표시된대로 공백으로 지정해야합니다 ). 적절한 URL에 연결합니다 (다음 요점 참조).
  • file://프로토콜 과 함께 URL을 제공하는 경우 기본적으로 모든 예방 조치를 취하고 인코딩이 필요한 항목을 인코딩했음을 알리고 나머지는 특수 문자로 처리해야합니다. 위의 예에서는 file:///c:/my%20path/my%20file.html. 슬래시를 수정하는 것 외에 클라이언트는 여기에 문자를 인코딩해서는 안됩니다.

노트:

  • 슬래시 방향-URL /에는 슬래시 가, \Windows 경로 에는 역 슬래시 가 사용 되지만 대부분의 클라이언트는 올바른 슬래시로 변환하여 둘 다 사용합니다.
  • 또한 프로토콜 이름 뒤에는 3 개의 슬래시가 있습니다. 원격 호스트 대신 현재 시스템을 자동으로 참조하기 때문입니다 (전체 비축 약 경로는 file://localhost/c:/my%20path/my%file.html). 그러나 대부분의 클라이언트는 호스트 부분없이 작동합니다 (예 : 두 개의 슬래시 만 ) 로컬 시스템을 의미한다고 가정하고 세 번째 슬래시를 추가합니다.

1
Hexblot은 실제로 여기에서 정확합니다. 일반적으로 이것은 프로그래밍하여 URL 인코딩을 다시 URL로 지정하고 봇이 들어 와서 두 번째로 인코딩 할 때 발생합니다. 봇은 이런 일을하는 나쁜 습관이 있습니다. 이 문제를 처리 할 수있는 두 가지가 있습니다. 1) try catch 예외와 함께 404 또는 401 중 하나를 수행하거나 비즈니스 논리를위한 다른 메서드로 전달하기 전에 이중 디코딩 된 값을 디코딩하는 작은 함수를 작성할 수 있습니다.
— Ryan Watts

이것은 jQuery ajax 요청을 보낼 때 왜 그것을 얻었는지 알아내는 데 도움이되었습니다. 값에 encodeURIComponent 함수를 사용하여 ajax GET 요청에서 데이터 속성을 설정했지만 jQuery는 이미 기본적으로 수행하므로 % 2520을 얻었습니다. 정말 도움이되었습니다.
— Asher

링크를 해석하거나 해석하지 않도록 크롬에 대한 명령 줄 인수가 없습니까?
— AleX_

나는이 http://mysite/test & that... If I use 가로 변경 UrlEncode`을 http://mysite/test%20&%20that하지만 또한 원하는 &대로 잘 수 있도록 26 %로 변경 그것의 내 사이트 / 테스트 % 20 % 20that 26 % `내가 어떻게 할 수 있습니까?
— Si8

10

일부-아마도 유효한-이유 때문에 URL이 두 번 인코딩되었습니다. %25urlencoded %기호입니다. 따라서 원래 URL은 다음과 같습니다.

http://server.com/my path/

그런 다음 한 번 urlencoded되었습니다.

http://server.com/my%20path/

그리고 두 번 :

http://server.com/my%2520path/

그래서 당신은 어떤에는 urlencoding하지 않는다해야합니다 - 귀하의 경우 - 다른 구성 요소가 당신을 위해 이미에로 보인다. 단순히 공백을 사용하십시오.


동일한 문제가 발생했지만 기본 urlencoding이 처음에 두 번 처리 된 이유를 이해할 수 없습니다.
— jungwon jin

상황에 따라 이중 인코딩은 인코딩을 올바르게 사용하여 완벽하게 유효한 결과 일 수 있습니다. 이 답변은 이중 인코딩이 항상 잘못되었다는 인상을 줄 수 있으며 "작동하도록 만들기"위해 필요한만큼 많은 인코딩 / 인코딩 해제 호출을 추가하여 인코딩 문제를 해결할 수 있습니다. 이것은 잘못된 것이며 이것이 인코딩 버그가 처음에 발생하는 방법입니다. -1
— Florian Winter

@FlorianWinter 나는 당신이 줄 사이에서 이것을 읽은 곳을 실제로 보지 못합니다. 도와 줄 수 있나요? (질문과 답변을 읽어주세요)
— hek2mgl

7

Firefox 브라우저를 통해 로컬 파일 이름을 방문하려고 할 때 file:\\\프로토콜 ( http://en.wikipedia.org/wiki/File_URI_scheme ) 을 강제해야 합니다. 그렇지 않으면 firefox가 공간을 두 번 인코딩합니다. 다음에서 html 스 니펫을 변경하십시오.

<img src="C:\Documents and Settings\screenshots\Image01.png"/>

이에:

<img src="file:\\\C:\Documents and Settings\screenshots\Image01.png"/>

아니면 이거:

<img src="file://C:\Documents and Settings\screenshots\Image01.png"/>

그런 다음 firefox는 이것이 로컬 파일 이름이라는 알림을 받고 브라우저에서 이미지를 올바르게 렌더링하여 문자열을 한 번 올바르게 인코딩합니다.

유용한 링크 : http://support.mozilla.org/en-US/questions/900466


0

다음 코드 스 니펫은 내 문제를 해결했습니다. 이것이 다른 사람들에게 유용 할 것이라고 생각했습니다.

var strEnc = this.$.txtSearch.value.replace(/\s/g, "-");
strEnc = strEnc.replace(/-/g, " ");

대신 기본 encodeURIComponent코드를 사용하는 대신 첫 번째 코드 줄은 모두 정규식 패턴 spaces을 hyphens사용하여 변환 /\s\g하고 다음 줄은 반대로 수행합니다. 즉, 모두 hyphens다시 spaces다른 regex pattern /-/g. 여기 /g에 실제로 책임이 finding all일치하는 문자.

내 Ajax 호출이 값을 보내고 때, 그것은 통과 normal spaces하거나 %20따라서이 제거됩니다 double-encoding.


1
나는 당신이 문제를 해결하지 않고 단지 그것을 은폐하기 때문에 가정합니다-근본 원인은 여전히 ​​어딘가에 있고 이중 작업을하고 있습니다 (어딘가에서 실수로 두 번 인코딩하고 다른 곳에서는 다루기 위해 수동으로 디코딩합니다 위로). "올바르게"작업을 수행하고 싶다고 가정하면 가장 좋은 방법은 실제 범인을 디버그하고 찾는 것입니다.
— Nick Andriopoulos

실제로이 문제가 발생하면 솔루션이 저에게 효과적이었습니다. 그래서 게시했습니다.
— Subrata 사카

2
@NiladriSarkar hexbolt가 말하려는 것은 코드가 작동하는 동안 실행 가능한 솔루션이 아니라 더러운 수정이므로 피해야한다는 것입니다.
— 2Dee

-1

이 시도?

encodeURIComponent('space word').replace(/%20/g,'+')


1
StackOverflow에 오신 것을 환영합니다! 일반적으로 답변은 코드 스 니펫이 아닌 제안이 OP 문제를 해결하는 이유에 대한 설명을 포함하는 경우 더 유용합니다. 또한이 질문에는 이미 받아 들여진 답변이 있으므로 귀하의 답변이 그 답변보다 더 정확한 이유에 대한 설명을 추가하는 것이 좋습니다.
— DaveyDaveDave
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.