آشنایی با کوکی و نقش آن در طراحی سایت

تیم تحریریه کلیک اول | جمعه , ۲۰ اردیبهشت ۱۳۹۸ | مدت زمان مطالعه: 12 دقیقه

در این مقاله می خوانید:

آشنایی با کوکی ها، یکی از موارد مهم در طراحی سایت به شمار می رود. این مقاله، به بررسی نحوه استفاده از این تکنیک در جاوا اسکریپت می پردازد و اهمیت آموزش کوکی را برای شما مشخص می کند.

آشنایی با کوکی ها

در پروتکل های HTTP و HTTPS، کوکی ها داده های کوچکی هستند که بین کلاینت (معمولا مرورگر) و سرور تبادل می شوند. از کوکی ها برای ردیابی و ضبط هرچیزی، از وضعیت یک برنامه گرفته (مانند اینکه در حال حاضر کجای برنامه قرار دارید) تا اطلاعات جلسه و یا اطلاعاتی درباره بازدید از سایت، از قبیل نام کاربری، استفاده می شود. (هرچند دلایل زیادی وجود دارد که شما نباید نام کاربری یا هرگونه اطلاعات شخصی دیگری از کاربرانتان را در کوکی ذخیره کنید). در این مقاله همراه ما باشید تا ضمن آشنایی با کوکی، به مسائل مهم مربوط به آن بپردازیم.

کوکی و حریم شخصی

با وجود بسیاری از مسائل حریم شخصی که برخی آن را به کوکی ها ارتباط می دهند، خود کوکی ها کاملا بی خطر هستند. در بهترین حالت، کوکی ها در حافظه RAM تنها برای مدت زمانی که کاربر از سایت بازدید می کند باقی می مانند. در بدترین حالت نیز، کوکی ها به شکل فایل های متنی بر روی هارد درایو کاربر می نشینند.

کوکی ها هیچ مسئله امنیتی را ایجاد نمی کنند به جز اطلاعاتی که در آنها ذخیره می شود. . آری، این درست است که هیچ چیز مانع آن نمی شود که یک وب سایت در کوکی، داده ای را بنویسد که نباید بنویسد، اما وب سایت می تواند آن داده را به روش های نامطمئن دیگری نیز بنویسد.

پس مشكل، کوکی ها نیستند. مشكل، کسانی هستند که از کوکی ها بد استفاده کرده و داده های شخصی را به وسيله آن ذخیره می کنند. هر چیزی که درون کوکی ذخیره می شود تنها به اندازه ای امن است که کامپیوتر محل استقرار کوکی امنیت دارد. بنابراین، توصیه می شود که هیچ گاه اطلاعات شخصی قابل شناسایی را در کوکی ذخیره نکنید تا امنیت داده شخصی کاربران در هرحال حفظ شود.

کوکی معمولا فقط یک فایل متنی است. کوکی می تواند عناصر تشكيل دهنده مختلفی داشت باشد، اما در قلب آن مجموعه ای از جفت نام/مقدار قرار دارد که بسیاری از آنها توسط برنامه نویس سایت انتخاب شده و به شکل اختیاری تنظیم می شوند. برای نمونه، هنگامی که کاربر از سایت ما به آدرس https://clickaval.com بازدید می کند و به لینک بلاگ می رود، یک کوکی بر روی کامپیوتر وی ذخیره می شود.

محتوای این کوکی چیزی شبیه به این است:

Name: cookie4blog
Content: sess_id02934235
Domain: clickaval.com
Path: /
Send For: Any type of connection
Expires: Never

Name: cookie4blog

Content: sess_id02934235

Domain: clickaval.com

Path: /

Send For: Any type of connection

Expires: Never

مرورگر، کوکی را در کامپیوتر کاربر تا زمان انقضای آن نگهداری می کند، که در این مورد زمان انقضای برابر با هرگز است. زمانی که همین کاربر مجددا به سایت رجوع می کند، مرورگر کوکی را به سمت سرور می فرستد. پس از آن سرور می تواند تشخیص دهد که کاربر در بازدید قبلی کجا بوده و یا ممکن است از برخی تنظیمات شخصی مربوط به کاربر برای سفارشی کردن محیط سایت برای وی استفاده کند.

یکی از موارد مهم در رابطه با کوکی این است که کوکی تنها به سرور مشخص شده در بخش Domain فرستاده می شود. بنابراین، کوکی نشان داده شده در بالا توسط مرورگر، زمانی به سرور فرستاده می شود که مرورگر آدرس سایت مورد بازدید را با clickaval.com یکی بیابد. علاوه بر این، در یک کوکی ممکن است گزينه Secure نیز تنظیم شده باشد (که در کوکی فوق انجام نشده است). با تنظیم این گزینه کوکی تنها می تواند از طریق پروتکل امن SSL که همانند زمان ارتباط از طریق HTTPS ، به سمت سرور فرستاده شود

توجوه کوکی های شخص ثالث و روش های زیرکانه ای که برای حل مسئله محدودیت دامنه وجود دارد، فراتر از محدوده این کتاب است.

جاوا اسکریپت این قابلیت را دارد که هم کوکی را ایجاد کرده و هم آن را بخواند که در این مقاله به هر دوی این عملیات ها خواهیم پرداخت.

ایجاد کوکی با جاوااسکریپت

با استفاده از خصيصيه document.cookie می توان کوکی ها را با جاوا اسکریپت ایجاد کرد.

در کار با کوکی ها از رشته های متنی ساده استفاده کنید. از فاصله، علائم نقطه گذاری و کاراکتر دیگری غیر از کاراکترهای الفباعددی اجتناب کنید؛ چون به کارگیری آنها مجاز نیست. می توان از این کاراکترهای غیرقانونی در کوکی استفاده کرد، اما نه به شکل اصلی آن ها. بلکه باید از تفسیر این کاراکترها به شکل اصلی آنها توسط جاوااسکریپت جلوگیری کرد. در غیراین عورت، این کاراکترها مشکلاتی را برای کوکی، صفحه وب و مرورگر ایجاد خواهند کرد. همانند بقیه مشکلات مطرح در جاوااسکریپت و برنامه نویسی وب، این مشکلات نیز در حالت کلی دقیق و ظریف بوده و خطایابی آنها نیز دشوار است.

نگاهی به یک کوکی ساده

هر کوکی نیاز به نام دارد. قطعه کد زیر یک کوکی ساخته و آن را برای مرورگر می فرستد.

var cookName = "testcookie";
var cookval = "testvalue";
var mycookie = cookName + "=" + cookval;
document.cookie = myCookie;

var cookName = "testcookie";

var cookval = "testvalue";

var mycookie = cookName + "=" + cookval;

document.cookie = myCookie;

هنگامی که از صفحه ای حاوی قطعه کد فوق بازدید می کنید، یک کوکی با نام testcookie در مرورگر شما ایجاد می شود. با فرض اینکه اجازه ذخیره کردن کوکی ها را به مرورگر داده باشید، مرورگر. داده کوکی (testvalue) را به همراه اطلاعات دیگر برای استفاده در آینده ذخیره می کند.

زمانی که یک کوکی از طریق جاوااسکریپت تنظیم می شود، این کوکی به انتهای کوکی ای که از قبل موجود است اضافه می شود. این فرآیند در هنگام خواندن کوکی ها معنای خود را نشان خواهد دارد. همچنین باید بدانید که برای تعیین مشخصات یک کوکی خاص، این مشخصات نیز در قالب جفت نام/مقدار باید به کوکی ملحق شوند. مثال بعدی، شما را درباره این جنبه از کار با کوکی ها راهنمایی خواهد کرد

تنظیم تاریخ انقضای کوکی

مثالی که قبلا بحث شد کوکی ای را تنها با یک جفت نام/مقدار ایجاد می کرد. این کوکی ساخته شده، در عمل شبیه زیر خواهد بود. این کوکی تنها یک نام کوکی و یک داده کوکی دارد.

testcookie=testvalue;

1	testcookie=testvalue;

برای افزودن تاریخ انقضا، باید صفت expires به کوکی اضافه شود تا به شكل زير در آید

testcookie = testvalue;
expires=Sat, 12 Mar 2011 17aad:51:50 GMT;

1 2	testcookie = testvalue; expires=Sat, 12 Mar 2011 17aad:51:50 GMT;

برای افزودن تاریخ انقضا، کافیست تا تاریخ انقضا به انتهای کوکی اضافه شود. فرمت تاریخ انقضا نیز مهم است. جهت فرمت بندی صحیح تاریخ برای کوکی، نیاز دارید از تعدادی توابع جاوااسکریپت استفاده کنید. قبل از این کار، بهتر است قابلیت اعلان کوکی ها را در مرورگر خود فعال کنید. انجام این عمل فرآیند اشکال زدایی را ساده تر خواهد کرد؛ چرا که هر زمان سرور یا جاوااسكريبت کوکی ای را به سمت مرورگر می فرستد، شما از آن مطلع خواهید شد.

تنظیم دامنه کوکی

در مثال هایی که تاکنون نشان داده شد، صفت domain تنظیم نشده بود؛ صفت Domain به طور فرض برابر با میزبان و دامنه سروری که کوکی را می فرستد (یا سروری که کد جاوا اسکریپت تولیدکننده کوکی را به سمت مرورگر می فرستد) قرار می گیرد. در این مثال ها، دامنه برابر با clickaval.com بود. به هرحال، بسیاری از سایت ها چندین میزبان دارند که محتوای HTTP از طریق آنها در دسترس کاربر قرار می گیرد. برای نمونه، ممکن است یک سرور مجزا به نام images.clickaval.com وجود داشته باشد که فقط وظیفه تامین تصاویر موجود در صفحات clickaval.com را داشته باشد. راحت تر خواهد بود اگر می توانستیم دامنه را برابر با clickaval.com تنظیم کنیم تا یک کوکی واحد بتواند در سرتاسر دامنه به اشتراک گذاشته شود.

اگر فکر میکنید که تنظیم دامنه در کوکی، همانند تنظيم مسير است، پس درست حدس زده اید. مثال زیر صفحه وبی را نشان میدهد که پارامترهای مسیر، تاریخ انقضا و دامنه را به کوکی اضافه می کند. کدهای مربوط به افزودن صفت domain به صورت پررنگ نشان داده شده اند.

<!DOCTYPE html>
<html>
<head>
	<title>Reading Cookies</title>
</head>
<body>
<p>Hello</p>
</body>
<script>
	var cookName = "testcookie";
	var cookval = "testvalue";
	var date = new Date();
	date.setTime (date.getTime()+604800000);
	var expireDate = date.toGMTString();
	var path = ";path=/";
	var domain = ";domain=braingia.org";
	var mycookie = cookName + "=" + cookVal + ";expires=" + expireDate + path + domain;
	document.cookie = myCookie;
</script>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Reading Cookies</title>

</head>

<body>

<p>Hello</p>

</body>

var cookName = "testcookie";

var cookval = "testvalue";

var date = new Date();

date.setTime (date.getTime()+604800000);

var expireDate = date.toGMTString();

var path = ";path=/";

var domain = ";domain=braingia.org";

var mycookie = cookName + "=" + cookVal + ";expires=" + expireDate + path + domain;

document.cookie = myCookie;

</script>

</html>

کار با کوکی های امن

تنظيم علامت Secure در کوکی بدین معناست که کوکی تنها زمانی فرستاده می شود که در اتصال از پروتکل SSL استفاده شده باشد. کد زیر علامت secure را نیز به متغير mycookie که قبلا ایجاد شد اضافه می کند:

var myCookie = cookieName + "=" + cookVal + ";expires=" + expiredate + path + domain + ";secure";

1	var myCookie = cookieName + "=" + cookVal + ";expires=" + expiredate + path + domain + ";secure";

زمانی که این صفحه را در مرورگر مشاهده می کنید، حتی با استفاده از یک اتصال http غیر مطمئن، باز جاوا اسکریپت کوکی را ایجاد می کند. توجه کنید که گزينه Send For اکنون مقدار “Encrypted connections only” را در بر دارد،

خواندن کوکی با جاوا اسکریپت

تا اینجا، کدی را با هم دیدیم که در هنگام بازدید یک صفحه، کوکی ای را به مرورگر می فرستد. زمانی که کاربر صفحه ای را دوباره بازدید می کند که دامنه و مسیر آن با کوکی های ذخیره شده در کامپیوترش یکی است، مرورگر به همراه درخواست صفحه از سرور، هر کوکی مطابق با آن را نیر می فرستد. هنگامی که مجددا این صفحه به مرورگر ارسال می شود، کوکی در کد جاوااسکریپت صفحه قابل دستیابی خواهدبود.

خواندن کوکی با جاوا اسکریپت به معنای گرفتن کوکی از document.cookie و تجزيه آن به قطعات قابل مدیریت است. از آن جایی که صفات کوکی در هنگام ایجاد با نقطه ویرگول (;) از هم جدا شده اند. فراخوانی متد Split بر روی document.cookie به سادگی، آن ها را از هم جدا خواهد کرد. مثال زیر را ببینید:

var incCookies = document.cookie.split(";");

1	var incCookies = document.cookie.split(";");

با این قطعه کد جاوا اسکریپت همه کوکی ها تجزیه شده و در دسترس قرار خواهند گرفت. به کمک حلقه for می توانید تمام این کوکی ها را برای یافتن هر نام و داده کوکی مورد بررسی قرار دهید. توجه کنید که این روش صفات کوکی را ارزیابی نمی کند.)

<!DOCTYPE html>
<html>
<head>
	<title>Reading Cookies</title>
</head>
<body>
<p>Hello</p>
</body>
<script>
	var incCookies = document.cookie.split(";");
	var cookLength = incCookies.length;
	for(var c = 0; c < cookLength; c++) {
		alert(incCookies[c]);
	}
</script>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Reading Cookies</title>

</head>

<body>

<p>Hello</p>

</body>

var incCookies = document.cookie.split(";");

var cookLength = incCookies.length;

for(var c = 0; c < cookLength; c++) {

alert(incCookies[c]);

}

</script>

</html>

حذف کوکی ها

هیچ متد درون ساختی برای حذف و پاک کردن مستقیم کوکی ها وجود ندارد. چه از طريق جاوا اسکریپت و چه به هر روش دیگری برای حذف یک کوکی، به سادگی می توان مقدار آن را پاک کرده و تاریخ انقضای آن را به زمانی در گذشته تنظیم کرد. کوکی ای که در مثال های قبلی ایجاد شد را نیز می توانید با تنظیم تاریخ انقضای آن به زمانی در گذشته حذف کنید. توجه داشته باشید که اجزایی مانند نام، مسیر و دامنه کوکی باید کاملا با کوکی ای که می خواهید حذف شود مطابقت داشته باشند.

در عمل، فرآیند حذف یک کوکی با نوشتن مجدد همان کوکی به همراه تنظیم تاریخ انقضای آن در گذشته، به شکل زیر انجام می شود:

var cookName = "testcookie";
var cookval = "";
var date = new Date();
date.setTime(date.getTime()-60);
var expireDate = date.toGMTString();
var path = "path=/";
var domain = ";
domain=clickaval.com";
var mycookie = cookName + "=" + cookval + ";
expires=" + expireDate + path + domain;
document.cookie = myCookie;

var cookName = "testcookie";

var cookval = "";

var date = new Date();

date.setTime(date.getTime()-60);

var expireDate = date.toGMTString();

var path = "path=/";

var domain = ";

domain=clickaval.com";

var mycookie = cookName + "=" + cookval + ";

expires=" + expireDate + path + domain;

document.cookie = myCookie;

هنگامی که این کد اجرا شود، فایرفاکس بلافاصله کوکی را از روی کامپیوتر پاک می کند. در حالی که مرورگرهای دیگر ممکن است تا بسته شدن مرورگر آن را نگه دارد.

به صفحه تلگرام کلیک اول بپیوندید.

به صفحه اینستاگرام کلیک اول بپیوندید.

تیم تحریریه کلیک اول

نویسنده در بلاگ کلیک اول

این مقاله به قلم و نویسندگی تیم تحریریه کلیک اول تهیه شده است. هدف ما در کلیک اول، ارائه بستری مناسب برای وب مستران عزیز است که بتوانند مجموعه ای از خدمات مربوط به دیجیتال مارکتینگ، افزایش ترافیک سایت و همچنین شبکه های اجتماعی را به سادگی دریافت کنند.