¿Cómo escapo correctamente las comillas dentro de los atributos HTML?

267

Tengo un menú desplegable en una página web que se rompe cuando la cadena de valor contiene una cita.

El valor es "asd, pero en el DOM siempre aparece como una cadena vacía.

He intentado todas las formas que sé para escapar de la cadena correctamente, pero fue en vano.

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

¿Cómo presento esto en la página para que el mensaje de devolución contenga el valor correcto?

html xhtml escaping Chris
fuente
¿Cómo estás generando la página?
SLaks
1
¿Qué pasa si usa comillas simples? <option value = '"asd'> test </option>
Wim ten Brink el
55
Tengo que señalar que ninguna de estas respuestas dice cómo escapar correctamente de las cadenas para usar dentro de los atributos html
reconbot
44
@reconbot Eso dependería de cómo se generara el HTML. La pregunta era sobre citas, por lo que técnicamente la respuesta aceptada responde a la pregunta formulada. En cuanto a cómo escapar correctamente de las cadenas, no tengo un enlace a mano para el caso general, pero en PHP lo usarías htmlentities.
Matt Browne
posible duplicado de cómo tener comillas en los valores de entrada html
Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功

Respuestas:

344

&quot; es la forma correcta, la tercera de tus pruebas:

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

Puede ver esto funcionando a continuación, o en 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>
Expandir fragmento

Alternativamente, puede delimitar el valor del atributo con comillas simples:

<option value='"asd'>test</option>
Andy E
fuente
17
La cuarta opción de OP, & # 34 ;, también es una forma válida de escapar de las comillas. Hay un beneficio al usar entidades numéricas html sobre entidades nombradas, ya que las entidades nombradas no cubren todos los caracteres, mientras que las entidades numéricas sí. La lista completa de HTML4 está en w3.org/TR/html4/sgml/entities.html .
atk
38
@atk: sí, se &quot;asigna al mismo carácter que &#34;, pero no hay ningún beneficio de usar la opción numérica aquí porque &quot;es una entidad con nombre definida. &quot;También es más fácil de recordar.
Andy E
66
Estoy de acuerdo. En este caso particular, es más fácil de usar & quot ;. Solo pretendía señalar el caso general.
atk
44
@SIDU: cámbielo a &amp;quot;a(reemplace &con &amp;)
Andy E
44
^ bucle infinito
Omar Meky 01 de
16

Si está utilizando PHP, intente llamar htmlentitieso htmlspecialcharsfuncionar.

Lukasz Czerwinski
fuente
2
solo usarlos puede no ser suficiente, intente <option value='<?php echo htmlentities("' onmouseover='alert(123);' foo='"); ?>' />, asegúrese de usarlo con ENT_QUOTES, esto es seguro: <option value='<?php echo htmlentities("' onmouseover='alert(123);' foo='", ENT_QUOTES); ?>' /> pero además de ENT_QUOTES también debe agregar ENT_SUBSTITUTE y ENT_DISALLOWED, personalmente he usado este envoltorio durante años:function hhb_tohtml(string $str):string { return htmlentities($str, ENT_QUOTES | ENT_HTML401 | ENT_SUBSTITUTE | ENT_DISALLOWED, 'UTF-8', true); }
hanshenrik
12

Por sintaxis HTML , e incluso HTML5 , las siguientes son todas las opciones válidas:

<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>

Tenga en cuenta que si utiliza la sintaxis XML, las comillas (simples o dobles) son obligatorias.

Aquí hay un jsfiddle que muestra todo lo anterior funcionando .

aij
fuente
7

Otra opción es reemplazar las comillas dobles con comillas simples si no le importa lo que sea. Pero no menciono este:

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

Menciono este:

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

En mi caso usé esta solución.

csonuryilmaz
fuente
9
Pero si el valor contiene comillas simples y dobles, esto fallará
Raptor
@Raptor Dije que si el valor contiene comillas dobles, conviértalos en comillas simples. Si el valor contiene comillas simples, entonces no habrá problema.
csonuryilmaz
0

Realmente solo debe permitir datos no confiables en una lista blanca de buenos atributos como: alinear, alink, alt, bgcolor, border, cellpadding, cellpacing, 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, summary, tabindex, title, usemap, valign, value, vlink, vspace, width

Realmente desea mantener los datos no confiables fuera de los controladores de JavaScript, así como los atributos de identificación o nombre (pueden bloquear otros elementos en el DOM).

Además, si está colocando datos no confiables en un atributo SRC o HREF, entonces es realmente una URL no confiable, por lo que debe validar la URL, asegúrese de que NO sea un javascript: URL, y luego codifique la entidad HTML.

Más detalles sobre todo aquí: https://www.owasp.org/index.php/Abridged_XSS_Prevention_Cheat_Sheet

Jim Manico
fuente
3
Sé que esto es tarde, pero casi todos esos atributos están en desuso en HTML4.01 y se eliminan en 5. De todos modos, puede que ahora no importe, ya que hay mejores formas de protegerse, solo señalándolo.
trysis
1
La pregunta es sobre datos con comillas, no sobre datos no confiables.
Quentin
-3

No hay forma de escapar de las comillas en el valor de un texto de entrada ... pero puede usar javascript (o jquery):

<input type="input" name="myinput" id="myinput" value="" />
<script>document.getElementById("myinput").value="This input has a [\"]";</script>
Miguel
fuente
1
Su afirmación "No hay forma de escapar de las comillas en el valor de un texto de entrada" es simplemente errónea. Vea la respuesta aceptada de 2010 que ha recibido 276 votos.
Quentin
Discúlpame Quentin, pero ESA RESPUESTA dice que no hay forma de hacerlo. Dice que puede insertar una comilla doble codificada en html o puede usar comillas simples para delimitar la comilla doble, pero no es una forma de insertar una comilla doble en el valor definido con comillas dobles. Está proponiendo una alternativa a algo imposible, que es lo mismo que hago
Miguel
La forma de insertar una comilla doble en un valor delimitado con una comilla doble es usar la codificación html como acaba de decir.
Quentin el
(Hola Quentin ... estamos en línea) Solo digo que el valor de esa cadena no es una comilla doble, es un & quot ;, eso no es lo mismo.
Miguel
2
Si inserta un & quot; en un valor y lo envía, en el servidor recibe 6 caracteres, desde el & al ;. No recibe una cotización doble. No es lo mismo y no funciona para mí
Miguel