Tag Terkait dengan Informasi Meta

Artikel ini menjelaskan tentang tag yang terkait dengan meta-informasi.

Ini menjelaskan tag <meta>, termasuk aspek-aspek yang terkait dengan SEO, desain responsif, dan Content-Security-Policy.

YouTube Video

Tag Terkait dengan Informasi Meta

Tag <meta>

1<meta charset="UTF-8">
2<meta name="viewport" content="width=device-width, initial-scale=1.0">

• Tag <meta> menyediakan metadata untuk dokumen HTML. Metadata tidak ditampilkan di halaman tetapi digunakan oleh mesin pencari dan browser. Tag <meta> digunakan untuk deskripsi halaman, kata kunci, informasi penulis, dan pengaturan desain responsif.

Tag <meta name="viewport">

1<meta name="viewport" content="width=device-width, initial-scale=1">

• Tag <meta name="viewport"> mengontrol tata letak dan skala halaman web pada perangkat yang berbeda. Ini biasanya digunakan dalam desain responsif untuk memastikan tampilan yang tepat pada perangkat seluler.

Tag <meta name="description">

1<meta name="description" content="An example webpage">

• Tag <meta name="description"> digunakan untuk menjelaskan secara singkat isi dari halaman web. Mesin pencari menggunakan deskripsi ini untuk menampilkan ringkasan halaman dalam hasil pencarian.

Tag <meta name="keywords">

1<meta name="keywords" content="HTML, CSS, JavaScript">

• Tag <meta name="keywords"> menyediakan daftar kata kunci yang relevan dengan konten halaman. Mesin pencari menggunakan kata kunci ini untuk lebih memahami konten halaman.

Tag <meta name="author">

1<meta name="author" content="John Doe">

• Tag <meta name="author"> menentukan penulis halaman web. Informasi ini terutama digunakan oleh mesin pencari dan alat lain untuk mengidentifikasi penulis halaman dengan akurat.

Tag <meta http-equiv="refresh">

1<meta http-equiv="refresh" content="5; url=https://example.com">

• Tag <meta http-equiv="refresh"> digunakan untuk menyegarkan halaman secara otomatis atau mengarahkan ke URL lain setelah waktu yang ditentukan. Ini berguna untuk memuat ulang halaman atau mengarahkan pengguna.

Tag <meta http-equiv="cache-control">

1<meta http-equiv="cache-control" content="no-cache">

• Tag <meta http-equiv="cache-control"> digunakan untuk mengontrol perilaku caching halaman web. Ini dapat menentukan apakah halaman harus dicache atau divalidasi kembali setelah akses berikutnya.

Tag <meta http-equiv="expires">

1<meta http-equiv="expires" content="Tue, 01 Jan 2025 00:00:00 GMT">

• Tag <meta http-equiv="expires"> menetapkan tanggal kedaluwarsa untuk konten halaman. Setelah tanggal yang ditentukan berlalu, konten menjadi usang, dan browser diminta untuk mengambil versi baru.

Tag <meta http-equiv="X-UA-Compatible">

1<meta http-equiv="X-UA-Compatible" content="IE=edge">

• Tag <meta http-equiv="X-UA-Compatible"> digunakan untuk menentukan mode kompatibilitas untuk Internet Explorer. Tag ini memastikan bahwa browser menggunakan versi mesin rendering yang tepat untuk menampilkan halaman.

Tag <meta http-equiv="content-security-policy">

Atribut http-equiv="content-security-policy" dalam tag meta HTML adalah sebuah fungsi untuk menerapkan aturan keamanan tertentu di browser guna meningkatkan keamanan halaman web. Dengan menggunakan atribut ini, pengembang situs web dapat menetapkan kebijakan terkait pemuatan sumber daya dan eksekusi skrip untuk mencegah serangan seperti XSS (Cross-Site Scripting) dan injeksi data.

Apa itu Content-Security-Policy?

Content-Security-Policy (CSP) adalah jenis header HTTP yang digunakan untuk mengontrol sumber daya eksternal (gambar, skrip, stylesheet, dll.) yang dapat dimuat sebuah halaman web dan jenis kode yang dapat dieksekusi. Biasanya dikirim sebagai header HTTP tetapi juga dapat didefinisikan dalam HTML menggunakan tag meta. Metode ini memungkinkan penentuan CSP di sisi klien daripada mengatur header di sisi server.

Sebagai contoh, Anda dapat mengatur CSP dalam tag meta HTML sebagai berikut:.

1<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://example.com; script-src 'self' https://apis.google.com">

Dalam contoh ini, kebijakan berikut ditetapkan:

• default-src 'self': Pada dasarnya, semua sumber daya hanya dimuat dari asal yang sama (diri sendiri).
• img-src https://example.com: Gambar hanya dimuat dari https://example.com.
• script-src 'self' https://apis.google.com: Skrip hanya dapat dijalankan dari asal yang sama atau dari https://apis.google.com.

Perbedaan antara http-equiv dan header HTTP

Biasanya, Content-Security-Policy dikirim dari server ke klien sebagai header HTTP. Namun, jika Anda menetapkannya di sisi klien menggunakan tag meta, itu dapat ditulis langsung di HTML.

Namun, ada beberapa perbedaan penting antara mengaturnya sebagai header HTTP dan menentukannya dengan tag meta:

1. Prioritas: CSP yang dikirim melalui header HTTP memiliki prioritas lebih tinggi dibandingkan yang ditentukan dalam tag meta. Ini berarti bahwa jika CSP ditetapkan di sisi server, itu tidak akan digantikan oleh tag meta yang digunakan di sisi klien.

2. Waktu Penerapan: CSP yang ditentukan melalui header HTTP diterapkan sebelum halaman dimuat. Sebaliknya, CSP yang ditentukan melalui tag meta diterapkan saat HTML diparse, sehingga sumber daya mungkin sudah dimuat.

Petunjuk yang tersedia dalam CSP

Dalam CSP, berbagai direktif digunakan untuk menentukan kebijakan yang mengizinkan atau melarang pemuatan dan eksekusi jenis sumber daya tertentu. Direktif yang umum termasuk yang berikut ini:.

• default-src: Menentukan kebijakan sumber default untuk semua sumber daya. Ini berlaku untuk sumber daya yang tidak ditentukan oleh direktif lain.
• script-src: Menentukan sumber untuk JavaScript. Untuk mencegah serangan XSS, Anda dapat membatasi pemuatan skrip dari situs eksternal.
• style-src: Menentukan sumber untuk CSS. Dengan membatasi pemuatan stylesheet dari sumber eksternal, Anda dapat mencegah serangan terhadap gaya situs Anda.
• img-src: Menentukan sumber untuk gambar. Anda dapat membatasi pemuatan gambar dari sumber eksternal.
• connect-src: Menentukan URL yang diizinkan untuk XMLHttpRequest dan koneksi WebSocket. Hal ini memastikan keamanan komunikasi API eksternal dan WebSocket.

Dengan menggabungkan direktif ini, Anda dapat membangun kebijakan yang terperinci untuk sumber daya di laman web Anda.

Pengaturan CSP praktis untuk meningkatkan keamanan

Berikut adalah contoh pengaturan CSP untuk meningkatkan keamanan situs web Anda. Hal ini dapat mengurangi risiko serangan XSS dan kebocoran data.

1<meta http-equiv="Content-Security-Policy"
2    content="default-src 'self'; script-src 'self' https://trusted-cdn.com; object-src 'none'; style-src 'self'; base-uri 'self'; form-action 'self';">

Kebijakan berikut diterapkan dengan konfigurasi ini:

• default-src 'self': Semua sumber daya hanya dimuat dari asal yang sama.
• script-src 'self' https://trusted-cdn.com: Skrip hanya dimuat dari asal yang sama atau dari CDN terpercaya.
• object-src 'none': Tag object tidak digunakan. Hal ini untuk mencegah serangan berbasis Flash atau plugin.
• style-src 'self': Stylesheet hanya dimuat dari asalnya sendiri.
• base-uri 'self': Basis URL yang diatur oleh tag <base> dibatasi pada asalnya sendiri.
• form-action 'self': Tujuan pengiriman formulir dibatasi pada asalnya sendiri. Ini mengurangi risiko data formulir dikirim ke situs eksternal.

Kesimpulan

Dengan menggunakan http-equiv="content-security-policy" untuk mendefinisikan CSP dalam HTML, dimungkinkan untuk meningkatkan keamanan halaman web. CSP yang dikonfigurasi dengan benar adalah alat yang kuat yang mengurangi risiko serangan XSS dan kebocoran data serta melindungi situs web Anda.

Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.

YouTube Video