মেটা তথ্যের সাথে সম্পর্কিত ট্যাগগুলি
এই নিবন্ধটি মেটা-তথ্যের সঙ্গে সম্পর্কিত ট্যাগগুলিকে ব্যাখ্যা করে।
এটি <meta> ট্যাগ ব্যাখ্যা করে, যার মধ্যে SEO, রেসপন্সিভ ডিজাইন এবং Content-Security-Policy এর বিষয়বস্তু অন্তর্ভুক্ত রয়েছে।
YouTube Video
মেটা তথ্যের সাথে সম্পর্কিত ট্যাগগুলি
<meta> ট্যাগ
1<meta charset="UTF-8">
2<meta name="viewport" content="width=device-width, initial-scale=1.0"><meta>ট্যাগটি HTML ডকুমেন্টের জন্য মেটাডেটা সরবরাহ করে। মেটাডেটা পৃষ্ঠায় প্রদর্শিত হয় না তবে এটি সার্চ ইঞ্জিন এবং ব্রাউজার দ্বারা ব্যবহৃত হয়।<meta>ট্যাগটি পৃষ্ঠা বিবরণ, কীওয়ার্ড, লেখক তথ্য এবং প্রতিক্রিয়াশীল ডিজাইন সেটিংসের জন্য ব্যবহৃত হয়।
<meta name="viewport"> ট্যাগ
1<meta name="viewport" content="width=device-width, initial-scale=1"><meta name="viewport">ট্যাগটি বিভিন্ন ডিভাইসে ওয়েব পৃষ্ঠাগুলির লেআউট এবং স্কেলিং নিয়ন্ত্রণ করে। এটি সাধারণত প্রতিক্রিয়াশীল ডিজাইনে মোবাইল ডিভাইসে সঠিক প্রদর্শন নিশ্চিত করতে ব্যবহৃত হয়।
<meta name="description"> ট্যাগ
1<meta name="description" content="An example webpage"><meta name="description">ট্যাগটি একটি ওয়েব পৃষ্ঠার বিষয়বস্তু সংক্ষেপে বর্ণনা করতে ব্যবহৃত হয়। সার্চ ইঞ্জিনগুলি অনুসন্ধান ফলাফলে পৃষ্ঠার সংক্ষিপ্তসার প্রদর্শনের জন্য এই বিবরণটি ব্যবহার করে।
<meta name="keywords"> ট্যাগ
1<meta name="keywords" content="HTML, CSS, JavaScript"><meta name="keywords">ট্যাগটি পৃষ্ঠার বিষয়বস্তুর সাথে সম্পর্কিত কীওয়ার্ডের একটি তালিকা প্রদান করে। সার্চ ইঞ্জিনগুলি পৃষ্ঠার বিষয়বস্তুকে আরও ভালভাবে বুঝতে এই কীওয়ার্ডগুলি ব্যবহার করে।
<meta name="author"> ট্যাগ
1<meta name="author" content="John Doe"><meta name="author">ট্যাগটি ওয়েব পৃষ্ঠার লেখককে নির্দিষ্ট করে। এই তথ্যটি প্রধানত সার্চ ইঞ্জিন এবং সরঞ্জাম দ্বারা পৃষ্ঠার লেখককে সঠিকভাবে সনাক্ত করতে ব্যবহৃত হয়।
<meta http-equiv="refresh"> ট্যাগ
1<meta http-equiv="refresh" content="5; url=https://example.com"><meta http-equiv="refresh">ট্যাগটি নির্দিষ্ট সময় পরে স্বয়ংক্রিয়ভাবে পৃষ্ঠা রিফ্রেশ করতে বা অন্য URL এ পুনঃনির্দেশনা দিতে ব্যবহৃত হয়। এটি পৃষ্ঠা পুনরায় লোড করতে বা ব্যবহারকারীকে পুনঃনির্দেশনা দিতে সহায়ক।
<meta http-equiv="cache-control"> ট্যাগ
1<meta http-equiv="cache-control" content="no-cache"><meta http-equiv="cache-control">ট্যাগটি ওয়েব পৃষ্ঠার ক্যাশিং আচরণ নিয়ন্ত্রণ করতে ব্যবহৃত হয়। এটি নির্দিষ্ট করতে পারে যে পৃষ্ঠাটি ক্যাশে করা হবে কিনা বা পরবর্তী অ্যাক্সেসের সময় এটি পুনরায় যাচাই করা হবে।
<meta http-equiv="expires"> ট্যাগ
1<meta http-equiv="expires" content="Tue, 01 Jan 2025 00:00:00 GMT"><meta http-equiv="expires">ট্যাগটি পৃষ্ঠার বিষয়বস্তুর জন্য একটি মেয়াদ শেষ হওয়ার তারিখ সেট করে। নির্দিষ্ট তারিখটি অতিক্রান্ত হলে, বিষয়বস্তুটি পুরানো হয়ে যায় এবং ব্রাউজারকে একটি নতুন সংস্করণ ফিরে পেতে বলা হয়।
<meta http-equiv="X-UA-Compatible"> ট্যাগ
1<meta http-equiv="X-UA-Compatible" content="IE=edge"><meta http-equiv="X-UA-Compatible">ট্যাগটি ইন্টারনেট এক্সপ্লোরারের জন্য সামঞ্জস্যতা মোড নির্দিষ্ট করতে ব্যবহৃত হয়। এই ট্যাগটি নিশ্চিত করে যে ব্রাউজার পৃষ্ঠাটি প্রদর্শন করতে যথাযথ সংস্করণের রেন্ডারিং ইঞ্জিন ব্যবহার করে।
<meta http-equiv="content-security-policy"> ট্যাগ
একটি HTML meta ট্যাগে http-equiv="content-security-policy" অ্যাট্রিবিউট ব্রাউজারে নির্দিষ্ট নিরাপত্তা নীতি প্রয়োগ করার একটি ফাংশন, যা ওয়েব পেজের নিরাপত্তা উন্নত করতে সাহায্য করে। এই অ্যাট্রিবিউট ব্যবহার করে, ওয়েবসাইট ডেভেলপাররা রিসোর্স লোডিং এবং স্ক্রিপ্ট এক্সিকিউশন সংক্রান্ত নীতিমালা সেট করতে পারেন, যা XSS (Cross-Site Scripting) এবং ডেটা ইনজেকশন-এর মতো আক্রমণ প্রতিরোধ করে।
Content-Security-Policy কী?
Content-Security-Policy (CSP) একটি প্রকারের HTTP হেডার যা নিয়ন্ত্রণ করে যে একটি ওয়েব পেজ কোন বাহ্যিক রিসোর্স (ছবি, স্ক্রিপ্ট, স্টাইলশিট ইত্যাদি) ব্যবহার করতে পারবে এবং কোন ধরনের কোড কার্যকর করা যেতে পারে। এটি সাধারণত একটি HTTP হেডার হিসাবে পাঠানো হয়, তবে HTML এর মধ্যে meta ট্যাগ ব্যবহার করেও সংজ্ঞায়িত করা যেতে পারে। এই পদ্ধতিটি ক্লায়েন্ট সাইডে CSP নির্দিষ্ট করতে দেয়, যা সার্ভার সাইডে হেডার সেট করার পরিবর্তে ব্যবহার করা যেতে পারে।
উদাহরণস্বরূপ, আপনি HTML meta ট্যাগে CSP নিম্নরূপ সেট করতে পারেন:।
1<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://example.com; script-src 'self' https://apis.google.com">এই উদাহরণে, নিম্নলিখিত নীতিগুলি সেট করা হয়েছে:
default-src 'self': মূলত, সব রিসোর্স শুধুমাত্র একই উত্স (নিজেই) থেকে লোড করা হয়।img-src https://example.com: ছবি শুধুমাত্রhttps://example.comথেকে লোড করা হয়।script-src 'self' https://apis.google.com: স্ক্রিপ্ট শুধুমাত্র একই উত্স থেকে অথবাhttps://apis.google.comথেকে কার্যকর করা যেতে পারে।
http-equiv এবং HTTP হেডারের মধ্যে পার্থক্য
সাধারণত, Content-Security-Policy একটি HTTP হেডার হিসাবে সার্ভার থেকে ক্লায়েন্টে পাঠানো হয়। তবে, যদি আপনি ক্লায়েন্ট সাইডে meta ট্যাগ ব্যবহার করে সেট করেন, এটি সরাসরি HTML এ লেখা যেতে পারে।
তবে, একে HTTP হেডার হিসাবে সেট করা এবং meta ট্যাগ দ্বারা নির্দিষ্ট করার মধ্যে কিছু গুরুত্বপূর্ণ পার্থক্য রয়েছে:
-
অগ্রাধিকার: HTTP হেডার ব্যবহার করে পাঠানো একটি CSP
metaট্যাগে নির্ধারিত CSP এর উপরে প্রাধান্য পায়। এই অর্থে, একটি CSP যদি সার্ভার সাইডে সেট করা হয়, তবে এটি ক্লায়েন্ট সাইডে ব্যবহৃতmetaট্যাগ দ্বারা ওভাররাইট করা হবে না। -
প্রয়োগের সময়কাল: HTTP হেডারগুলির মাধ্যমে নির্ধারিত একটি CSP পৃষ্ঠাটি লোড হওয়ার আগে প্রয়োগ হয়। অন্যদিকে, একটি CSP যা
metaট্যাগের মাধ্যমে নির্দিষ্ট করা হয়েছে তা HTML পার্স করার সময় প্রয়োগ করা হয়, তাই রিসোর্স ইতিমধ্যে লোড হয়ে যেতে পারে।
CSP-এ উপলব্ধ নির্দেশিকা
CSP-তে, বিভিন্ন নির্দেশ ব্যবহার করা হয় নির্দিষ্ট রিসোর্সের লোড এবং কার্যকর করার অনুমতি বা অস্বীকার করার নীতিগুলি নির্ধারণ করতে। সাধারণ নির্দেশগুলির মধ্যে নিম্নলিখিতগুলি অন্তর্ভুক্ত থাকে:।
- default-src: সব রিসোর্সের জন্য ডিফল্ট উৎসের নীতি নির্ধারণ করে। এটি অন্যান্য নির্দেশগুলো দ্বারা নির্দিষ্ট না হওয়া রিসোর্সগুলিতে প্রয়োগ করা হয়।
- script-src: জাভাস্ক্রিপ্টের জন্য উৎস নির্ধারণ করে। XSS আক্রমণ প্রতিরোধে, আপনি বাহ্যিক সাইট থেকে স্ক্রিপ্ট লোডিং সীমিত করতে পারেন।
- style-src: CSS এর জন্য উৎস নির্ধারণ করে। বাহ্যিক উৎস থেকে স্টাইলশীট লোডিং সীমিত করে, আপনি আপনার সাইটের স্টাইলে আক্রমণ প্রতিরোধ করতে পারেন।
- img-src: ছবির জন্য উৎস নির্ধারণ করে। আপনি বাহ্যিক উৎস থেকে ছবি লোড করার সীমাবদ্ধতা আরোপ করতে পারেন।
- connect-src: XMLHttpRequest এবং WebSocket সংযোগগুলির জন্য অনুমোদিত URL নির্ধারণ করেন। এটি বাহ্যিক API এবং WebSocket যোগাযোগের নিরাপত্তা নিশ্চিত করে।
এই নির্দেশনাগুলি একত্রিত করে, আপনি আপনার ওয়েব পৃষ্ঠার সম্পদের জন্য বিস্তারিত নীতিমালা তৈরি করতে পারেন।
নিরাপত্তা বৃদ্ধির জন্য ব্যবহারিক CSP সেটিংস
নিচে CSP সেটিংসের একটি উদাহরণ দেওয়া হলো যা আপনার ওয়েবসাইটের নিরাপত্তা উন্নত করবে। এটি XSS আক্রমণ এবং তথ্য ফাঁসের ঝুঁকি হ্রাস করতে পারে।
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';">এই কনফিগারেশনের সাথে নিম্নলিখিত নীতিগুলি প্রয়োগ করা হয়:
default-src 'self': সমস্ত রিসোর্স কেবল একই উৎস থেকে লোড হবে।script-src 'self' https://trusted-cdn.com: স্ক্রিপ্টগুলি শুধুমাত্র একই উৎস বা একটি বিশ্বস্ত CDN থেকে লোড হবে।object-src 'none':objectট্যাগ ব্যবহার করা হয় না। এটি Flash বা প্লাগিন-ভিত্তিক আক্রমণ প্রতিরোধ করার জন্য ব্যবহৃত হয়।style-src 'self': স্টাইলশীটগুলি শুধুমাত্র উৎস থেকে নিজেই লোড করা হয়।base-uri 'self':<base>ট্যাগ দ্বারা সেট করা URL বেসটি কেবল উৎসেই সীমাবদ্ধ।form-action 'self': ফর্ম জমায়েত গন্তব্য কেবল উৎসেতে সীমাবদ্ধ। এটি ফর্ম ডেটা বহিস্থিত সাইটে পাঠানোর ঝুঁকি কমায়।
উপসংহার
http-equiv="content-security-policy" ব্যবহার করে HTML এর মধ্যে CSP সংজ্ঞায়িত করার মাধ্যমে ওয়েবপৃষ্ঠার নিরাপত্তা বৃদ্ধি করা সম্ভব। সঠিকভাবে কনফিগার করা CSP একটি শক্তিশালী সরঞ্জাম যা XSS আক্রমণ এবং তথ্য ফাঁসের ঝুঁকি হ্রাস করে এবং আপনার ওয়েবসাইট রক্ষা করে।
আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।