Tag Berkaitan dengan Maklumat Meta

Artikel ini menjelaskan tag yang berkaitan dengan meta-maklumat.

Ia menerangkan tag <meta>, termasuk perkara yang berkaitan dengan SEO, reka bentuk responsif, dan Content-Security-Policy.

YouTube Video

Tag Berkaitan dengan Maklumat 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 dipaparkan pada halaman tetapi digunakan oleh enjin carian dan peramban. Tag <meta> digunakan untuk penerangan halaman, kata kunci, maklumat pengarang, dan tetapan reka bentuk responsif.

Tag <meta name="viewport">

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

• Tag <meta name="viewport"> mengawal susun atur dan penskalaan halaman web pada peranti yang berbeza. Ia biasanya digunakan dalam reka bentuk responsif untuk memastikan paparan yang betul pada peranti mudah alih.

Tag <meta name="description">

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

• Tag <meta name="description"> digunakan untuk menerangkan secara ringkas kandungan halaman web. Enjin carian menggunakan penerangan ini untuk memaparkan ringkasan halaman dalam hasil carian.

Tag <meta name="keywords">

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

• Tag <meta name="keywords"> menyediakan senarai kata kunci yang berkaitan dengan kandungan halaman. Enjin carian menggunakan kata kunci ini untuk memahami kandungan halaman dengan lebih baik.

Tag <meta name="author">

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

• Tag <meta name="author"> menentukan pengarang laman web. Maklumat ini kebanyakannya digunakan oleh enjin carian dan alat untuk mengenal pasti pengarang halaman dengan tepat.

Tag <meta http-equiv="refresh">

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

• Tag <meta http-equiv="refresh"> digunakan untuk menyegarkan semula halaman secara automatik atau mengalih ke URL lain selepas masa yang ditentukan. Ia berguna untuk memuat semula halaman atau mengalih pengguna.

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

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

• Tag <meta http-equiv="cache-control"> digunakan untuk mengawal perilaku caching laman web. Ia boleh menentukan sama ada untuk menyimpan halaman dalam cache atau mengesahkannya semula pada 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 tarikh luput untuk kandungan halaman. Setelah tarikh yang ditentukan berlalu, kandungan menjadi tidak sah, dan pelayar diarahkan untuk mendapatkan 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 mod keserasian untuk Internet Explorer. Tag ini memastikan bahawa pelayar menggunakan versi enjin rendering yang sesuai untuk memaparkan halaman.

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

Atribut http-equiv="content-security-policy" dalam tag meta HTML adalah fungsi untuk menerapkan peraturan keselamatan tertentu dalam pelayar bagi meningkatkan keselamatan halaman web. Dengan menggunakan atribut ini, pembangun laman web dapat menetapkan dasar berkaitan pemuatan sumber dan pelaksanaan skrip untuk mencegah serangan seperti XSS (Cross-Site Scripting) dan penyuntikan data.

Apakah Content-Security-Policy?

Content-Security-Policy (CSP) adalah sejenis header HTTP yang digunakan untuk mengawal sumber luaran (imej, skrip, helaian gaya, dll.) yang boleh dimuatkan oleh halaman web dan jenis kod yang boleh dilaksanakan. Ia biasanya dihantar sebagai header HTTP tetapi juga boleh ditakrifkan dalam HTML menggunakan tag meta. Kaedah ini membolehkan penentuan CSP pada sisi klien bukannya menetapkan header pada sisi pelayan.

Sebagai contoh, anda boleh menetapkan CSP dalam tag meta HTML seperti 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, dasar berikut ditetapkan:

• default-src 'self': Secara asasnya, semua sumber hanya dimuatkan dari asal yang sama (dirinya sendiri).
• img-src https://example.com: Imej hanya dimuatkan dari https://example.com.
• script-src 'self' https://apis.google.com: Skrip hanya boleh dilaksanakan dari asal yang sama atau dari https://apis.google.com.

Perbezaan antara http-equiv dan header HTTP

Biasanya, Content-Security-Policy dihantar dari pelayan ke klien sebagai header HTTP. Namun, jika anda menetapkannya di sisi klien menggunakan tag meta, ia boleh ditulis terus dalam HTML.

Namun, ada beberapa perbezaan penting antara menetapkannya sebagai header HTTP dan menentukannya dengan tag meta:

1. Keutamaan: CSP yang dihantar melalui header HTTP lebih diutamakan daripada yang ditentukan dalam tag meta. Ini bermaksud jika CSP ditetapkan pada sisi pelayan, ia tidak akan ditimpa oleh tag meta yang digunakan pada sisi klien.

2. Masa Aplikasi: CSP yang ditentukan melalui header HTTP diterapkan sebelum halaman dimuatkan. Sebaliknya, CSP yang ditentukan melalui tag meta diterapkan apabila HTML dianalisis, jadi sumber mungkin sudah dimuatkan.

Arahan yang tersedia dalam CSP

Dalam CSP, pelbagai arahan digunakan untuk menentukan dasar yang membenarkan atau melarang pemuatan dan pelaksanaan jenis sumber tertentu. Arahan biasa termasuk yang berikut:.

• default-src: Menentukan dasar sumber lalai untuk semua sumber. Ia diterapkan pada sumber yang tidak ditentukan oleh arahan lain.
• script-src: Menentukan sumber untuk JavaScript. Untuk mencegah serangan XSS, anda boleh mengehadkan pemuatan skrip dari laman luaran.
• style-src: Menentukan sumber untuk CSS. Dengan mengehadkan pemuatan helaian gaya dari sumber luaran, anda boleh mencegah serangan terhadap gaya laman anda.
• img-src: Menentukan sumber untuk imej. Anda boleh mengehadkan pemuatan imej dari sumber luaran.
• connect-src: Menentukan URL yang dibenarkan untuk XMLHttpRequests dan sambungan WebSocket. Ini memastikan keselamatan komunikasi API luaran dan WebSocket.

Dengan menggabungkan arahan ini, anda boleh membina dasar terperinci untuk sumber pada halaman web anda.

Tetapan CSP praktikal untuk meningkatkan keselamatan

Di bawah adalah contoh tetapan CSP untuk meningkatkan keselamatan laman web anda. Ini boleh mengurangkan 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';">

Dasar berikut digunakan dengan konfigurasi ini:

• default-src 'self': Semua sumber hanya dimuatkan dari asal yang sama.
• script-src 'self' https://trusted-cdn.com: Skrip hanya dimuatkan dari asal yang sama atau CDN yang dipercayai.
• object-src 'none': Tag object tidak digunakan. Ini adalah untuk mengelakkan serangan berasaskan Flash atau pemalam.
• style-src 'self': Stylesheet hanya dimuat dari asalnya sahaja.
• base-uri 'self': Asas URL yang ditetapkan oleh tag <base> dibatasi kepada asalnya sahaja.
• form-action 'self': Destinasi penyerahan borang dibatasi kepada asalnya sahaja. Ini mengurangkan risiko data borang dihantar ke laman web luar.

Kesimpulan

Dengan menggunakan http-equiv="content-security-policy" untuk mendefinisikan CSP dalam HTML, adalah mungkin untuk meningkatkan keselamatan halaman web. CSP yang dikonfigurasi dengan betul adalah alat yang kuat yang mengurangkan risiko serangan XSS dan kebocoran data serta melindungi laman web anda.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video