Mga Tag na Kaugnay ng Meta na Impormasyon

Ipinaliwanag ng artikulong ito ang mga tag na may kaugnayan sa meta-impormasyon.

Ipinaliwanag nito ang <meta> na tag, kabilang ang mga aspeto na may kaugnayan sa SEO, responsive na disenyo, at Content-Security-Policy.

YouTube Video

Mga Tag na Kaugnay ng Meta na Impormasyon

Tag na <meta>

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

• Ang <meta> tag ay nagbibigay ng metadata para sa HTML document. Ang metadata ay hindi ipinapakita sa pahina ngunit ginagamit ng mga search engine at browser. Ang <meta> tag ay ginagamit para sa mga deskripsyon ng pahina, mga keyword, impormasyon ng may-akda, at mga setting ng responsive na disenyo.

Tag na <meta name="viewport">

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

• Ang <meta name="viewport"> tag ay kumokontrol sa layout at scaling ng mga web page sa iba't ibang device. Karaniwang ginagamit ito sa responsive na disenyo upang matiyak ang tamang pagpapakita sa mga mobile device.

Tag na <meta name="description">

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

• Ang <meta name="description"> tag ay ginagamit upang ilarawan nang maiksi ang nilalaman ng isang web page. Ginagamit ng mga search engine ang paglalarawang ito upang ipakita ang buod ng pahina sa mga resulta ng paghahanap.

Tag na <meta name="keywords">

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

• Nagbibigay ang <meta name="keywords"> tag ng listahan ng mga keyword na may kaugnayan sa nilalaman ng pahina. Ginagamit ng mga search engine ang mga keyword na ito upang mas maintindihan ang nilalaman ng pahina.

Tag na <meta name="author">

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

• Itinatakda ng <meta name="author"> tag ang may-akda ng web page. Pangunahing ginagamit ng mga search engine at mga tool ang impormasyong ito upang tiyak na makilala ang may-akda ng pahina.

Tag na <meta http-equiv="refresh">

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

• Ginagamit ang <meta http-equiv="refresh"> tag upang awtomatikong i-refresh ang pahina o i-redirect sa ibang URL pagkatapos ng tinukoy na oras. Ito ay kapaki-pakinabang sa muling pag-load ng pahina o pag-redirect ng user.

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

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

• Ginagamit ang <meta http-equiv="cache-control"> tag upang kontrolin ang caching behavior ng web page. Maaari nitong tukuyin kung i-cache ang pahina o i-revalidate ito sa susunod na pag-access.

Tag na <meta http-equiv="expires">

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

• Itinatakda ng <meta http-equiv="expires"> tag ang expiration date para sa nilalaman ng pahina. Kapag lumampas na ang tinukoy na petsa, ang nilalaman ay nagiging lipas na, at ang browser ay hinihikayat na kunin ang bagong bersyon.

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

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

• Ginagamit ang <meta http-equiv="X-UA-Compatible"> tag upang tukuyin ang compatibility mode para sa Internet Explorer. Tinitiyak ng tag na ito na ginagamit ng browser ang tamang bersyon ng rendering engine upang ipakita ang pahina.

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

Ang attribut na http-equiv="content-security-policy" sa isang HTML meta tag ay isang paraan upang magamit ang partikular na mga patakaran sa seguridad sa browser para mapalakas ang seguridad ng web page. Gamit ang attribut na ito, maaaring magtakda ng mga patakaran ang mga developer ng website tungkol sa paglo-load ng mga resources at pag-execute ng mga script upang maiwasan ang mga pag-atake gaya ng XSS (Cross-Site Scripting) at data injection.

Ano ang Content-Security-Policy?

Ang Content-Security-Policy (CSP) ay isang uri ng HTTP header na ginagamit upang kontrolin kung anu-anong panlabas na resources (mga larawan, script, stylesheet, atbp.) ang maaaring i-load ng isang web page at kung anong uri ng code ang maaaring i-execute. Kadalasang ipinapadala ito bilang isang HTTP header ngunit maaari rin itong itakda sa loob ng HTML gamit ang isang meta tag. Ang pamamaraang ito ay nagpapahintulot na tukuyin ang CSP sa client side sa halip na itakda ang headers sa server side.

Halimbawa, maaari mong itakda ang CSP sa HTML meta tag tulad ng sumusunod:.

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

Sa halimbawang ito, ang sumusunod na mga polisiya ay naitakda:

• default-src 'self': Karaniwan, lahat ng resources ay ila-load lamang mula sa parehong pinagmulan (sarili nito).
• img-src https://example.com: Ang mga larawan ay ila-load lamang mula sa https://example.com.
• script-src 'self' https://apis.google.com: Ang mga script ay maaaring i-execute lamang mula sa parehong pinagmulan o mula sa https://apis.google.com.

Mga pagkakaiba sa pagitan ng http-equiv at mga HTTP header

Karaniwan, ang Content-Security-Policy ay ipinapadala mula sa server papunta sa client bilang isang HTTP header. Gayunpaman, kung itatakda mo ito sa client side gamit ang meta na tag, maaari itong direktang isulat sa HTML.

Gayunpaman, may ilang mahahalagang pagkakaiba sa pagitan ng pagtatakda nito bilang isang HTTP header at pagtukoy nito gamit ang isang meta tag:

1. Prayoridad: Ang isang CSP na ipinadala sa pamamagitan ng HTTP headers ay mas uunahin kaysa sa isa na tinukoy gamit ang isang meta tag. Ibig sabihin nito, kung ang isang CSP ay itinakda sa server side, hindi ito mapapalitan ng isang meta tag na ginamit sa client side.

2. Oras ng Aplikasyon: Ang isang CSP na tinukoy sa pamamagitan ng HTTP headers ay inilalapat bago ma-load ang pahina. Sa kabilang banda, ang isang CSP na tinukoy gamit ang isang meta tag ay inilalapat kapag ang HTML ay na-parse na, kaya posibleng naka-load na ang mga resources.

Mga direktiba na magagamit sa CSP

Sa CSP, ginagamit ang iba't ibang direktiba para tukuyin ang mga patakaran na nagpapahintulot o nagbabawal sa paglo-load at pag-execute ng ilang uri ng resources. Karaniwang mga direktiba ay kinabibilangan ng mga sumusunod:.

• default-src: Tinutukoy ang default na patakaran ng source para sa lahat ng resources. Ito ay nalalapat sa mga resources na hindi tinukoy ng ibang mga direktiba.
• script-src: Tinutukoy ang source para sa JavaScript. Upang maiwasan ang mga XSS na pag-atake, maaari mong higpitan ang paglo-load ng mga script mula sa panlabas na mga site.
• style-src: Tinutukoy ang source para sa CSS. Sa pamamagitan ng paghihigpit sa paglo-load ng mga stylesheet mula sa panlabas na pinagmulan, maaari mong maiwasan ang mga pag-atake sa estilo ng iyong site.
• img-src: Tinutukoy ang source para sa mga larawan. Maaari mong higpitan ang paglo-load ng mga larawan mula sa panlabas na mga pinagmulan.
• connect-src: Tinutukoy ang mga URL na pinapayagan para sa XMLHttpRequests at mga WebSocket na koneksyon. Tinitiyak nito ang seguridad ng panlabas na API at mga komunikasyon sa WebSocket.

Sa pamamagitan ng pagsasama ng mga direktiba na ito, maaari kang makabuo ng detalyadong mga patakaran para sa mga mapagkukunan sa iyong web page.

Praktikal na mga setting ng CSP para sa pagpapahusay ng seguridad

Narito ang isang halimbawa ng mga setting ng CSP upang mapabuti ang seguridad ng iyong website. Maaaring mabawasan nito ang panganib ng mga XSS na pag-atake at pagtagas ng 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';">

Ang sumusunod na mga patakaran ay inilalapat sa konfigurasyong ito:

• default-src 'self': Lahat ng mga mapagkukunan ay ikinakalat lamang mula sa parehong origin.
• script-src 'self' https://trusted-cdn.com: Ang mga script ay ikinakalat lamang mula sa parehong origin o isang pinagkakatiwalaang CDN.
• object-src 'none': Hindi ginagamit ang tag na object. Ito ay upang maiwasan ang mga pag-atake batay sa Flash o plugin.
• style-src 'self': Ang mga stylesheet ay ikinakarga lamang mula sa mismong pinagmulan.
• base-uri 'self': Ang base ng URL na itinakda ng <base> na tag ay limitado sa mismong pinagmulan.
• form-action 'self': Ang patutunguhan ng form submission ay limitado sa mismong pinagmulan. Binabawasan nito ang panganib na ang data ng form ay maipadala sa mga panlabas na site.

Konklusyon

Sa paggamit ng http-equiv="content-security-policy" upang tukuyin ang CSP sa loob ng HTML, posible mong palakasin ang seguridad ng web page. Ang tamang pagkaka-configure ng CSP ay isang makapangyarihang kasangkapan na nakakabawas ng panganib ng mga XSS na pag-atake at pagtagas ng data at pinoprotektahan ang iyong website.

Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.

YouTube Video