আইফ্রেমের মধ্যে পাসকি

ইজি কিতামুরা

একাধিক ডোমেন জুড়ে সাবলীল ও প্রাসঙ্গিক প্রমাণীকরণ প্রদানের জন্য, সংস্থাগুলো প্রায়শই আইফ্রেমের মধ্যে সাইন-ইন পেজ এম্বেড করে। তবে, থার্ড-পার্টি ফ্রেমের ভিতরে প্রমাণীকরণ কনটেক্সট লোড করা ব্যবহারকারীদের ক্লিকজ্যাকিং (ইউআই রিড্রেসিং) এবং অননুমোদিত ক্রেডেনশিয়াল তৈরির মতো গুরুতর হুমকির সম্মুখীন করে। এই ঝুঁকিগুলো প্রশমিত করতে, ব্রাউজারগুলো ডিফল্টরূপে ক্রস-অরিজিন আইফ্রেমে WebAuthn নিষ্ক্রিয় করে রাখে। নিরাপদে এই সীমাবদ্ধতা তুলে নেওয়ার জন্য সক্রিয়, গভীর প্রতিরক্ষা প্রোটোকলের প্রয়োজন হয়।

হুমকির মডেলগুলি সনাক্ত করুন

সাবফ্রেমের ভিতরে পাসকি (WebAuthn) সক্রিয় করার আগে, আপনি ঠিক কোন ধরনের অপব্যবহারের পরিস্থিতি থেকে সুরক্ষা দিচ্ছেন তা বুঝুন:

  • হিডেন আইফ্রেম ইনজেকশন ব্যবহার করে ট্র্যাকিং: একজন আক্রমণকারী একটি বিশ্বস্ত সাইটের বিজ্ঞাপন বা উইজেট ব্যবহার করে নিজের ডোমেইন থেকে একটি WebAuthn প্রম্পট চালু করে, যা ব্যবহারকারীদেরকে প্রেক্ষাপট না দেখিয়েই একটি পাসকি অনুমোদন করতে প্ররোচিত করে। এর মাধ্যমে ব্যবহারকারীর পরিচয়কে আক্রমণকারীর নিয়ন্ত্রিত একটি অ্যাকাউন্টের সাথে যুক্ত করে ডেটা সংগ্রহ করা হয়।
  • ভিজ্যুয়াল ওভারলে এবং ক্লিকজ্যাকিং (ইউআই রিড্রেসিং): একটি ক্ষতিকারক মূল পৃষ্ঠা সাধারণ CSS ব্যবহার করে অথেনটিকেশন আইফ্রেমটিকে অদৃশ্য করে দেয় এবং এর উপর একটি নকল UI এলিমেন্ট বসিয়ে দেয়, যাতে এমন একটি ক্লিক চুরি করা যায় যা অথেনটিকেশন প্রক্রিয়াটি চালু করে। এর ফলে সেশন হাইজ্যাকিং হতে পারে অথবা ব্যবহারকারী যদি অসাবধানতাবশত প্রম্পটটি সম্পন্ন করে ফেলেন, তবে অননুমোদিত কাজ করতে বাধ্য করা হতে পারে।

এই হুমকিগুলো মোকাবেলা করতে নিম্নলিখিত সর্বোত্তম পদ্ধতিগুলো অনুসরণ করুন:

শীর্ষ-স্তরের ডকুমেন্টের (শীর্ষ ফ্রেম) জন্য:

এমবেডেড ডকুমেন্ট (আইফ্রেম)-এর জন্য:

উভয় নথির জন্য:

অনুমতি নীতি ব্যবহার করে প্রতিনিধি নিয়োগ সক্ষম করুন

ব্রাউজারগুলো ডিফল্টরূপে ক্রস-অরিজিন আইফ্রেমে WebAuthn- এর অ্যাক্সেস ব্লক করে রাখে। পারমিশন পলিসি হলো একটি সমন্বিত ওয়েব প্ল্যাটফর্ম ব্যবস্থা, যা একটি টপ-লেভেল ডকুমেন্টকে এই শক্তিশালী ক্ষমতাগুলো নির্দিষ্ট, বিশ্বস্ত থার্ড-পার্টি অরিজিনকে সুস্পষ্টভাবে অর্পণ করার সুযোগ দেয়।

বৈশিষ্ট্য টোকেন

WebAuthn দুটি স্বতন্ত্র টোকেন ব্যবহার করে:

  • publickey-credentials-get : পাসকি সাইন-ইন ফ্লো ( navigator.credentials.get() )-এর জন্য অনুমোদন প্রদান করে।
  • publickey-credentials-create : পাসকি নিবন্ধন প্রক্রিয়ার ( navigator.credentials.create() ) জন্য অনুমোদন প্রদান করে।

সক্ষম করার জন্য প্রয়োজনীয়তা

এই সক্ষমতাগুলো সক্রিয় করার জন্য প্যারেন্ট সার্ভারের প্রতিক্রিয়া এবং ক্লায়েন্ট-সাইড মার্কআপ উভয় ক্ষেত্রেই সামঞ্জস্য প্রয়োজন:

Permissions-Policy: publickey-credentials-get=(self "https://embedded-auth.example.com")

অনুমতি নীতি: publickey-credentials-get সামঞ্জস্যতা:

Browser Support

  • ক্রোম: ৮৮।
  • প্রান্ত: ৮৮।
  • ফায়ারফক্স সমর্থিত নয়।
  • সাফারি সমর্থিত নয়।

Source

অনুমতি নীতি: পাবলিক-কি ক্রেডেনশিয়াল তৈরির সামঞ্জস্যতা:

Browser Support

  • ক্রোম: ৮৮।
  • প্রান্ত: ৮৮।
  • ফায়ারফক্স সমর্থিত নয়।
  • সাফারি সমর্থিত নয়।

Source

  • HTML allow অ্যাট্রিবিউট: HTML মার্কআপে, <iframe> এলিমেন্টকেও অবশ্যই ঘোষণা করতে হবে যে এটি ফিচারটি সক্ষম করে। 
<iframe src="https://embedded-auth.example.com?nonce=deadbeef12345678&client=https%3A%2F%2Fembedded-auth.example.com" allow="publickey-credentials-get"></iframe>

iframe allow="publickey-credentials-get" compatibility:

Browser Support

  • ক্রোম: ৮৪।
  • প্রান্ত: ৮৪।
  • ফায়ারফক্স: ১১৮।
  • সাফারি সমর্থিত নয়।

iframe allow="publickey-credentials-create" compatibility:

Browser Support

  • ক্রোম: সমর্থিত নয়।
  • Edge সমর্থিত নয়।
  • ফায়ারফক্স: ১২৩।
  • সাফারি সমর্থিত নয়।

পার্টিশন করা তৃতীয় পক্ষের কুকি সক্রিয় করুন

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

এই বাধাগুলো দূর করতে, আপনার সেশন কুকিগুলোকে SameSite: None , Secure , এবং Partitioned অ্যাট্রিবিউট দিয়ে কনফিগার করুন। এই সমন্বিত প্ল্যাটফর্ম ব্যবস্থাটি ব্রাউজার-স্তরের গোপনীয়তা নিয়ন্ত্রণকে সম্মান করার পাশাপাশি আইফ্রেমের মধ্যে স্থায়ী অবস্থা নিশ্চিত করে।

SameSite: None

SameSite: None অ্যাট্রিবিউটটি একটি কুকিকে ক্রস-সাইট অ্যাক্সেসের জন্য স্পষ্টভাবে চিহ্নিত করে, যার ফলে এটি কোনো থার্ড-পার্টি কনটেক্সট (যেমন একটি আইফ্রেম) থেকে করা রিকোয়েস্টের সাথে পাঠানো যায়। ক্রস-অরিজিন পরিস্থিতিতে কুকি কার্যকর হওয়ার জন্য এই অ্যাট্রিবিউটটি একটি পূর্বশর্ত, যদিও আধুনিক ব্রাউজার দ্বারা গৃহীত হওয়ার জন্য এটিকে অবশ্যই Secure অ্যাট্রিবিউটের সাথে যুক্ত করতে হবে।

সেট Partitioned

Partitioned অ্যাট্রিবিউটটি কুকিকে CHIPS (Cookies Having Independent Partitioned State) পদ্ধতিতে অন্তর্ভুক্ত করে, যার ফলে প্রতিটি টপ-লেভেল সাইটের জন্য কুকিটি আলাদাভাবে সংরক্ষিত হতে পারে। এটি নিশ্চিত করে যে কুকিটি নির্দিষ্ট থার্ড-পার্টি আইফ্রেমের প্রেক্ষাপটে অ্যাক্সেসযোগ্য থাকে এবং ক্রস-সাইট ট্র্যাকিং সক্ষম না করেই স্থায়ী সেশন স্টেট বজায় রাখে। ভিন্ন সাইটে প্রতিটি এমবেডের জন্য ব্যবহারকারীকে আবার সাইন ইন করতে হবে।

কন্টেন্ট সিকিউরিটি পলিসি দিয়ে এন্ডপয়েন্ট সুরক্ষিত করুন

পারমিশন পলিসি (Permissions Policy) নির্ধারণ করে আপনার আইফ্রেমে ওয়েবঅথন (WebAuthn) চালানো যাবে কি না, অন্যদিকে কন্টেন্ট সিকিউরিটি পলিসি (Content Security Policy - CSP) নির্ধারণ করে কে আপনার আইফ্রেমটি হোস্ট করার অনুমতি পাবে।

একটি অথেনটিকেশন এন্ডপয়েন্টের জন্য, এটি নিশ্চিত করা অত্যন্ত গুরুত্বপূর্ণ যে শুধুমাত্র অনুমোদিত পার্টনার সাইট বা আপনার নিজস্ব প্রপার্টিগুলোই লগইন সাবফ্রেম লোড করতে পারে, যার ফলে অননুমোদিত ক্লিকজ্যাকিং প্রচেষ্টাগুলো UI লোড হওয়ার আগেই বন্ধ হয়ে যায়।

frame-ancestors ব্যবহার করুন

` frame-ancestors ডিরেক্টিভটি সেই বৈধ প্যারেন্ট পেজগুলোকে নির্ধারণ করে, যেগুলো আপনার সাইট এমবেড করতে পারবে। এই ডিরেক্টিভে ডোমেইন যোগ করার মাধ্যমে, আপনি সেই ডোমেইনগুলোকে অনুমতি দিতে পারেন যেগুলো লগইন সাবফ্রেম এমবেড করার সুযোগ পাবে।

Content-Security-Policy: frame-ancestors 'self' https://parent-site.example.com;

বিষয়বস্তু সুরক্ষা নীতি: ফ্রেম-পূর্বপুরুষদের সামঞ্জস্যতা:

Browser Support

  • ক্রোম: ৪০।
  • প্রান্ত: ১৫।
  • ফায়ারফক্স: ৫৮।
  • সাফারি: ১০।

Source

X-Frame-Options সেট করুন

পুরোনো X-Frame-Options হেডারটি একই ধরনের ক্ষমতা সমর্থন করে, কিন্তু এটি শুধুমাত্র বাইনারি অপশন ( DENY বা SAMEORIGIN ) সমর্থন করে। যদি ব্রাউজার CSP সমর্থন না করে, তবে CSP frame-ancestors এবং X-Frame-Options: DENY উভয়ই সেট করুন। যেখানে CSP সমর্থিত, সেখানে এটিকে সর্বদা অগ্রাধিকার দেওয়া হয়।

X-Frame-Options: DENY

এক্স-ফ্রেম-অপশন সামঞ্জস্যতা:

Browser Support

  • ক্রোম: ৪।
  • প্রান্ত: ১২।
  • ফায়ারফক্স: ৪।
  • সাফারি: ৪।

Source

বিশ্বাস করুন, কিন্তু সার্ভার-সাইডে যাচাই করুন।

ব্রাউজারের ক্লায়েন্ট-সাইড চেকগুলো অভিপ্রায় এবং অনুমতি মূল্যায়ন করে, কিন্তু বিশ্বাসযোগ্যতার চূড়ান্ত নির্ধারক হলো সার্ভার। কনটেক্সটটি বৈধ এবং স্বাক্ষরিত কিনা তা নিশ্চিত করতে রিলায়িং পার্টি (RP) সার্ভারে প্রতিক্রিয়াটি যাচাই করুন।

ক্লায়েন্ট-ডেটা পেলোড

WebAuthn ক্লায়েন্ট ডেটাতে এমন কিছু প্যারামিটার অন্তর্ভুক্ত থাকে যা বিশেষভাবে একটি আইফ্রেমের মধ্যে করা অনুরোধের প্রেক্ষাপট যাচাই করতে আপনাকে সাহায্য করার জন্য ডিজাইন করা হয়েছে:

  • crossOrigin (বুলিয়ান): এটি নির্দেশ করে যে WebAuthn API-টি কোনো ক্রস-অরিজিন আইফ্রেমের ভেতর থেকে কল করা হয়েছে কি না। যদি আপনার আর্কিটেকচার আইফ্রেমের ওপর নির্ভরশীল হয়, তবে আপনার সার্ভারকে অবশ্যই এই ফ্ল্যাগটি ' true হওয়া নিশ্চিত করতে হবে ।
  • topOrigin (স্ট্রিং): শীর্ষ-স্তরের ব্রাউজিং কনটেক্সটের উৎস (যা ব্রাউজারের অ্যাড্রেস বারে দৃশ্যমান)। সার্ভারকে অবশ্যই পরিচিত, অনুমোদিত প্যারেন্ট অরিজিনগুলির একটি তালিকার সাথে এটি যাচাই করতে হবে।

যাচাইকরণ চেকলিস্ট

আপনার সার্ভারে অথেন্টিকেটর প্রতিক্রিয়া যাচাই করতে, নিম্নলিখিত ধাপগুলি অনুসরণ করুন:

  1. অথেন্টিকেটর রেসপন্স থেকে স্বাক্ষরিত collectedClientData পার্স এবং ডিকোড করুন।
  2. নিশ্চিত করুন যে type অনুষ্ঠানের সাথে মেলে ( webauthn.get অথবা webauthn.create )।
  3. ব্যবহারকারীর উপস্থিতি ও স্বাক্ষর যাচাই করুন।
  4. যদি অনুরোধটি একটি আইফ্রেম কাঠামো থেকে আসার উদ্দেশ্যে করা হয়ে থাকে:
    • crossOrigin === true নিশ্চিত করুন।
    • নিশ্চিত করুন যে topOrigin আপনার অনুমোদিত প্যারেন্ট অরিজিন তালিকার সাথে মেলে।

postMessage() ব্যবহার করে নিরাপদে সেশন স্থাপন করুন।

নির্ভরযোগ্যভাবে একটি সেশন স্থাপন করার জন্য, আইফ্রেমটিকে অবশ্যই postMessage() ব্যবহার করে প্রমাণীকরণ টোকেনটি প্যারেন্ট পেজে ফেরত পাঠাতে হবে, যাতে প্যারেন্ট তার নিজস্ব ফার্স্ট-পার্টি কনটেক্সটে সেশন স্টেট পরিচালনা করতে পারে।

নিরাপদ কর্মপ্রবাহ

একটি সুরক্ষিত সেশন স্থাপন করতে, এই কার্যপ্রবাহ অনুসরণ করুন:

  1. নিশ্চিত করুন যে iframe-এর src URL-এ একটি nonce এবং origin কোয়েরি প্যারামিটার রয়েছে:
    • nonce এর জন্য একটি র‍্যান্ডম মান ব্যবহার করুন। nonce একটি নিরাপত্তা যাচাইকরণ টোকেন হিসেবে কাজ করে, যা নিশ্চিত করে যে একটি আইফ্রেম (iframe) থেকে প্রাপ্ত অথেনটিকেশন টোকেনটি প্যারেন্ট পেজ দ্বারা শুরু করা নির্দিষ্ট সেশনের সাথে বৈধভাবে মেলে।
    • origin হিসেবে প্যারেন্ট ফ্রেম ডোমেইন ব্যবহার করুন। একটি origin প্যারামিটার প্যারেন্ট পেজের অরিজিন নির্দিষ্ট করে, যা আইফ্রেমকে সেই অনুমোদিত কনটেক্সট নিরাপদে শনাক্ত করতে সক্ষম করে যেখানে এটি এমবেড করা হয়েছে।
  2. আইফ্রেমটি তার নিজস্ব সার্ভারের সাথে WebAuthn প্রমাণীকরণ সম্পন্ন করে।

  3. আইফ্রেম সার্ভারটি nonce ) সহ একটি JWT টোকেন ইস্যু করে এবং তা প্যারেন্ট পেজে ফরোয়ার্ড করে।

    // Extract nonce and origin from the URL params
const urlParams = new URLSearchParams(window.location.search);
const nonce = urlParams.get('nonce');
const origin = urlParams.get('origin');
if (!nonce || !origin) {
  alert('Nonce or origin is missing in the URL');
  return;
}

// Create a JWT
const response = await post('/createToken', { nonce, origin });
const token = response.token;

// Post the JWT to the parent frame
window.parent.postMessage({ token }, origin);

  4. প্যারেন্ট পেজটি message ইভেন্টের জন্য অপেক্ষা করে, প্রেরকের উৎস যাচাই করে এবং টোকেনটি ভেরিফাই করে।

    window.addEventListener("message", (event) => {
  if (event.origin !== "https://embedded-auth.example.com") return;
  // Verify the received JWT
  const result = await post('/verifyIdToken', {
    token: event.data.token,
    origin: provider.origin,
  });
});

  5. JWT সফলভাবে যাচাই করা হলে মূল পৃষ্ঠাটি সেশনটি বজায় রাখে।

প্রেরক এবং প্রাপক উভয়েরই নিরাপত্তার দায়িত্ব রয়েছে:

  • প্রেরক (iframe): বার্তা পাঠানোর সময় সর্বদা একটি নির্দিষ্ট লক্ষ্য উৎস উল্লেখ করুন (কখনোই "*" ব্যবহার করবেন না)।
  • প্রাপক (প্যারেন্ট): অরিজিন স্পুফিং প্রতিরোধ করতে মেসেজ গ্রহণ করার সময় সর্বদা event.origin যাচাই করুন।

উপসংহার

নিরাপদ আইফ্রেম ব্যবহার নির্ভর করে সক্ষমতার জন্য পারমিশন পলিসি, সীমাবদ্ধতার জন্য সিএসপি, সেশন স্থায়িত্বের জন্য পার্টিশন করা থার্ড-পার্টি কুকি, ক্লায়েন্ট কনটেক্সটের সার্ভার-সাইড যাচাইকরণ এবং postMessage() ব্যবহার করে কনটেক্সট-অ্যাওয়্যার সেশন হ্যান্ডঅফের উপর।

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