আপনার সাইটে নিরাপদে সামগ্রী এম্বেড করুন

Jack J

Alexandra Klepper

অন্যান্য পৃষ্ঠা বা সাইট থেকে বিষয়বস্তু শেয়ার করার সময় এম্বেড করা সামগ্রী হল আপনার সাইটে ব্যবহারকারীদের রাখার সর্বোত্তম উপায়। এটি একটি এমবেডেড টুইটের মতো ছোট হতে পারে, যা টুইটারের শৈলী এবং বিন্যাসে প্রদর্শিত হয়। এটি আপনার নিজের মধ্যে এম্বেড করা সম্পূর্ণ আলাদা সাইটের মতো বড় হতে পারে, যেমন একটি এমবেড করা Shopify দোকান যেখানে দর্শকরা আপনার সাইটটি না রেখেই কেনাকাটা করতে পারে।

এখন আগের চেয়ে অনেক বেশি, এটা গুরুত্বপূর্ণ যে আমাদের সাইটগুলি সুরক্ষিত থাকে যখন আমরা বিষয়বস্তু এম্বেড করি।

ডেভেলপাররা একটি ওয়েবসাইটে কন্টেন্ট এম্বেড করতে পারে এমন বিভিন্ন উপায় রয়েছে। সবচেয়ে সাধারণ কৌশলটি হল একটি <iframe> ব্যবহার করা, যা আপনাকে শুধুমাত্র একটি URL দিয়ে আপনার সাইটে যেকোনো বিষয়বস্তু এম্বেড করতে দেয়। একটি আইফ্রেমকে আরও সুরক্ষিত করতে sandbox অ্যাট্রিবিউট যোগ করা ইতিমধ্যেই সম্ভব৷

বিকল্পভাবে, আপনি একটি প্রস্তাবিত HTML উপাদান ব্যবহার করতে পারেন:

• <fencedframe> তৃতীয় পক্ষের বিষয়বস্তু এম্বেড করার গোপনীয়তা-সংরক্ষণের উপায় হিসেবে প্রস্তাবিত।
• <portal> আরো নির্বিঘ্ন পৃষ্ঠা পরিবর্তনের জন্য প্রস্তাবিত।

আপনার এম্বেড করা সামগ্রীর নিরাপত্তা কীভাবে উন্নত করা যায় তা শিখতে পড়ুন।

iframes দিয়ে এম্বেড করুন

আইফ্রেমগুলি সমস্ত ধরণের ব্যবহারের ক্ষেত্রে ব্যবহার করা যেতে পারে, যেমন একটি পরিচিতি পৃষ্ঠায় মানচিত্র বা ফর্ম যোগ করা এবং বিজ্ঞাপন প্রদর্শন করা।

<iframe src="https://example.com/maps"></iframe>

প্রতিটি আইফ্রেমের নিজস্ব সেশন ইতিহাস এবং নথি সহ নিজস্ব ব্রাউজিং প্রসঙ্গ রয়েছে। যে প্রসঙ্গটি iframe এম্বেড করে তাকে অভিভাবক ব্রাউজিং প্রসঙ্গ হিসাবে উল্লেখ করা হয়।

আইফ্রেমে প্রদর্শিত তৃতীয় পক্ষের সামগ্রী postMessage() মাধ্যমে মূল সাইটের সাথে যোগাযোগ করতে পারে। এটি বিকাশকারীদের ব্রাউজিং প্রসঙ্গের মধ্যে নির্বিচারে মান পাঠাতে অনুমতি দেয়। মেসেজ রিসিভার ইভেন্ট লিসেনার onmessage ব্যবহার করে মানগুলি পেতে পারে।

// inside iframe
window.parent.postMessage("ping", "https://example.com");

// window
window.addEventListener("message", (event) => {
  console.log(event.data);
})

sandbox অ্যাট্রিবিউটের সাথে নিরাপত্তা যোগ করা হয়েছে

যদি কোনো আইফ্রেমে দূষিত বিষয়বস্তু স্থাপন করা হয়, তাহলে এটা সম্ভব যে অনিচ্ছাকৃত অ্যাকশনগুলি (যেমন জাভাস্ক্রিপ্ট এক্সিকিউশন বা ফর্ম জমা দেওয়া) সম্পাদিত হতে পারে। এটি এড়াতে, sandbox অ্যাট্রিবিউট আইফ্রেমে এক্সিকিউটেবল API গুলিকে সীমাবদ্ধ করে এবং সম্ভাব্য ক্ষতিকারক বৈশিষ্ট্যগুলিকে অক্ষম করে৷

<iframe src="https://example.com" sandbox></iframe>

স্যান্ডবক্স এমন কিছু API অনুপলব্ধ করতে পারে যা আপনার এম্বেড করা সামগ্রীর জন্য গুরুত্বপূর্ণ। একটি নিষ্ক্রিয় API এর অনুমতি দিতে, আপনি স্পষ্টভাবে স্যান্ডবক্স বৈশিষ্ট্যে একটি যুক্তি যোগ করতে পারেন৷

<iframe sandbox="allow-forms" src="https://example.com"></iframe>

sandbox স্পেসিফিকেশনের জন্য অনেকগুলি সম্ভাব্য মান রয়েছে, যার মধ্যে allow-forms , allow-same-origin , allow-popups এবং আরও অনেক কিছু রয়েছে৷

অনুমতি নীতি

যেহেতু ওয়েবের জন্য ক্রমবর্ধমান শক্তিশালী বৈশিষ্ট্যগুলি তৈরি করা হয়েছে, তাদের সকলের জন্য অনুমতিগুলি পরিচালনা করার জন্য অনুমতি নীতিগুলি তৈরি করা হয়েছিল৷ একটি অনুমতি নীতি একটি মূল সাইট এবং iframe সামগ্রীতে প্রয়োগ করা যেতে পারে৷ একটি অভিভাবক সাইটের অনুমতিগুলি allow বৈশিষ্ট্যটি ব্যবহার করে আইফ্রেমকেও দেওয়া যেতে পারে৷

<iframe src="https://example.com" allow="fullscreen"></iframe>

বেড়া ফ্রেম সঙ্গে এমবেড

একটি বেড়াযুক্ত ফ্রেম ( <fencedframe> ) হল একটি আইফ্রেমের অনুরূপ এমবেডেড সামগ্রীর জন্য একটি প্রস্তাবিত HTML উপাদান৷ একটি আইফ্রেমের বিপরীতে, একটি বেড়াযুক্ত ফ্রেম এটির এম্বেডিং প্রসঙ্গের সাথে যোগাযোগকে সীমাবদ্ধ করে যাতে ফ্রেমটিকে এম্বেডিং প্রসঙ্গের সাথে ভাগ না করে ক্রস-সাইট ডেটাতে অ্যাক্সেসের অনুমতি দেয়। একইভাবে, পিতামাতার পৃষ্ঠায় প্রথম পক্ষের ডেটা বেড়াযুক্ত ফ্রেমের সাথে ভাগ করা যাবে না।

<fencedframe src="https://3rd.party.example"></fencedframe>

বেড়াযুক্ত ফ্রেমগুলি হল একটি গোপনীয়তা স্যান্ডবক্স প্রস্তাব যা পরামর্শ দেয় যে শীর্ষ-স্তরের সাইটগুলিকে ডেটা ভাগ করা উচিত৷ গোপনীয়তা স্যান্ডবক্সের অনেক প্রস্তাবের উদ্দেশ্য তৃতীয়-পক্ষ কুকি বা অন্যান্য ট্র্যাকিং প্রক্রিয়া ছাড়াই ক্রস-সাইট ব্যবহারের ক্ষেত্রে সন্তুষ্ট করা। কিছু গোপনীয়তা স্যান্ডবক্স এপিআইগুলির একটি বেড়াযুক্ত ফ্রেমের মধ্যে রেন্ডার করার জন্য নির্বাচিত নথির প্রয়োজন হতে পারে৷

উদাহরণস্বরূপ, FLEDGE API বিজ্ঞাপন নিলামের বিজয়ীর জন্য একটি বেড়াযুক্ত ফ্রেম তৈরি করা হবে৷ FLEDGE API একটি অস্বচ্ছ উৎস প্রদান করবে, একটি অবস্থান-স্বাধীন URN স্কিম, যা একটি বেড়াযুক্ত ফ্রেমের মধ্যে রেন্ডার করতে পারে। অস্বচ্ছ সোর্স সাইটের মালিককে বিজ্ঞাপন উৎসের URL প্রকাশ না করেই তাদের সাইটে সামগ্রী প্রদর্শন করার অনুমতি দেয়।

<fencedframe src="urn:uuid:c36973b5-e5d9-de59-e4c4-364f137b3c7a"></fencedframe>

শেষ পর্যন্ত, বেড়াযুক্ত ফ্রেমগুলি iframes প্রতিস্থাপন করবে না। আপনি তাদের ব্যবহার করতে হবে না. যখন বিভিন্ন টপ-লেভেল পার্টিশনের ডেটা একই পৃষ্ঠায় প্রদর্শন করা প্রয়োজন তখন বেড়যুক্ত ফ্রেমগুলি ব্যবহারের জন্য আরও ব্যক্তিগত ফ্রেমের জন্য প্রস্তাব করা হয়।

পোর্টালের সাথে এম্বেড করুন

পোর্টাল ( <portal> ) একটি স্বাধীন ব্রাউজিং প্রসঙ্গ সহ একটি প্রস্তাবিত HTML উপাদান, যা পৃষ্ঠা পরিবর্তনের অভিজ্ঞতা উন্নত করতে পারে। পোর্টালগুলি iframe এর মত বিষয়বস্তু এম্বেড করে, কিন্তু ব্যবহারকারী পোর্টালের কোড অ্যাক্সেস করতে পারে না। একটি পোর্টাল শুধুমাত্র দেখার জন্য এবং ব্যবহারকারীদের দ্বারা ইন্টারঅ্যাক্ট করা যাবে না।

পোর্টালগুলি একটি একক-পৃষ্ঠা অ্যাপ্লিকেশনের বিরামবিহীন রূপান্তর সহ একটি বহু-পৃষ্ঠা অ্যাপ্লিকেশনের কম জটিলতা অফার করে। এই রূপান্তরগুলি অ্যানিমেটেড হতে পারে, দ্রুত ব্রাউজার উইন্ডোতে সামগ্রী প্রতিস্থাপন করে৷

<portal src="https://example.com/"></portal>

পোর্টাল স্পেসিফিকেশন এখনও বিকাশের প্রাথমিক পর্যায়ে রয়েছে।

এম্বেডের জন্য ব্যবহৃত অন্যান্য HTML উপাদান

ওয়েব ইতিহাস জুড়ে, কন্টেন্ট এম্বেড করার জন্য অনেকগুলি HTML উপাদান প্রস্তাবিত এবং API তৈরি করা হয়েছে। কিছু সময়ের জন্য, একাধিক <frame> এবং একটি <frameset> উপাদান দিয়ে সাইট তৈরি করা সাধারণ ছিল। একাধিক <frameset> উপাদান সহ সাইটগুলি ঠিকানা বারে মূল পৃষ্ঠার URL প্রদর্শন করে, অনেকগুলি পৃথক ফ্রেমের উত্স নির্বিশেষে। এটি সাইটের মধ্যে সামগ্রীর লিঙ্কগুলি ভাগ করা কঠিন করে তুলেছে৷ এই APIগুলি তখন থেকে অবহেলিত হয়েছে৷

এমনও একটা সময় ছিল যখন প্লাগইন প্রযুক্তি, যেমন Java <applet> উপাদান, অন্যান্য ব্যবহারের ক্ষেত্রে ব্যবহার করা হত। এটি পরে <object> উপাদান দ্বারা প্রতিস্থাপিত হয়। এই দুটি উপাদানই সাধারণত ফ্ল্যাশ প্লাগইনগুলি প্রদর্শনের জন্য ব্যবহৃত হত, তবে অন্যান্য HTML উপাদানগুলি (iframes এর মতো) প্রদর্শন করতেও ব্যবহৃত হত। অন্যান্য উপাদান, যেমন <canvas> , <audio> , <video> , এবং <svg> , <object> এবং <applet> উভয় উপাদানকে অপ্রচলিত করেছে।

যদিও <object> এবং <embed> আনুষ্ঠানিকভাবে এখনও অবমূল্যায়ন করা হয়নি, তবে তাদের এড়িয়ে চলাই ভালো, বিশেষ করে যেহেতু তাদের কিছু অদ্ভুত আচরণ রয়েছে। <applet> 2017 সালে HTML স্পেসিফিকেশন থেকে সরানো হয়েছিল।

উপসংহার

বিদ্যমান iframe স্পেসিফিকেশন ব্যবহার করে আপনি নিরাপদে যেকোনো ওয়েবসাইটে সামগ্রী এম্বেড করতে পারেন। নিরাপত্তা এবং শৈলীর উন্নতির জন্য <fencedframe> এবং <portal> সহ আরও HTML উপাদানের প্রস্তাব করা হয়েছে। আমরা ফেন্সড ফ্রেম প্রস্তাবের অগ্রগতি ভাগ করে নেওয়া চালিয়ে যাবো।

Jack J

Alexandra Klepper

অন্যান্য পৃষ্ঠা বা সাইট থেকে বিষয়বস্তু শেয়ার করার সময় এম্বেড করা সামগ্রী হল আপনার সাইটে ব্যবহারকারীদের রাখার সর্বোত্তম উপায়। এটি একটি এমবেডেড টুইটের মতো ছোট হতে পারে, যা টুইটারের শৈলী এবং বিন্যাসে প্রদর্শিত হয়। এটি আপনার নিজের মধ্যে এম্বেড করা সম্পূর্ণ আলাদা সাইটের মতো বড় হতে পারে, যেমন একটি এমবেড করা Shopify দোকান যেখানে দর্শকরা আপনার সাইটটি না রেখেই কেনাকাটা করতে পারে।

এখন আগের চেয়ে অনেক বেশি, এটা গুরুত্বপূর্ণ যে আমাদের সাইটগুলি সুরক্ষিত থাকে যখন আমরা বিষয়বস্তু এম্বেড করি।

ডেভেলপাররা একটি ওয়েবসাইটে কন্টেন্ট এম্বেড করতে পারে এমন বিভিন্ন উপায় রয়েছে। সবচেয়ে সাধারণ কৌশলটি হল একটি <iframe> ব্যবহার করা, যা আপনাকে শুধুমাত্র একটি URL দিয়ে আপনার সাইটে যেকোনো বিষয়বস্তু এম্বেড করতে দেয়। একটি আইফ্রেমকে আরও সুরক্ষিত করতে sandbox অ্যাট্রিবিউট যোগ করা ইতিমধ্যেই সম্ভব৷

বিকল্পভাবে, আপনি একটি প্রস্তাবিত HTML উপাদান ব্যবহার করতে পারেন:

• <fencedframe> তৃতীয় পক্ষের বিষয়বস্তু এম্বেড করার গোপনীয়তা-সংরক্ষণের উপায় হিসেবে প্রস্তাবিত।
• <portal> আরো নির্বিঘ্ন পৃষ্ঠা পরিবর্তনের জন্য প্রস্তাবিত।

আপনার এম্বেড করা সামগ্রীর নিরাপত্তা কীভাবে উন্নত করা যায় তা শিখতে পড়ুন।

iframes দিয়ে এম্বেড করুন

আইফ্রেমগুলি সমস্ত ধরণের ব্যবহারের ক্ষেত্রে ব্যবহার করা যেতে পারে, যেমন একটি পরিচিতি পৃষ্ঠায় মানচিত্র বা ফর্ম যোগ করা এবং বিজ্ঞাপন প্রদর্শন করা।

<iframe src="https://example.com/maps"></iframe>

প্রতিটি আইফ্রেমের নিজস্ব সেশন ইতিহাস এবং নথি সহ নিজস্ব ব্রাউজিং প্রসঙ্গ রয়েছে। যে প্রসঙ্গটি iframe এম্বেড করে তাকে অভিভাবক ব্রাউজিং প্রসঙ্গ হিসাবে উল্লেখ করা হয়।

আইফ্রেমে প্রদর্শিত তৃতীয় পক্ষের সামগ্রী postMessage() মাধ্যমে মূল সাইটের সাথে যোগাযোগ করতে পারে। এটি বিকাশকারীদের ব্রাউজিং প্রসঙ্গের মধ্যে নির্বিচারে মান পাঠাতে অনুমতি দেয়। মেসেজ রিসিভার ইভেন্ট লিসেনার onmessage ব্যবহার করে মানগুলি পেতে পারে।

// inside iframe
window.parent.postMessage("ping", "https://example.com");

// window
window.addEventListener("message", (event) => {
  console.log(event.data);
})

sandbox অ্যাট্রিবিউটের সাথে নিরাপত্তা যোগ করা হয়েছে

যদি কোনো আইফ্রেমে দূষিত বিষয়বস্তু স্থাপন করা হয়, তাহলে এটা সম্ভব যে অনিচ্ছাকৃত অ্যাকশনগুলি (যেমন জাভাস্ক্রিপ্ট এক্সিকিউশন বা ফর্ম জমা দেওয়া) সম্পাদিত হতে পারে। এটি এড়াতে, sandbox অ্যাট্রিবিউট আইফ্রেমে এক্সিকিউটেবল API গুলিকে সীমাবদ্ধ করে এবং সম্ভাব্য ক্ষতিকারক বৈশিষ্ট্যগুলিকে অক্ষম করে৷

<iframe src="https://example.com" sandbox></iframe>

স্যান্ডবক্স এমন কিছু API অনুপলব্ধ করতে পারে যা আপনার এম্বেড করা সামগ্রীর জন্য গুরুত্বপূর্ণ। একটি নিষ্ক্রিয় API এর অনুমতি দিতে, আপনি স্পষ্টভাবে স্যান্ডবক্স বৈশিষ্ট্যে একটি যুক্তি যোগ করতে পারেন৷

<iframe sandbox="allow-forms" src="https://example.com"></iframe>

sandbox স্পেসিফিকেশনের জন্য অনেকগুলি সম্ভাব্য মান রয়েছে, যার মধ্যে allow-forms , allow-same-origin , allow-popups এবং আরও অনেক কিছু রয়েছে৷

অনুমতি নীতি

যেহেতু ওয়েবের জন্য ক্রমবর্ধমান শক্তিশালী বৈশিষ্ট্যগুলি তৈরি করা হয়েছে, তাদের সকলের জন্য অনুমতিগুলি পরিচালনা করার জন্য অনুমতি নীতিগুলি তৈরি করা হয়েছিল৷ একটি অনুমতি নীতি একটি মূল সাইট এবং iframe সামগ্রীতে প্রয়োগ করা যেতে পারে৷ একটি অভিভাবক সাইটে প্রদত্ত অনুমতিগুলি allow বৈশিষ্ট্যটি ব্যবহার করে iframe-কেও দেওয়া যেতে পারে৷

<iframe src="https://example.com" allow="fullscreen"></iframe>

বেড়া ফ্রেম সঙ্গে এমবেড

একটি বেড়াযুক্ত ফ্রেম ( <fencedframe> ) হল একটি আইফ্রেমের অনুরূপ এমবেডেড সামগ্রীর জন্য একটি প্রস্তাবিত HTML উপাদান৷ একটি আইফ্রেমের বিপরীতে, একটি বেড়াযুক্ত ফ্রেম এটির এম্বেডিং প্রসঙ্গের সাথে যোগাযোগকে সীমাবদ্ধ করে যাতে ফ্রেমটিকে এম্বেডিং প্রসঙ্গের সাথে ভাগ না করে ক্রস-সাইট ডেটাতে অ্যাক্সেসের অনুমতি দেয়। একইভাবে, পিতামাতার পৃষ্ঠায় প্রথম পক্ষের ডেটা বেড়াযুক্ত ফ্রেমের সাথে ভাগ করা যাবে না।

<fencedframe src="https://3rd.party.example"></fencedframe>

বেড়াযুক্ত ফ্রেমগুলি হল একটি গোপনীয়তা স্যান্ডবক্স প্রস্তাব যা পরামর্শ দেয় যে শীর্ষ-স্তরের সাইটগুলিকে ডেটা ভাগ করা উচিত৷ গোপনীয়তা স্যান্ডবক্সের অনেক প্রস্তাবের উদ্দেশ্য তৃতীয়-পক্ষ কুকি বা অন্যান্য ট্র্যাকিং প্রক্রিয়া ছাড়াই ক্রস-সাইট ব্যবহারের ক্ষেত্রে সন্তুষ্ট করা। কিছু গোপনীয়তা স্যান্ডবক্স এপিআইগুলির একটি বেড়াযুক্ত ফ্রেমের মধ্যে রেন্ডার করার জন্য নির্বাচিত নথির প্রয়োজন হতে পারে৷

উদাহরণস্বরূপ, FLEDGE API বিজ্ঞাপন নিলামের বিজয়ীর জন্য একটি বেড়াযুক্ত ফ্রেম তৈরি করা হবে৷ FLEDGE API একটি অস্বচ্ছ উৎস প্রদান করবে, একটি অবস্থান-স্বাধীন URN স্কিম, যা একটি বেড়াযুক্ত ফ্রেমের মধ্যে রেন্ডার করতে পারে। অস্বচ্ছ সোর্স সাইটের মালিককে বিজ্ঞাপন উৎসের URL প্রকাশ না করেই তাদের সাইটে সামগ্রী প্রদর্শন করার অনুমতি দেয়।

<fencedframe src="urn:uuid:c36973b5-e5d9-de59-e4c4-364f137b3c7a"></fencedframe>

শেষ পর্যন্ত, বেড়াযুক্ত ফ্রেমগুলি iframes প্রতিস্থাপন করবে না। আপনি তাদের ব্যবহার করতে হবে না. যখন বিভিন্ন টপ-লেভেল পার্টিশনের ডেটা একই পৃষ্ঠায় প্রদর্শন করা প্রয়োজন তখন বেড়যুক্ত ফ্রেমগুলি ব্যবহারের জন্য আরও ব্যক্তিগত ফ্রেমের জন্য প্রস্তাব করা হয়।

পোর্টালের সাথে এম্বেড করুন

পোর্টাল ( <portal> ) একটি স্বাধীন ব্রাউজিং প্রসঙ্গ সহ একটি প্রস্তাবিত HTML উপাদান, যা পৃষ্ঠা পরিবর্তনের অভিজ্ঞতা উন্নত করতে পারে। পোর্টালগুলি iframe এর মত বিষয়বস্তু এম্বেড করে, কিন্তু ব্যবহারকারী পোর্টালের কোড অ্যাক্সেস করতে পারে না। একটি পোর্টাল শুধুমাত্র দেখার জন্য এবং ব্যবহারকারীদের দ্বারা ইন্টারঅ্যাক্ট করা যাবে না।

পোর্টালগুলি একটি একক-পৃষ্ঠা অ্যাপ্লিকেশনের বিরামবিহীন রূপান্তর সহ একটি বহু-পৃষ্ঠা অ্যাপ্লিকেশনের কম জটিলতা অফার করে। এই রূপান্তরগুলি অ্যানিমেটেড হতে পারে, দ্রুত ব্রাউজার উইন্ডোতে সামগ্রী প্রতিস্থাপন করে৷

<portal src="https://example.com/"></portal>

পোর্টাল স্পেসিফিকেশন এখনও বিকাশের প্রাথমিক পর্যায়ে রয়েছে।

এম্বেডের জন্য ব্যবহৃত অন্যান্য HTML উপাদান

ওয়েব ইতিহাস জুড়ে, কন্টেন্ট এম্বেড করার জন্য অনেকগুলি HTML উপাদান প্রস্তাবিত এবং API তৈরি করা হয়েছে। কিছু সময়ের জন্য, একাধিক <frame> এবং একটি <frameset> উপাদান দিয়ে সাইট তৈরি করা সাধারণ ছিল। একাধিক <frameset> উপাদান সহ সাইটগুলি ঠিকানা বারে মূল পৃষ্ঠার URL প্রদর্শন করে, অনেকগুলি পৃথক ফ্রেমের উত্স নির্বিশেষে। এটি সাইটের মধ্যে সামগ্রীর লিঙ্কগুলি ভাগ করা কঠিন করে তুলেছে৷ এই APIগুলি তখন থেকে অবহেলিত হয়েছে৷

এমনও একটা সময় ছিল যখন প্লাগইন প্রযুক্তি, যেমন Java <applet> উপাদান, অন্যান্য ব্যবহারের ক্ষেত্রে ব্যবহার করা হত। এটি পরে <object> উপাদান দ্বারা প্রতিস্থাপিত হয়। এই দুটি উপাদানই সাধারণত ফ্ল্যাশ প্লাগইনগুলি প্রদর্শনের জন্য ব্যবহৃত হত, তবে অন্যান্য HTML উপাদানগুলি (iframes এর মতো) প্রদর্শন করতেও ব্যবহৃত হত। অন্যান্য উপাদান, যেমন <canvas> , <audio> , <video> , এবং <svg> , <object> এবং <applet> উভয় উপাদানকে অপ্রচলিত করেছে।

যদিও <object> এবং <embed> আনুষ্ঠানিকভাবে এখনও অবমূল্যায়ন করা হয়নি, তবে তাদের এড়িয়ে চলাই ভালো, বিশেষ করে যেহেতু তাদের কিছু অদ্ভুত আচরণ রয়েছে। <applet> 2017 সালে HTML স্পেসিফিকেশন থেকে সরানো হয়েছিল।

উপসংহার

বিদ্যমান iframe স্পেসিফিকেশন ব্যবহার করে আপনি নিরাপদে যেকোনো ওয়েবসাইটে সামগ্রী এম্বেড করতে পারেন। নিরাপত্তা এবং শৈলীর উন্নতির জন্য <fencedframe> এবং <portal> সহ আরও HTML উপাদানের প্রস্তাব করা হয়েছে। আমরা ফেন্সড ফ্রেম প্রস্তাবের অগ্রগতি ভাগ করে নেওয়া চালিয়ে যাবো।

Jack J

Alexandra Klepper

অন্যান্য পৃষ্ঠা বা সাইট থেকে বিষয়বস্তু শেয়ার করার সময় এম্বেড করা সামগ্রী হল আপনার সাইটে ব্যবহারকারীদের রাখার সর্বোত্তম উপায়। এটি একটি এমবেডেড টুইটের মতো ছোট হতে পারে, যা টুইটারের শৈলী এবং বিন্যাসে প্রদর্শিত হয়। এটি আপনার নিজের মধ্যে এম্বেড করা সম্পূর্ণ আলাদা সাইটের মতো বড় হতে পারে, যেমন একটি এমবেড করা Shopify দোকান যেখানে দর্শকরা আপনার সাইটটি না রেখেই কেনাকাটা করতে পারে।

এখন আগের চেয়ে অনেক বেশি, এটা গুরুত্বপূর্ণ যে আমাদের সাইটগুলি সুরক্ষিত থাকে যখন আমরা বিষয়বস্তু এম্বেড করি।

ডেভেলপাররা একটি ওয়েবসাইটে কন্টেন্ট এম্বেড করতে পারে এমন বিভিন্ন উপায় রয়েছে। সবচেয়ে সাধারণ কৌশলটি হল একটি <iframe> ব্যবহার করা, যা আপনাকে শুধুমাত্র একটি URL দিয়ে আপনার সাইটে যেকোনো বিষয়বস্তু এম্বেড করতে দেয়। একটি আইফ্রেমকে আরও সুরক্ষিত করতে sandbox অ্যাট্রিবিউট যোগ করা ইতিমধ্যেই সম্ভব৷

বিকল্পভাবে, আপনি একটি প্রস্তাবিত HTML উপাদান ব্যবহার করতে পারেন:

• <fencedframe> তৃতীয় পক্ষের বিষয়বস্তু এম্বেড করার গোপনীয়তা-সংরক্ষণের উপায় হিসেবে প্রস্তাবিত।
• <portal> আরো নির্বিঘ্ন পৃষ্ঠা পরিবর্তনের জন্য প্রস্তাবিত।

আপনার এম্বেড করা সামগ্রীর নিরাপত্তা কীভাবে উন্নত করা যায় তা শিখতে পড়ুন।

iframes দিয়ে এম্বেড করুন

আইফ্রেমগুলি সমস্ত ধরণের ব্যবহারের ক্ষেত্রে ব্যবহার করা যেতে পারে, যেমন একটি পরিচিতি পৃষ্ঠায় মানচিত্র বা ফর্ম যোগ করা এবং বিজ্ঞাপন প্রদর্শন করা।

<iframe src="https://example.com/maps"></iframe>

প্রতিটি আইফ্রেমের নিজস্ব সেশন ইতিহাস এবং নথি সহ নিজস্ব ব্রাউজিং প্রসঙ্গ রয়েছে। যে প্রসঙ্গটি iframe এম্বেড করে তাকে অভিভাবক ব্রাউজিং প্রসঙ্গ হিসাবে উল্লেখ করা হয়।

আইফ্রেমে প্রদর্শিত তৃতীয় পক্ষের সামগ্রী postMessage() মাধ্যমে মূল সাইটের সাথে যোগাযোগ করতে পারে। এটি বিকাশকারীদের ব্রাউজিং প্রসঙ্গের মধ্যে নির্বিচারে মান পাঠাতে অনুমতি দেয়। মেসেজ রিসিভার ইভেন্ট লিসেনার onmessage ব্যবহার করে মানগুলি পেতে পারে।

// inside iframe
window.parent.postMessage("ping", "https://example.com");

// window
window.addEventListener("message", (event) => {
  console.log(event.data);
})

sandbox অ্যাট্রিবিউটের সাথে নিরাপত্তা যোগ করা হয়েছে

যদি কোনো আইফ্রেমে দূষিত বিষয়বস্তু স্থাপন করা হয়, তাহলে এটা সম্ভব যে অনিচ্ছাকৃত অ্যাকশনগুলি (যেমন জাভাস্ক্রিপ্ট এক্সিকিউশন বা ফর্ম জমা দেওয়া) সম্পাদিত হতে পারে। এটি এড়াতে, sandbox অ্যাট্রিবিউট আইফ্রেমে এক্সিকিউটেবল API গুলিকে সীমাবদ্ধ করে এবং সম্ভাব্য ক্ষতিকারক বৈশিষ্ট্যগুলিকে অক্ষম করে৷

<iframe src="https://example.com" sandbox></iframe>

স্যান্ডবক্স এমন কিছু API অনুপলব্ধ করতে পারে যা আপনার এম্বেড করা সামগ্রীর জন্য গুরুত্বপূর্ণ। একটি নিষ্ক্রিয় API এর অনুমতি দিতে, আপনি স্পষ্টভাবে স্যান্ডবক্স বৈশিষ্ট্যে একটি যুক্তি যোগ করতে পারেন৷

<iframe sandbox="allow-forms" src="https://example.com"></iframe>

sandbox স্পেসিফিকেশনের জন্য অনেকগুলি সম্ভাব্য মান রয়েছে, যার মধ্যে allow-forms , allow-same-origin , allow-popups এবং আরও অনেক কিছু রয়েছে৷

অনুমতি নীতি

যেহেতু ওয়েবের জন্য ক্রমবর্ধমান শক্তিশালী বৈশিষ্ট্যগুলি তৈরি করা হয়েছে, তাদের সকলের জন্য অনুমতিগুলি পরিচালনা করার জন্য অনুমতি নীতিগুলি তৈরি করা হয়েছিল৷ একটি অনুমতি নীতি একটি মূল সাইট এবং iframe সামগ্রীতে প্রয়োগ করা যেতে পারে৷ একটি অভিভাবক সাইটের অনুমতিগুলি allow বৈশিষ্ট্যটি ব্যবহার করে আইফ্রেমকেও দেওয়া যেতে পারে৷

<iframe src="https://example.com" allow="fullscreen"></iframe>

বেড়া ফ্রেম সঙ্গে এমবেড

একটি বেড়াযুক্ত ফ্রেম ( <fencedframe> ) হল একটি আইফ্রেমের অনুরূপ এমবেডেড সামগ্রীর জন্য একটি প্রস্তাবিত HTML উপাদান৷ একটি আইফ্রেমের বিপরীতে, একটি বেড়াযুক্ত ফ্রেম এটির এম্বেডিং প্রসঙ্গের সাথে যোগাযোগকে সীমাবদ্ধ করে যাতে ফ্রেমটিকে এম্বেডিং প্রসঙ্গের সাথে ভাগ না করে ক্রস-সাইট ডেটাতে অ্যাক্সেসের অনুমতি দেয়। একইভাবে, পিতামাতার পৃষ্ঠায় প্রথম পক্ষের ডেটা বেড়াযুক্ত ফ্রেমের সাথে ভাগ করা যাবে না।

<fencedframe src="https://3rd.party.example"></fencedframe>

বেড়াযুক্ত ফ্রেমগুলি হল একটি গোপনীয়তা স্যান্ডবক্স প্রস্তাব যা পরামর্শ দেয় যে শীর্ষ-স্তরের সাইটগুলিকে ডেটা ভাগ করা উচিত৷ গোপনীয়তা স্যান্ডবক্সের অনেক প্রস্তাবের উদ্দেশ্য তৃতীয়-পক্ষ কুকি বা অন্যান্য ট্র্যাকিং প্রক্রিয়া ছাড়াই ক্রস-সাইট ব্যবহারের ক্ষেত্রে সন্তুষ্ট করা। কিছু গোপনীয়তা স্যান্ডবক্স এপিআইগুলির একটি বেড়াযুক্ত ফ্রেমের মধ্যে রেন্ডার করার জন্য নির্বাচিত নথির প্রয়োজন হতে পারে৷

উদাহরণস্বরূপ, FLEDGE API বিজ্ঞাপন নিলামের বিজয়ীর জন্য একটি বেড়াযুক্ত ফ্রেম তৈরি করা হবে৷ FLEDGE API একটি অস্বচ্ছ উৎস প্রদান করবে, একটি অবস্থান-স্বাধীন URN স্কিম, যা একটি বেড়াযুক্ত ফ্রেমের মধ্যে রেন্ডার করতে পারে। অস্বচ্ছ সোর্স সাইটের মালিককে বিজ্ঞাপন উৎসের URL প্রকাশ না করেই তাদের সাইটে সামগ্রী প্রদর্শন করার অনুমতি দেয়।

<fencedframe src="urn:uuid:c36973b5-e5d9-de59-e4c4-364f137b3c7a"></fencedframe>

শেষ পর্যন্ত, বেড়াযুক্ত ফ্রেমগুলি iframes প্রতিস্থাপন করবে না। আপনি তাদের ব্যবহার করতে হবে না. যখন বিভিন্ন টপ-লেভেল পার্টিশনের ডেটা একই পৃষ্ঠায় প্রদর্শন করা প্রয়োজন তখন বেড়যুক্ত ফ্রেমগুলি ব্যবহারের জন্য আরও ব্যক্তিগত ফ্রেমের জন্য প্রস্তাব করা হয়।

পোর্টালের সাথে এম্বেড করুন

পোর্টাল ( <portal> ) একটি স্বাধীন ব্রাউজিং প্রসঙ্গ সহ একটি প্রস্তাবিত HTML উপাদান, যা পৃষ্ঠা পরিবর্তনের অভিজ্ঞতা উন্নত করতে পারে। পোর্টালগুলি iframe এর মত বিষয়বস্তু এম্বেড করে, কিন্তু ব্যবহারকারী পোর্টালের কোড অ্যাক্সেস করতে পারে না। একটি পোর্টাল শুধুমাত্র দেখার জন্য এবং ব্যবহারকারীদের দ্বারা ইন্টারঅ্যাক্ট করা যাবে না।

পোর্টালগুলি একটি একক-পৃষ্ঠা অ্যাপ্লিকেশনের বিরামবিহীন রূপান্তর সহ একটি বহু-পৃষ্ঠা অ্যাপ্লিকেশনের কম জটিলতা অফার করে। এই রূপান্তরগুলি অ্যানিমেটেড হতে পারে, দ্রুত ব্রাউজার উইন্ডোতে সামগ্রী প্রতিস্থাপন করে৷

<portal src="https://example.com/"></portal>

পোর্টাল স্পেসিফিকেশন এখনও বিকাশের প্রাথমিক পর্যায়ে রয়েছে।

এম্বেডের জন্য ব্যবহৃত অন্যান্য HTML উপাদান

ওয়েব ইতিহাস জুড়ে, কন্টেন্ট এম্বেড করার জন্য অনেকগুলি HTML উপাদান প্রস্তাবিত এবং API তৈরি করা হয়েছে। কিছু সময়ের জন্য, একাধিক <frame> এবং একটি <frameset> উপাদান দিয়ে সাইট তৈরি করা সাধারণ ছিল। একাধিক <frameset> উপাদান সহ সাইটগুলি ঠিকানা বারে মূল পৃষ্ঠার URL প্রদর্শন করে, অনেকগুলি পৃথক ফ্রেমের উত্স নির্বিশেষে। এটি সাইটের মধ্যে সামগ্রীর লিঙ্কগুলি ভাগ করা কঠিন করে তুলেছে৷ এই APIগুলি তখন থেকে অবহেলিত হয়েছে৷

এমনও একটা সময় ছিল যখন প্লাগইন প্রযুক্তি, যেমন Java <applet> উপাদান, অন্যান্য ব্যবহারের ক্ষেত্রে ব্যবহার করা হত। এটি পরে <object> উপাদান দ্বারা প্রতিস্থাপিত হয়। এই দুটি উপাদানই সাধারণত ফ্ল্যাশ প্লাগইনগুলি প্রদর্শনের জন্য ব্যবহৃত হত, তবে অন্যান্য HTML উপাদানগুলি (iframes এর মতো) প্রদর্শন করতেও ব্যবহৃত হত। অন্যান্য উপাদান, যেমন <canvas> , <audio> , <video> , এবং <svg> , <object> এবং <applet> উভয় উপাদানকে অপ্রচলিত করেছে।

যদিও <object> এবং <embed> আনুষ্ঠানিকভাবে এখনও অবমূল্যায়ন করা হয়নি, তবে তাদের এড়িয়ে চলাই ভালো, বিশেষ করে যেহেতু তাদের কিছু অদ্ভুত আচরণ রয়েছে। <applet> 2017 সালে HTML স্পেসিফিকেশন থেকে সরানো হয়েছিল।

উপসংহার

বিদ্যমান iframe স্পেসিফিকেশন ব্যবহার করে আপনি নিরাপদে যেকোনো ওয়েবসাইটে সামগ্রী এম্বেড করতে পারেন। নিরাপত্তা এবং শৈলীর উন্নতির জন্য <fencedframe> এবং <portal> সহ আরও HTML উপাদানের প্রস্তাব করা হয়েছে। আমরা ফেন্সড ফ্রেম প্রস্তাবের অগ্রগতি ভাগ করে নেওয়া চালিয়ে যাবো।