ASP.net: Antara Label dan Literal Control

Selama ini, untuk menampilkan teks di ASP.net saya lebih sering menuliskan langsung di tag HTML atau menggunakan label kontrol untuk teks yang dinamis. Ketika saya menemukan artikel yang mengatakan bahwa menampilkan teks dinamis di label control secara tidak hati-hati ternyata dapat membuat web yang kita bangun rawan terhadap Cross-site scripting (XSS) dan banyaknya tag html yang terbentuk karena banyaknya label yang saya gunakan. Saya lalu mulai melirik ke kontrol lain yang selama ini tidak pernah saya gunakan sama sekali, LiteralControl.

Literal Control sebenarnya mirip dengan label control, keduanya berfungsi untuk menampilkan teks di halaman web. Hal mendasar yang membedakan Literal dengan Label adalah Literal tidak menambahkan elemen html di halaman web dan literal tidak mempunyai property Style. Sedangkan label, akan menambahkan tag di halaman web, sehingga label dapat menerapkan style pada teks yang ditampilkannya.

Sebagai contoh, buat sebuah halaman web, dan tambahkan Label dan Literal control. Di code behind tulis kode berikut

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
	Label1.Text = "Ini teks di label ditulis tebal"
	Label1.Font.Bold = True

	Literal1.Text = "ini teks di literal"
End Sub

Jalankan, dan periksa page sourcenya, hasilnya akan seperti ini

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
	Untitled Page
</title></head>
<body>
    <form name="form1" method="post" action="Default.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTUyOTk4MzE4Mg9kFgICAw9kFgQCAQ8PFgYeBFRleH" />
</div>
    <div>
        <span id="Label1" style="font-weight:bold;">Ini teks di label ditulis tebal</span><br />
        ini teks di literal
    </div>
    </form>
</body>
</html>

Perhatikan, label akan membentuk tag HTML lengkap dengan style sedangkan literal hanya menuliskan teks tanpa tag HTML.Literal mempunyai property ‘Mode’ yang berfungsi untuk menghandle teks yang ditampilkan. Ada 3 mode

  • PassThrough : teks akan ditampilkan apa adanya, termasuk simbol-simbol html dan script. Teks yang ditampilkan akan diproses oleh browser sebagai html dan script.
  • Encode: teks yang berisi simbol-simbol html akan diubah, sehingga teks akan ditampilkan dan diperlakukan sebagai teks biasa bukan html atau script. Sebagai contoh, simbol < menjadi &lt, > menjadi &gt, & menjadi &amp dan seterusnya
  • Transform: teks akan di konversi untuk menyesuaikan markup language dari browser seperti HTML, XHTML, WML dan lainnya. Teks atau tag yang tidak sesuai akan dihilangkan.

Sebagai contoh, set propery mode dari Literal menjadi PassThrough

<asp:Literal ID="Literal1" runat="server" Mode="PassThrough"></asp:Literal>

Di code behind

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
	Dim teks As String = "Ini teks dengan <font size='10'>font 10</font><script>alert(""rawan XSS nih"");</script>"
	Literal1.Text = teks
End Sub

Ketika di jalankan, hasilnya seperti berikut, tag akan dianggap sebagai html sehingga teks di dalamnya diubah ukurannya. Tag juga dianggap sebagai script sehingga browser akan menjalankan script ini.

Literal with passthrough mode

Bagaimana dengan label? label juga akan menampilkan hasil yang sama seperti diatas, Tag html dan script akan dijalankan. Hal yang semacam inilah yang jika tidak ditangani dengan hati-hati akan membuat web yang kita bangun rawan terhadap XSS.

Lalu bagaimana agar teks html dan script ditampilkan apa-adanya sebagai teks biasa? Sekarang ubah mode dari literal menjadi ‘Encode’. Hasilnya akan seperti berikut. Semua teks akan ditampilkan apa adanya. Kalau kita lihat paga source, semua simbol telah diubah.

Literal with encode mode

Teks yang ditampilkan literal menggunakan mode encode

Page source dari Literal dengan Mode encode

Page source dari Literal dengan Mode encode

Karena label tidak memiliki property mode seperti literal, maka untuk menampilkan teks apa adanya gunakan method HtmlEncode sebelum teks.

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
	Dim teks As String = "Ini teks dengan <font size='10'>font 10</font><script>alert(""rawan XSS nih"");</script>"
        Label1.Text = HttpUtility.HtmlEncode(teks)
End Sub

Literal juga bisa digunakan untuk judul web dinamis yang ditempatkan dalam tag . Contoh, ubah bagian dari halaman web menjadi berikut

<head runat="server">
    <title>
        <asp:Literal ID="litJudul" runat="server"></asp:Literal>
    </title>
</head>

di method Page_Load tambahkan kode berikut litJudul.Text = “INI JUDUL WEB”
Harus saya akui, saya sendiri terlambat mengetahui kemampuan literal ini, masih banyak yang perlu di explore dari kontrol ini.

Kesimpulan

  • Jika ingin menampilkan teks dinamis tanpa style apapun, sebaiknya gunakan Literal yang lebih ‘hemat’, karena label akan membentuk tag html yang tidak diperlukan.
  • Jika teks dinamis ditampilkan dengan style tertentu, gunakan label. Karena literal tidak mempunyai property style.
  • Untuk mencegah Cross-Site Scripting (XSS) selalu gunakan mode encode untuk literal atau gunakan selalu HttpUtility.HtmlEncode() untuk label sebelum menampilkan teks ke halaman web.
  • Untuk menampilkan teks statis dihalaman web, sebaiknya tulis langsung dalam html, hindari label atau literal untuk mencegah ‘overkill’, karena keduanya memerlukan proses ke server

Semoga bermanfaat. Happy coding

About Yuniar

Penulis sekarang lebih banyak bekerja menggunakan teknologi Microsoft .NET secara umum dan TIDAK lagi menggunakan aplikasi MapXtreme.net dari MapInfo. Karena itu mohon maaf, jika pertanyaan-pertanyaan mengenai MapXtreme sudah tidak bisa saya jawab lagi.

Posted on 22 Maret 2011, in ASP.net and tagged , , , . Bookmark the permalink. Tinggalkan komentar.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s