Bagaimana cara menghindari kutipan di dalam atribut HTML?

267

Saya memiliki drop down pada halaman web yang rusak ketika string nilai berisi kutipan.

Nilainya "asd, tetapi dalam DOM selalu muncul sebagai string kosong.

Saya telah mencoba segala cara yang saya tahu untuk melarikan diri dari string dengan benar, tetapi tidak berhasil.

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

Bagaimana cara membuat ini di halaman sehingga pesan postback berisi nilai yang benar?

html xhtml escaping

— Chris
sumber

Bagaimana Anda menghasilkan halaman?

— SLaks

1

Bagaimana jika Anda menggunakan tanda kutip tunggal? <option value = '"asd'> test </option>

— Wim ten Brink

5

Saya harus menunjukkan tidak satu pun dari jawaban ini yang mengatakan bagaimana cara melepaskan string dengan benar untuk digunakan di dalam atribut html

— pengawas

4

@reconbot Itu tergantung pada bagaimana HTML dihasilkan. Pertanyaannya adalah tentang kutipan, jadi secara teknis jawaban yang diterima menjawab pertanyaan yang diajukan. Mengenai cara menghindari string dengan benar, saya tidak memiliki tautan yang berguna untuk kasus umum, tetapi dalam PHP Anda akan menggunakannya htmlentities.

— Matt Browne

mungkin duplikat dari bagaimana memiliki tanda kutip di nilai input html

— Ciro Santilli郝海东冠状病六四事件法轮功

344

" adalah cara yang benar, yang ketiga dari tes Anda:

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

Anda dapat melihat ini berfungsi di bawah, atau di 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>

Luaskan cuplikan

Atau, Anda dapat membatasi nilai atribut dengan tanda kutip tunggal:

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

— Andy E
sumber

17

Opsi keempat OP, & # 34 ;, juga merupakan cara yang valid untuk keluar dari penawaran. Ada manfaat menggunakan entitas html numerik di atas entitas yang dinamai, dalam entitas yang dinamai itu tidak mencakup semua karakter, sedangkan entitas numerik melakukannya. Daftar lengkap HTML4 ada di w3.org/TR/html4/sgml/entities.html .

— atk

38

@ atk: ya, "memetakan ke karakter yang sama dengan ", tetapi tidak ada manfaat menggunakan opsi numerik di sini karena "merupakan entitas bernama yang ditentukan. "juga lebih mudah diingat.

— Andy E

6

Saya setuju. Dalam kasus khusus ini, lebih mudah digunakan & quot ;. Saya hanya bermaksud menunjukkan kasus umum.

— atk

4

@ SIDU: ubah ke &quot;a(ganti &dengan &)

— Andy E

4

^ infinite loop

— Omar Meky

16

Jika Anda menggunakan PHP, coba panggil htmlentitiesatau htmlspecialcharsfungsi.

— Lukasz Czerwinski
sumber

2

hanya dengan menggunakannya mungkin tidak cukup, coba <option value='<?php echo htmlentities("' onmouseover='alert(123);' foo='"); ?>' />- pastikan Anda menggunakannya dengan ENT_QUOTES, ini aman:, <option value='<?php echo htmlentities("' onmouseover='alert(123);' foo='", ENT_QUOTES); ?>' /> tetapi selain ENT_QUOTES Anda juga harus menambahkan ENT_SUBSTITUTE dan ENT_DISALLOWED, secara pribadi saya telah menggunakan pembungkus ini selama bertahun-tahun:

function hhb_tohtml(string $str):string {     return htmlentities($str, ENT_QUOTES | ENT_HTML401 | ENT_SUBSTITUTE | ENT_DISALLOWED, 'UTF-8', true); }

— hanshenrik

12

Per sintaks HTML , dan bahkan HTML5 , berikut ini semua opsi yang valid:

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

Perhatikan bahwa jika Anda menggunakan sintaks XML , tanda kutip (tunggal atau ganda) diperlukan.

Berikut ini adalah jsfiddle yang menunjukkan semua pekerjaan di atas .

— aij
sumber

7

Pilihan lain adalah mengganti tanda kutip ganda dengan tanda kutip tunggal jika Anda tidak keberatan apa pun itu. Tapi saya tidak menyebutkan yang ini:

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

Saya menyebutkan yang ini:

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

Dalam kasus saya, saya menggunakan solusi ini.

— csonuryilmaz
sumber

9

Tetapi jika nilainya mengandung tanda kutip tunggal & ganda, ini akan gagal

— Raptor

@Raptor Saya katakan jika nilainya berisi tanda kutip ganda, ubah menjadi tanda kutip tunggal. Jika nilainya mengandung tanda kutip tunggal, maka itu tidak akan menjadi masalah.

— csonuryilmaz

1

Jika Anda menggunakan Javascript dan Lodash, maka Anda dapat menggunakan _.escape (), yang lolos ", ', <,>, dan &.

Lihat di sini: https://lodash.com/docs/#escape

— Andrew
sumber

0

Anda benar-benar hanya boleh mengizinkan data yang tidak dipercaya ke dalam daftar putih atribut yang baik seperti: align, alink, alt, bgcolor, border, cellpadding, cellspacing, kelas, warna, cols, colspan, coords, dir, wajah, tinggi, hspace, ismap, lang , marginheight, marginwidth, banyak, nohref, noresize, noshade, nowrap, ref, rel, rev, baris, rowspan, pengguliran, bentuk, rentang, ringkasan, tabindex, judul, usemap, valign, nilai, vlink, vspace, lebar

Anda benar-benar ingin menjaga data yang tidak dipercaya keluar dari penangan javascript serta atribut id atau nama (mereka dapat mengalahkan elemen lain di DOM).

Juga, jika Anda memasukkan data yang tidak tepercaya ke atribut SRC atau HREF, maka itu benar-benar URL yang tidak tepercaya sehingga Anda harus memvalidasi URL, pastikan BUKAN javascript: URL, dan kemudian entitas HTML menyandikan.

Detail lebih lanjut tentang semuanya ada di sini: https://www.owasp.org/index.php/Abridged_XSS_Prevention_Cheat_Sheet

— Jim Manico
sumber

3

Saya tahu ini terlambat, tetapi hampir semua atribut tersebut sudah usang dalam HTML4.01 dan dihapus di 5. Mungkin tidak penting sekarang, karena ada cara yang lebih baik untuk melindungi diri Anda sendiri, hanya menunjukkannya.

— trysis

1

Pertanyaannya adalah bertanya tentang data dengan karakter kutipan di dalamnya, bukan tentang data yang tidak dipercaya.

— Quentin

-3

Tidak ada cara untuk menghindari kutipan dalam nilai teks input ... tetapi Anda dapat menggunakan javascript (atau jquery):

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

— Miguel
sumber

1

Pernyataan Anda "Tidak ada cara untuk menghindari tanda kutip dalam nilai teks input" benar-benar salah. Lihat jawaban yang diterima dari 2010 yang telah menerima 276 suara.

— Quentin

Selamatkan saya, Quentin, tetapi JAWABAN ITU mengatakan bahwa tidak ada cara untuk melakukannya. Dikatakan bahwa Anda dapat memasukkan penawaran ganda kode html atau Anda dapat menggunakan penawaran sederhana untuk membatasi penawaran ganda, tetapi tidak ada cara untuk memasukkan penawaran ganda ke dalam nilai yang ditentukan dengan penawaran ganda. Ini mengusulkan alternatif untuk sesuatu yang mustahil, yang sama dengan apa yang saya lakukan

— Miguel

Cara untuk memasukkan penawaran ganda ke dalam nilai yang dibatasi dengan penawaran ganda adalah dengan menggunakan pengkodean html seperti yang baru saja Anda katakan.

— Quentin

(Halo Quentin ... kami online) Saya hanya mengatakan bahwa nilai string itu bukan kutipan ganda, adalah & quot ;, itu tidak sama.

— Miguel

2

Jika Anda menyisipkan & quot; dalam nilai dan Anda mengirimkannya, di server Anda menerima 6 karakter, dari & ke ;. Anda tidak menerima penawaran ganda. Itu tidak sama dan tidak bekerja untuk saya

— Miguel