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.