ব্যবহারকারী-এজেন্ট ক্লায়েন্ট ইঙ্গিতগুলিতে স্থানান্তর করুন৷

ব্যবহারকারী-এজেন্ট স্ট্রিং থেকে নতুন ব্যবহারকারী-এজেন্ট ক্লায়েন্ট ইঙ্গিতগুলিতে আপনার সাইট স্থানান্তরিত করার কৌশল।

রোয়ান মেরিউড

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

এই নিবন্ধটি আপনাকে ব্যবহারকারী-এজেন্ট ডেটাতে আপনার অ্যাক্সেসের নিরীক্ষণ এবং ব্যবহারকারী-এজেন্ট স্ট্রিং ব্যবহার ব্যবহারকারী-এজেন্ট ক্লায়েন্ট ইঙ্গিতগুলিতে স্থানান্তরিত করার মাধ্যমে নিয়ে যাবে।

নিরীক্ষা সংগ্রহ এবং ব্যবহারকারী-এজেন্ট ডেটা ব্যবহার

ডেটা সংগ্রহের যে কোনও ফর্মের মতো, আপনি কেন এটি সংগ্রহ করছেন তা সর্বদা বুঝতে হবে। প্রথম ধাপ, আপনি কোন পদক্ষেপ নিচ্ছেন কি না তা নির্বিশেষে, আপনি কোথায় এবং কেন ব্যবহারকারী-এজেন্ট ডেটা ব্যবহার করছেন তা বোঝা।

আপনি যদি না জানেন যে ব্যবহারকারী-এজেন্ট ডেটা কোথায় ব্যবহার করা হচ্ছে, তাহলে navigator.userAgent ব্যবহারের জন্য আপনার ফ্রন্ট-এন্ড কোড এবং User-Agent HTTP হেডার ব্যবহারের জন্য আপনার ব্যাক-এন্ড কোড অনুসন্ধান করার কথা বিবেচনা করুন। এছাড়াও navigator.platform এবং navigator.appVersion এর মতো ইতিমধ্যেই অবহেলিত বৈশিষ্ট্যগুলির ব্যবহারের জন্য আপনার ফ্রন্ট-এন্ড কোড পরীক্ষা করা উচিত।

একটি কার্যকরী দৃষ্টিকোণ থেকে, আপনার কোডের যে কোনও জায়গা সম্পর্কে চিন্তা করুন যেখানে আপনি রেকর্ড করছেন বা প্রক্রিয়া করছেন:

  • ব্রাউজারের নাম বা সংস্করণ
  • অপারেটিং সিস্টেমের নাম বা সংস্করণ
  • ডিভাইস তৈরি বা মডেল
  • CPU প্রকার, স্থাপত্য, বা বিটনেস (উদাহরণস্বরূপ, 64-বিট)

এটি সম্ভবত যে আপনি ব্যবহারকারী-এজেন্ট প্রক্রিয়া করার জন্য একটি তৃতীয় পক্ষের লাইব্রেরি বা পরিষেবা ব্যবহার করছেন। এই ক্ষেত্রে, তারা ব্যবহারকারী-এজেন্ট ক্লায়েন্ট ইঙ্গিত সমর্থন করার জন্য আপডেট করছে কিনা তা পরীক্ষা করে দেখুন।

আপনি কি শুধুমাত্র মৌলিক ব্যবহারকারী-এজেন্ট ডেটা ব্যবহার করছেন?

ব্যবহারকারী-এজেন্ট ক্লায়েন্ট ইঙ্গিতগুলির ডিফল্ট সেট অন্তর্ভুক্ত:

প্রস্তাবিত ব্যবহারকারী-এজেন্ট স্ট্রিংয়ের সংক্ষিপ্ত সংস্করণটি এই মৌলিক তথ্যটিকে পিছনের-সামঞ্জস্যপূর্ণ উপায়ে ধরে রাখবে। উদাহরণস্বরূপ, Chrome/90.0.4430.85 এর পরিবর্তে স্ট্রিংটিতে Chrome/90.0.0.0 অন্তর্ভুক্ত হবে।

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

আপনি যখন ইউজার-এজেন্ট ক্লায়েন্ট ইঙ্গিতগুলিতে স্থানান্তর করতে পারেন এবং করা উচিত, আপনার লিগ্যাসি কোড বা সংস্থান সীমাবদ্ধতা থাকতে পারে যা এটিকে বাধা দেয়। এই পিছনের-সামঞ্জস্যপূর্ণ উপায়ে ব্যবহারকারী-এজেন্ট স্ট্রিং-এ তথ্য হ্রাস করার উদ্দেশ্য হল যে বিদ্যমান কোডটি কম বিস্তারিত তথ্য পাবে, এটি এখনও মৌলিক কার্যকারিতা বজায় রাখা উচিত।

কৌশল: অন-ডিমান্ড ক্লায়েন্ট-সাইড জাভাস্ক্রিপ্ট API

আপনি যদি বর্তমানে navigator.userAgent ব্যবহার করছেন তাহলে ব্যবহারকারী-এজেন্ট স্ট্রিং পার্স করার আগে আপনাকে পছন্দের navigator.userAgentData এ স্থানান্তর করতে হবে।

if (navigator.userAgentData) {
  // use new hints
} else {
  // fall back to user-agent string parsing
}

আপনি যদি মোবাইল বা ডেস্কটপের জন্য পরীক্ষা করছেন, বুলিয়ান mobile মান ব্যবহার করুন:

const isMobile = navigator.userAgentData.mobile;

userAgentData.brands হল brand এবং version বৈশিষ্ট্য সহ বস্তুর একটি অ্যারে যেখানে ব্রাউজার সেই ব্র্যান্ডগুলির সাথে তার সামঞ্জস্যতা তালিকাভুক্ত করতে সক্ষম। আপনি একটি অ্যারে হিসাবে সরাসরি এটি অ্যাক্সেস করতে পারেন বা একটি নির্দিষ্ট এন্ট্রি উপস্থিত আছে কিনা তা পরীক্ষা করতে আপনি একটি some() কল ব্যবহার করতে চাইতে পারেন:

function isCompatible(item) {
  // In real life you most likely have more complex rules here
  return ['Chromium', 'Google Chrome', 'NewBrowser'].includes(item.brand);
}
if (navigator.userAgentData.brands.some(isCompatible)) {
  // browser reports as compatible
}

আপনার যদি আরও বিশদ, উচ্চ-এনট্রপি ব্যবহারকারী-এজেন্ট মানগুলির একটির প্রয়োজন হয়, তাহলে আপনাকে এটি নির্দিষ্ট করতে হবে এবং প্রত্যাবর্তিত Promise ফলাফলটি পরীক্ষা করতে হবে:

navigator.userAgentData.getHighEntropyValues(['model'])
  .then(ua => {
    // requested hints available as attributes
    const model = ua.model
  });

আপনি যদি সার্ভার-সাইড প্রক্রিয়াকরণ থেকে ক্লায়েন্ট-সাইড প্রক্রিয়াকরণে যেতে চান তবে আপনি এই কৌশলটি ব্যবহার করতে চাইতে পারেন। JavaScript API-এর জন্য HTTP অনুরোধ শিরোনামগুলিতে অ্যাক্সেসের প্রয়োজন নেই, তাই ব্যবহারকারী-এজেন্ট মানগুলি যেকোনো সময়ে অনুরোধ করা যেতে পারে।

কৌশল: স্ট্যাটিক সার্ভার-সাইড হেডার

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

আপনি যদি ব্যবহারকারী-এজেন্ট ডেটার উপর ভিত্তি করে পরিবেশিত প্রতিক্রিয়াগুলিকে রূপান্তর বা কাস্টমাইজ করেন তবে এই কৌশলটি বিবেচনা করুন।

ব্রাউজার বা অন্যান্য ক্লায়েন্টরা বিভিন্ন ডিফল্ট ইঙ্গিত সরবরাহ করতে বেছে নিতে পারে, তাই আপনার যা প্রয়োজন তা নির্দিষ্ট করা ভাল অভ্যাস, এমনকি যদি এটি সাধারণত ডিফল্ট দ্বারা সরবরাহ করা হয়।

উদাহরণস্বরূপ, Chrome-এর বর্তমান ডিফল্টগুলি এইভাবে উপস্থাপন করা হবে:

⬇️ প্রতিক্রিয়া শিরোনাম

Accept-CH: Sec-CH-UA-Mobile, Sec-CH-UA-Platform, Sec-CH-UA

আপনি যদি প্রতিক্রিয়াগুলিতে ডিভাইস মডেলটিও পেতে চান, তাহলে আপনি পাঠাবেন:

⬇️ প্রতিক্রিয়া শিরোনাম

Accept-CH: Sec-CH-UA-Mobile, Sec-CH-UA-Model, Sec-CH-UA-Platform, Sec-CH-UA

সার্ভার-সাইডে এটি প্রক্রিয়া করার সময় প্রথমে আপনার পছন্দসই Sec-CH-UA শিরোনামটি পাঠানো হয়েছে কিনা তা পরীক্ষা করা উচিত এবং তারপরে User-Agent শিরোনাম পার্সিং-এ ফ্যালব্যাক করা উচিত যদি এটি উপলব্ধ না হয়।

কৌশল: ক্রস-অরিজিন অনুরোধে ইঙ্গিত অর্পণ করা

আপনি যদি ক্রস-অরিজিন বা ক্রস-সাইট সাবরিসোর্সগুলির জন্য অনুরোধ করেন যেগুলির অনুরোধে ব্যবহারকারী-এজেন্ট ক্লায়েন্ট ইঙ্গিতগুলি পাঠানোর প্রয়োজন হয় তবে আপনাকে অনুমতি নীতি ব্যবহার করে স্পষ্টভাবে পছন্দসই ইঙ্গিতগুলি নির্দিষ্ট করতে হবে৷

উদাহরণস্বরূপ, ধরা যাক যে https://blog.site https://cdn.site এ সংস্থানগুলি হোস্ট করে যা একটি নির্দিষ্ট ডিভাইসের জন্য অপ্টিমাইজ করা সংস্থানগুলি ফিরিয়ে দিতে পারে৷ https://blog.site Sec-CH-UA-Model ইঙ্গিত চাইতে পারে, কিন্তু Permissions-Policy শিরোনাম ব্যবহার করে স্পষ্টভাবে এটি https://cdn.site এ অর্পণ করতে হবে। নীতি-নিয়ন্ত্রিত ইঙ্গিতগুলির তালিকা ক্লায়েন্ট হিন্টস ইনফ্রাস্ট্রাকচার ড্রাফ্টে উপলব্ধ

⬇️ blog.site থেকে ইঙ্গিত অর্পণ করা প্রতিক্রিয়া

Accept-CH: Sec-CH-UA-Model
Permissions-Policy: ch-ua-model=(self "https://cdn.site")

⬆️ cdn.site এ সাব-রিসোর্স করার অনুরোধে অর্পিত ইঙ্গিত অন্তর্ভুক্ত

Sec-CH-UA-Model: "Pixel 5"

আপনি একাধিক উত্সের জন্য একাধিক ইঙ্গিত নির্দিষ্ট করতে পারেন, এবং শুধুমাত্র ch-ua পরিসর থেকে নয়:

⬇️ একাধিক উত্সকে একাধিক ইঙ্গিত অর্পণ করে blog.site থেকে প্রতিক্রিয়া৷

Accept-CH: Sec-CH-UA-Model, DPR
Permissions-Policy: ch-ua-model=(self "https://cdn.site"),
                    ch-dpr=(self "https://cdn.site" "https://img.site")

কৌশল: আইফ্রেমে ইঙ্গিত অর্পণ করা

ক্রস-অরিজিন আইফ্রেমগুলি ক্রস-অরিজিন সংস্থানগুলির অনুরূপভাবে কাজ করে, তবে আপনি allow বৈশিষ্ট্যে যে ইঙ্গিতগুলি অর্পণ করতে চান তা নির্দিষ্ট করুন৷

⬇️ blog.site থেকে প্রতিক্রিয়া

Accept-CH: Sec-CH-UA-Model

↪️ blog.site এর জন্য HTML

<iframe src="https://widget.site" allow="ch-ua-model"></iframe>

⬆️ widget.site এ অনুরোধ করুন

Sec-CH-UA-Model: "Pixel 5"

iframe-এ allow অ্যাট্রিবিউটটি যেকোনো Accept-CH শিরোনামকে ওভাররাইড করবে যা widget.site নিজেই পাঠাতে পারে, তাই নিশ্চিত করুন যে আপনি iframe'd সাইটের প্রয়োজনীয় সমস্ত কিছু নির্দিষ্ট করেছেন৷

কৌশল: গতিশীল সার্ভার-সাইড ইঙ্গিত

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

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

উদাহরণস্বরূপ, আপনার সাইটে আপনার একটি বিভাগ থাকতে পারে যেখানে আপনি আইকন এবং নিয়ন্ত্রণ প্রদান করতে চান যা ব্যবহারকারীর অপারেটিং সিস্টেমের সাথে মেলে। এর জন্য, উপযুক্ত উপ-সম্পদ পরিবেশন করার জন্য আপনি অতিরিক্ত Sec-CH-UA-Platform-Version টানতে চাইতে পারেন।

⬇️ /blog জন্য প্রতিক্রিয়া শিরোনাম

Accept-CH: Sec-CH-UA-Mobile, Sec-CH-UA-Platform, Sec-CH-UA

⬇️ /app জন্য প্রতিক্রিয়া শিরোনাম 

Accept-CH: Sec-CH-UA-Mobile, Sec-CH-UA-Platform, Sec-CH-UA-Platform-Version, Sec-CH-UA

কৌশল: প্রথম অনুরোধে সার্ভার-সাইড ইঙ্গিত প্রয়োজন

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

প্রথম অনুরোধের মানে হল সেই ব্রাউজিং সেশনে পাঠানো সেই মূলের জন্য প্রথম শীর্ষ-স্তরের অনুরোধ। ইঙ্গিতগুলির ডিফল্ট সেটে প্রধান সংস্করণ সহ ব্রাউজারের নাম, প্ল্যাটফর্ম এবং মোবাইল সূচক অন্তর্ভুক্ত থাকে। তাই এখানে জিজ্ঞাসা করার প্রশ্ন হল, আপনার কি প্রাথমিক পৃষ্ঠা লোডের জন্য বর্ধিত ডেটা প্রয়োজন?

প্রথম অনুরোধে অতিরিক্ত ইঙ্গিতের জন্য দুটি বিকল্প রয়েছে। প্রথমত, আপনি Critical-CH হেডার ব্যবহার করতে পারেন। এটি Accept-CH এর মতো একই বিন্যাস নেয় তবে ব্রাউজারকে বলে যে এটি অবিলম্বে অনুরোধটি পুনরায় চেষ্টা করা উচিত যদি প্রথমটি সমালোচনামূলক ইঙ্গিত ছাড়াই পাঠানো হয়।

⬆️ প্রাথমিক অনুরোধ

[With default headers]

⬇️ প্রতিক্রিয়া শিরোনাম

Accept-CH: Sec-CH-UA-Model
Critical-CH: Sec-CH-UA-Model

🔃 ব্রাউজার অতিরিক্ত শিরোনাম সহ প্রাথমিক অনুরোধ পুনরায় চেষ্টা করে

[With default headers + …]
Sec-CH-UA-Model: Pixel 5

এটি প্রথম অনুরোধে পুনরায় চেষ্টা করার ওভারহেড বহন করবে, কিন্তু বাস্তবায়ন খরচ তুলনামূলকভাবে কম। অতিরিক্ত হেডার পাঠান এবং ব্রাউজার বাকি কাজ করবে।

এমন পরিস্থিতিতে যেখানে আপনার প্রথম পৃষ্ঠা লোডের জন্য অতিরিক্ত ইঙ্গিতের প্রয়োজন হয়, ক্লায়েন্ট ইঙ্গিত নির্ভরযোগ্যতা প্রস্তাবটি সংযোগ-স্তরের সেটিংসে ইঙ্গিতগুলি নির্দিষ্ট করার জন্য একটি রুট তৈরি করছে। এটি HTTP/2 এবং HTTP/3 সংযোগে ইঙ্গিতগুলির এই প্রাথমিক পাসিং সক্ষম করতে TLS 1.3-এ অ্যাপ্লিকেশন-লেয়ার প্রোটোকল সেটিংস(ALPS) এক্সটেনশন ব্যবহার করে। এটি এখনও খুব প্রাথমিক পর্যায়ে রয়েছে, কিন্তু আপনি যদি সক্রিয়ভাবে আপনার নিজের TLS এবং সংযোগ সেটিংস পরিচালনা করেন তাহলে অবদান রাখার জন্য এটি একটি আদর্শ সময়।

কৌশল: উত্তরাধিকার সমর্থন

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

UA-CH রেট্রোফিল হল একটি ছোট লাইব্রেরি যা আপনাকে অনুরোধ করা navigator.userAgentData মানগুলি থেকে তৈরি একটি নতুন স্ট্রিং দিয়ে navigator.userAgent ওভাররাইট করতে দেয়৷

উদাহরণস্বরূপ, এই কোডটি একটি ব্যবহারকারী-এজেন্ট স্ট্রিং তৈরি করবে যা অতিরিক্ত "মডেল" ইঙ্গিত অন্তর্ভুক্ত করে:

import { overrideUserAgentUsingClientHints } from './uach-retrofill.js';
overrideUserAgentUsingClientHints(['model'])
  .then(() => { console.log(navigator.userAgent); });

ফলস্বরূপ স্ট্রিংটি Pixel 5 মডেল দেখাবে, কিন্তু তারপরও uaFullVersion ইঙ্গিতটি অনুরোধ করা হয়নি বলে হ্রাসকৃত 92.0.0.0 দেখায়: 

Mozilla/5.0 (Linux; Android 10.0; Pixel 5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.0.0 Mobile Safari/537.36

আরও সমর্থন

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

আনস্প্ল্যাশে রিকার্ডো রোচা ছবি তুলেছেন