ট্যাবগুলো চমৎকার, ঠিক নয়? এগুলো আমাদের সবার ভিতরের মাল্টি-টাস্কারকে একই সাথে অনেক অনলাইন কাজ জাগল করতে দেয়।
ট্যাব এখন এতটাই সাধারণ যে, আপনি যখন একটি লিংকে ক্লিক করেন, সম্ভবত সেটি একটি নতুন ট্যাবে খুলবে।
আপনি কখনো চিন্তা করেছেন কীভাবে আপনার লিংকগুলোর সাথে এটা করা যায়, তবে আপনি সঠিক জায়গায় এসেছেন।
অ্যাঙ্কর এলিমেন্ট
একটি ওয়েব পেজে লিংক তৈরি করতে, আপনাকে একটি এলিমেন্ট (টেক্সট, ছবি, ইত্যাদি) একটি অ্যাঙ্কর (<a>) এলিমেন্টের মধ্যে র্যাপ করতে হবে এবং এর href অ্যাট্রিবিউটকে আপনি যে URL-এ লিংক দিতে চান সেটি সেট করতে হবে।
<p>Check out <a href="https://www.freecodecamp.org/">freeCodeCamp</a>.</p>Check out freeCodeCamp.
আপনি উপরের লিংকে ক্লিক করলে, ব্রাউজারটি লিংকটি বর্তমান উইন্ডো বা ট্যাবে খুলবে। এটি সব ব্রাউজারের ডিফল্ট আচরণ।
একটি লিংক নতুন ট্যাবে খোলার জন্য, আমাদের অ্যাঙ্কর এলিমেন্টের অন্যান্য অ্যাট্রিবিউটগুলো দেখতে হবে।
টার্গেট অ্যাট্রিবিউট
এই অ্যাট্রিবিউট ব্রাউজারকে বলে লিংকটি কীভাবে খুলবে।
লিংকটি নতুন ট্যাবে খোলার জন্য, শুধু target অ্যাট্রিবিউটকে _blank সেট করুন:
<p>Check out <a href="https://www.freecodecamp.org/" target="_blank">freeCodeCamp</a>.</p>এখন কেউ লিংকে ক্লিক করলে, সেটি একটি নতুন ট্যাবে খুলবে, অথবা যেসব ব্রাউজার সেটিংসে আছে তার ওপর নির্ভর করে একটি নতুন উইন্ডোতে খুলতে পারে।
target="_blank" ব্যবহারের সিকিউরিটি উদ্বেগ
আমি দৃঢ়ভাবে পরামর্শ দিই যে আপনি যখনই target অ্যাট্রিবিউট ব্যবহার করবেন, তখনই অ্যাঙ্কর এলিমেন্টে rel="noreferrer noopener" যোগ করুন:
<p>Check out <a href="https://www.freecodecamp.org/" target="_blank" rel="noopener noreferrer">freeCodeCamp</a>.</p>এটি নিচের আউটপুট দেবে:
Check out freeCodeCamp.
rel অ্যাট্রিবিউট আপনার পেজ এবং লিংক করা URL-এর মধ্যে সম্পর্ক সেট করে। এটিকে noopener noreferrer সেট করা হয় ট্যাবন্যাবিং নামে একটি ফিশিং টাইপ বাধার জন্য।
ট্যাবন্যাবিং কী?
ট্যাবন্যাবিং, যাকে কখনো কখনো রিভার্স ট্যাবন্যাবিংও বলা হয়, এটি একটি এক্সপ্লয়েট যা ব্রাউজারের target="_blank" এর সাথে ডিফল্ট আচরণ ব্যবহার করে window.object API-এর মাধ্যমে আপনার পেজে আংশিক অ্যাক্সেস পায়।
ট্যাবন্যাবিংয়ের মাধ্যমে, আপনি যে পেজে লিংক দিয়েছেন সেটি আপনার পেজকে একটি ফেক লগইন পেজে রিডাইরেক্ট করতে পারে। অধিকাংশ ইউজারের জন্য এটি খুব কঠিনভাবে বোঝা যাবে কারণ ফোকাস থাকবে নতুন খোলা ট্যাবে – আপনার পেজवाले মূল ট্যাবে নয়।
তারপর যখন कोई ব্যক্তি আপনার পেজवाले ট্যাবে ফিরে আসবে, তবে তিনি ফেক লগইন পেজটি দেখবেন এবং তাদের লগইন ডিটেলস দিতে পারেন।
আপনি যদি ট্যাবন্যাবিং কীভাবে কাজ করে এবং বemburgের লোকেরা এক্সপ্লয়েট দিয়ে কী করতে পারে তার বিষয়ে আরও জানতে চান, তবে Alex Yumashev-এর আর্টিকেল এবং OWASP-এর এই আর্টিকেলটি দেখুন।
আপনি যদি একটি নিরাপদ ওয়ার্কিং উদাহরণ দেখতে চান, তবে এই পেজ এবং এর GitHub রিপো দেখুন এক্সপ্লয়েট এবং rel অ্যাট্রিবিউট সম্পর্কে আরও তথ্যের জন্য।
সংক্ষেপে
HTML ব্যবহার করে একটি লিংক নতুন ট্যাবে খোলা খুব সহজ। আপনার শুধু তিনটি গুরুত্বপূর্ণ অ্যাট্রিবিউটসহ একটি অ্যাঙ্কর (<a>) এলিমেন্ট দরকার:
hrefঅ্যাট্রিবিউট সেট করুন যে পেজে লিংক দিতে চান তার URL-এtargetঅ্যাট্রিবিউট সেট করুন_blank-এ, যা ব্রাউজারকে বলে লিংকটি একটি নতুন ট্যাব/উইন্ডোতে খুলবে, ব্রাউজারের সেটিংসের ওপর নির্ভর করেrelঅ্যাট্রিবিউট সেট করুনnoreferrer noopener-এ যাতে আপনি যে পেজগুলো লিংক করেছেন সেগুলো থেকে সম্ভাব্য ম্যালিশিয়াস আক্রমণ থেকে বাঁচা যায়
আরেকবার, একটি সম্পূর্ণ ওয়ার্কিং উদাহরণ:
<p>Check out <a href="https://www.freecodecamp.org/" target="_blank" rel="noopener noreferrer">freeCodeCamp</a>.</p>যা ব্রাউজারে নিচের আউটপুট দেবে:
Check out freeCodeCamp.
আরেকবার পড়ার জন্য ধন্যবাদ। হ্যাপি কোডিং।
