HTML 속성 내에서 따옴표를 올바르게 이스케이프 처리하려면 어떻게해야합니까?


267

값 문자열에 따옴표가 포함되어 있으면 웹 페이지에 드롭 다운이 있습니다.

값은 "asd입니다. DOM에서는 항상 빈 문자열로 나타납니다.

나는 문자열을 올바르게 탈출하기 위해 모든 방법을 시도했지만 아무 소용이 없습니다.

<option value=""asd">test</option>
<option value="\"asd">test</option>
<option value="&quot;asd">test</option>
<option value="&#34;asd">test</option>

포스트 백 메시지에 올바른 값이 포함되도록이를 페이지에서 어떻게 렌더링합니까?


페이지를 어떻게 생성합니까?
SLaks

1
작은 따옴표를 사용하면 어떻게됩니까? <option value = ' "asd'> test </ option>
Wim ten Brink

5
이 답변 중 어느 것도 html 속성 내에서 사용하기 위해 문자열을 올바르게 이스케이프 처리하는 방법을 말하지
않아야

4
@reconbot HTML 생성 방식에 따라 다릅니다. 질문은 따옴표에 관한 것이므로 기술적으로 허용되는 답변이 질문에 대한 답변입니다. 문자열을 올바르게 이스케이프 처리하는 방법에 대해서는 일반적인 경우에 유용한 링크가 없지만 PHP에서는을 사용 htmlentities합니다.
Matt Browne

답변:


343

&quot; 세 번째 테스트의 올바른 방법입니다.

<option value="&quot;asd">test</option>

아래 또는 jsFiddle 에서 작동하는 것을 볼 수 있습니다 .

alert($("option")[0].value);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option value="&quot;asd">Test</option>
</select>

또는 작은 따옴표로 속성 값을 구분할 수 있습니다.

<option value='"asd'>test</option>

17
OP의 네 번째 옵션 인 & # 34;도 따옴표를 이스케이프 처리하는 올바른 방법입니다. 명명 된 엔터티에 숫자 html 엔터티를 사용하면 이점이 있지만, 명명 된 엔터티에는 모든 문자가 포함되지 않지만 숫자 엔터티에는 적용됩니다. 전체 HTML4 목록은 w3.org/TR/html4/sgml/entities.html에 있습니다.
atk

38
@atk : yes, &quot;와 같은 문자에 매핑 &#34;되지만 &quot;이름이 지정된 엔티티 이므로 숫자 옵션을 사용하면 이점이 없습니다 . &quot;기억하기가 더 쉽습니다.
Andy E

6
나는 동의한다. 이 경우 & quot;를 사용하는 것이 더 쉽습니다. 나는 일반적인 경우를 지적하려고했습니다.
atk

4
@SIDU는 :로 변경을 &amp;quot;a(은 교체 &&amp;)
앤디 E

4
^ 무한 루프
Omar Meky 2012

16

PHP를 사용하는 경우, 호출 htmlentities또는 htmlspecialchars기능을 시도하십시오 .


2
이것들을 사용하는 것만으로는 충분하지 않을 수 있습니다. <option value='<?php echo htmlentities("' onmouseover='alert(123);' foo='"); ?>' />ENT_QUOTES와 함께 사용하십시오. 안전합니다. <option value='<?php echo htmlentities("' onmouseover='alert(123);' foo='", ENT_QUOTES); ?>' /> , ENT_QUOTES 외에도 ENT_SUBSTITUTE 및 ENT_DISALLOWED를 추가해야합니다. 개인적으로이 래퍼를 몇 년 동안 사용해 왔습니다.function hhb_tohtml(string $str):string { return htmlentities($str, ENT_QUOTES | ENT_HTML401 | ENT_SUBSTITUTE | ENT_DISALLOWED, 'UTF-8', true); }
hanshenrik

12

HTML 구문 , 심지어 HTML5 , 다음은 유효한 모든 옵션은 다음과 같습니다 :

<option value="&quot;asd">test</option>
<option value="&#34;asd">test</option>
<option value='"asd'>test</option>
<option value='&quot;asd'>test</option>
<option value='&#34;asd'>test</option>
<option value=&quot;asd>test</option>
<option value=&#34;asd>test</option>

XML 구문을 사용하는 경우 따옴표 (싱글 또는 더블)가 필요합니다.

위의 모든 작업을 보여주는 jsfiddle이 있습니다. 있습니다.


7

다른 옵션은 큰 따옴표를 작은 따옴표로 바꾸는 것입니다. 그러나 나는 이것을 언급하지 않습니다 :

<option value='"asd'>test</option>

나는 이것을 언급한다.

<option value="'asd">test</option>

내 경우에는이 솔루션을 사용했습니다.


9
그러나 값에 작은 따옴표와 큰 따옴표가 포함되어 있으면 실패합니다
Raptor

@ 랩터 값에 큰 따옴표가 포함되어 있으면 작은 따옴표로 변환하십시오. 값에 작은 따옴표가 포함되어 있으면 아무런 문제가 없습니다.
csonuryilmaz


0

신뢰할 수없는 데이터는 정렬, alink, alt, bgcolor, border, cellpadding, cellspacing, class, color, cols, colspan, coords, dir, face, height, hspace, ismap, lang과 같은 좋은 속성의 화이트리스트에만 허용해야합니다. , marginheight, marginwidth, multiple, nohref, noresize, noshade, nowrap, ref, rel, rev, rows, rowspan, scrolling, shape, span, 요약, tabindex, title, usemap, valign, value, vlink, vspace, 너비

신뢰할 수없는 데이터를 자바 스크립트 핸들러와 id 또는 name 속성 (DOM의 다른 요소를 클로버 할 수 있음)에서 유지하려고합니다.

또한 신뢰할 수없는 데이터를 SRC 또는 HREF 속성에 넣는 경우 실제로 신뢰할 수없는 URL이므로 URL을 확인하고 자바 스크립트가 아닌지 확인하십시오 : URL 및 HTML 엔터티 인코딩.

https://www.owasp.org/index.php/Abridged_XSS_Prevention_Cheat_Sheet 에 대한 자세한 내용은 여기를 참조 하십시오.


3
나는 이것이 늦었다는 것을 알고 있지만, 거의 모든 속성은 HTML4.01에서 더 이상 사용되지 않고 5에서 제거됩니다.
trysis

1
문제는 신뢰할 수없는 데이터가 아니라 따옴표 문자가있는 데이터에 대해 묻는 것입니다.
Quentin

-3

입력 텍스트 값에서 따옴표를 이스케이프 처리 할 수있는 방법은 없지만 javascript (또는 jquery)를 사용할 수 있습니다.

<input type="input" name="myinput" id="myinput" value="" />
<script>document.getElementById("myinput").value="This input has a [\"]";</script>

1
"입력 텍스트 값에 따옴표를 이스케이프 처리 할 방법이 없습니다"라는 말은 잘못되었습니다. 276 위로 득표 된 2010 년부터 수락 된 답변을 참조하십시오.
Quentin

쿠엔틴을 도와주십시오. 그러나 그 대답은 그렇게 할 수 없다고 말합니다. HTML로 코딩 된 큰 따옴표를 삽입하거나 간단한 따옴표를 사용하여 큰 따옴표를 구분 할 수 있지만 큰 따옴표로 정의 된 값에 큰 따옴표를 삽입하는 방법은 없습니다. 그것은 불가능한 것에 대한 대안을 제안하고 있습니다. 그것은 내가하는 것과 같습니다
Miguel

큰 따옴표로 구분 된 값에 큰 따옴표를 삽입하는 방법은 방금 말씀 드린 대로 html 인코딩사용하는 것입니다.
Quentin

(Hello Quentin ... 우리는 온라인 상태입니다.) 단지 그 문자열의 값이 큰 따옴표가 아니라는 & quot;이며, 동일하지 않습니다.
미구엘

2
& quot; 값을 입력하면 서버에서 &에서;로 6자를 수신합니다. 큰 따옴표를받지 않습니다. 그것은 같지 않으며 그것은 나를 위해 작동하지 않습니다
Miguel
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.