Como escapar adequadamente de aspas dentro de atributos HTML?

267

Eu tenho uma lista suspensa em uma página da web que está quebrando quando a cadeia de valor contém uma citação.

O valor é "asd, mas no DOM sempre aparece como uma sequência vazia.

Eu tentei de todas as maneiras que sei escapar da corda corretamente, mas sem sucesso.

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

Como renderizo isso na página para que a mensagem de postagem contenha o valor correto?

html xhtml escaping Chris
fonte
Como você está gerando a página?
Slaks 25/10/10
1
E se você usar aspas simples? <opção value = '"asd'> test </option>
Wim ten Brink
5
Eu tenho a apontar nenhuma dessas respostas dizer como escapar corretamente cordas para uso dentro de atributos html
reconbot
4
@reconbot Isso dependeria de como o HTML estava sendo gerado. A pergunta era sobre aspas; portanto, tecnicamente, a resposta aceita responde à pergunta. Quanto a como escapar corretamente as strings, não tenho um link útil para o caso geral, mas no PHP você usaria htmlentities.
Matt Brown
possível duplicata de como ter aspas em valores de entrada de html
Ciro Santilli郝海东冠状病六四事件法轮功

Respostas:

344

&quot; é a maneira correta, o terceiro de seus testes:

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

Você pode ver isso funcionando abaixo, ou no 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 snippet

Como alternativa, você pode delimitar o valor do atributo com aspas simples:

<option value='"asd'>test</option>
Andy E
fonte
17
A quarta opção do OP, & # 34 ;, também é uma maneira válida de escapar de cotações. Há um benefício em usar entidades numéricas de html sobre entidades nomeadas, pois as entidades nomeadas não cobrem todos os caracteres, enquanto as entidades numéricas. A lista HTML4 completa está em w3.org/TR/html4/sgml/entities.html .
Atk
38
@ atk: sim, &quot;mapeia para o mesmo caractere que &#34;, mas não há benefício em usar a opção numérica aqui, porque &quot;é uma entidade nomeada definida. &quot;também é mais fácil de lembrar.
Andy E
6
Concordo. Nesse caso em particular, é mais fácil usar ". Eu pretendia apenas apontar o caso geral.
Atk
4
@SIDU: alterá-lo para &amp;quot;a(substitua o &com &amp;)
Andy E
4
^ loop infinito
Omar Meky
16

Se você estiver usando PHP, tente chamar htmlentitiesou htmlspecialcharsfunção.

Lukasz Czerwinski
fonte
2
apenas usá-los pode não ser suficiente, tente <option value='<?php echo htmlentities("' onmouseover='alert(123);' foo='"); ?>' />- certifique-se de usá-lo com ENT_QUOTES, isso é seguro: <option value='<?php echo htmlentities("' onmouseover='alert(123);' foo='", ENT_QUOTES); ?>' /> mas, além de ENT_QUOTES, você também deve adicionar ENT_SUBSTITUTE e ENT_DISALLOWED, pessoalmente, eu uso esse invólucro há anos:function hhb_tohtml(string $str):string { return htmlentities($str, ENT_QUOTES | ENT_HTML401 | ENT_SUBSTITUTE | ENT_DISALLOWED, 'UTF-8', true); }
hanshenrik
12

Por sintaxe HTML e até HTML5 , todas as opções a seguir são 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>

Observe que se você estiver usando a sintaxe XML, as aspas (simples ou duplas) serão necessárias.

Aqui está um jsfiddle mostrando todo o trabalho acima .

aij
fonte
7

Outra opção é substituir aspas duplas por aspas simples, se você não se importa. Mas eu não mencionei este:

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

Menciono este:

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

No meu caso, usei esta solução.

csonuryilmaz
fonte
9
Mas se o valor contém aspas simples e duplas, este irá falhar
Raptor
@ Raptor Eu disse que se o valor contiver aspas duplas, converta-as em aspas simples. Se o valor contiver aspas simples, não haverá problema.
csonuryilmaz
0

Você realmente só deve permitir dados não confiáveis ​​em uma lista de permissões de bons atributos como: alinhar, alink, alt, bgcolor, borda, cellpadding, cellpacing, classe, cor, colunas, colspan, cordas, dir, face, altura, hspace, ismap, lang , marginheight, marginwidth, multiple, nohref, noresize, noshade, nowrap, ref, rel, rev, linhas, tablespan, rolagem, forma, extensão, resumo, tabindex, title, usemap, valign, value, vlink, vspace, width

Você realmente deseja manter os dados não confiáveis ​​fora dos manipuladores javascript, bem como dos atributos id ou name (eles podem prejudicar outros elementos no DOM).

Além disso, se você estiver colocando dados não confiáveis ​​em um atributo SRC ou HREF, é realmente um URL não confiável; portanto, para validar o URL, verifique se NÃO é um javascript: URL e, em seguida, codifique a entidade HTML.

Mais detalhes sobre tudo aqui: https://www.owasp.org/index.php/Abridged_XSS_Prevention_Cheat_Sheet

Jim Manico
fonte
3
Sei que está atrasado, mas quase todos esses atributos foram preteridos no HTML4.01 e removidos no 5. Pode não ser importante agora, pois existem maneiras melhores de se proteger, apenas apontando.
trysis
1
A pergunta é sobre dados com caracteres de aspas, não sobre dados não confiáveis.
Quentin
-3

Não há como escapar de aspas no valor de um texto de entrada ... mas você pode usar javascript (ou jquery):

<input type="input" name="myinput" id="myinput" value="" />
<script>document.getElementById("myinput").value="This input has a [\"]";</script>
Miguel
fonte
1
Sua afirmação "Não há como escapar de aspas no valor de um texto de entrada" está completamente errada. Veja a resposta aceita de 2010 que recebeu 276 votos positivos.
Quentin
Desculpe-me, Quentin, mas essa resposta diz que não há como fazê-lo. Ele diz que você pode inserir uma aspas duplas codificada em html ou pode usar aspas simples para delimitar aspas duplas, mas não é possível inserir aspas duplas no valor definido com aspas duplas. Ele está propondo uma alternativa para algo impossível, que é o mesmo que eu faço
Miguel #:
A maneira de inserir aspas duplas em um valor delimitado por aspas duplas é usar a codificação html como você acabou de dizer.
Quentin
(Olá Quentin ... estamos online) Estou apenas dizendo que o valor dessa string não é aspas duplas, é um "quot", que não é o mesmo.
Miguel
2
Se você inserir um & quot; em um valor e você o envia, no servidor você recebe 6 caracteres, do & para o ;. Você não recebe uma cotação dupla. Não é o mesmo e ele não funciona para mim
Miguel