> 웹 프론트엔드 > JS 튜토리얼 > 쿠키의 세계 탐험: 초보자 가이드

쿠키의 세계 탐험: 초보자 가이드

WBOY
풀어 주다: 2023-09-03 21:25:02
원래의
1252명이 탐색했습니다.

쿠키의 세계 탐험: 초보자 가이드

쿠키에 대해 들어보셨을 수도 있지만, 쿠키가 정확히 무엇이며 실제로 쿠키로 무엇을 할 수 있나요? 이 튜토리얼에서는 쿠키의 기본 사항에 중점을 두고 다양한 웹 애플리케이션 및 사이트 환경에서 쿠키의 기능을 이해합니다. 또한 PHP 및 JavaScript 프로젝트에서 이를 사용하는 방법을 배우며, 이를 사용할 때 발생할 수 있는 보안 문제에 특별한 주의를 기울입니다. 이 기사를 읽고 나면 귀하는 자신의 웹 애플리케이션에서 쿠키를 안전하게 구현하는 데 필요한 기술을 갖게 될 것입니다.


1단계.쿠키 이해하기

우리 여행의 첫 번째 단계는 이 쿠키가 실제로 무엇인지 알아내는 것입니다! 이미 사용해 보셨더라도 이 섹션이 여전히 유용할 것입니다. 계속해서 저를 팔로우하세요!

요약

쿠키는 컴퓨터에 저장되는 텍스트 파일이라고 쉽게 생각하실 수 있습니다. 웹 서버의 요청에 따라 브라우저는 이러한 파일을 생성합니다. 이런 일이 발생하면 네트워크 서버는 이 파일을 읽거나 쓸 수 있습니다. 위험한 기능처럼 보일 수도 있지만(다른 사람이 자신의 컴퓨터에 파일을 쓰는 것을 좋아하는 사람은 아무도 없으므로) 이 프로세스를 최대한 안전하게 만들기 위해 몇 가지 제한 사항이 있습니다.

  • 웹 서버는 자신의 도메인에 설정된 쿠키에만 접근할 수 있습니다. 도메인은 웹 서버가 새 쿠키를 요청할 때 브라우저에 의해 설정되며 웹 서버의 도메인 또는 하위 도메인만 될 수 있습니다. 웹 서버는 필요한 경우 하위 도메인을 선택할 수 있습니다. 즉, mozilla.com은 google.com 등이 설정한 쿠키를 읽을 수 없으며 그 반대의 경우도 마찬가지입니다.
  • HTTP 프로토콜에 따르면 각 쿠키는 4096바이트(4KB)를 초과할 수 없습니다.
  • 도메인당 쿠키 수에는 제한이 있습니다. 쿠키 수는 브라우저마다 다르지만 일반적으로 사용되는 쿠키 제한은 20개입니다. 이는 단일 도메인이 클라이언트의 디스크 공간을 차지하는 것을 방지하기 위한 것입니다.
  • 클라이언트 하드 드라이브의 총 쿠키 수에는 제한이 있습니다. 이 숫자는 브라우저마다 다르지만 일반적으로 약 300개로 제한됩니다. 이 숫자를 초과하면 이전 쿠키가 삭제되고 새 쿠키가 생성됩니다.

쿠키에는 만료일이 있습니다. 이 날짜는 웹 서버가 더 이상 오래된 쿠키를 요구하지 않을 때 브라우저가 오래된 쿠키를 삭제할 수 있도록 설정됩니다. 만료 날짜가 비어 있는 경우 서버 연결이 종료되면 쿠키가 삭제됩니다. 이는 사용자가 웹사이트의 창이나 탭을 닫거나 전체 브라우저를 닫을 때 발생합니다. 세션 쿠키라고도 불리는 이러한 쿠키는 주로 임시 설정을 저장하는 데 사용됩니다.

기술

이러한 것들이 기술적인 수준에서 어떻게 보이는지 살펴보겠습니다. 쿠키는 HTTP 프로토콜을 통해 전송됩니다. 이는 브라우저가 파일을 검색하여 서버로 보내기 위해 사용하는 프로토콜입니다. 쿠키를 요청한 후 브라우저가 웹페이지에서 새 항목을 가져올 때마다 쿠키가 서버로 전송됩니다. 아래에서는 새 쿠키를 요청하는 서버 조각을 볼 수 있습니다(이 조각은 HTTP 응답의 일부입니다).

으아아아

이제 두려워하지 마세요. 모두 이해하기 쉽습니다!

  • Set-Cookie: 서버가 새 쿠키를 생성하려고 한다는 것을 브라우저에 알립니다.
  • name은 쿠키의 이름입니다. 도메인 내의 각 쿠키는 브라우저가 모든 쿠키를 별도로 유지할 수 있도록 서로 다른 이름을 가져야 합니다. 이름 뒤에는 =Content-Data가 있으며, 여기서 "Content-Data"는 쿠키에 포함될 데이터입니다. 이 데이터는 텍스트 문자열이나 숫자일 수 있으며 위에서 언급한 대로 최대 크기는 4KB입니다.
  • expires=는 만료 날짜 명령입니다. 만료일은 "Wdy,DD-Mon-YYYY HH:MM:SS GMT" 형식입니다(나도 모르기 때문에 왜 이렇게 말도 안 되는 형식으로 정의했는지 묻지 마세요. 만료 날짜를 확인한 다음 장기간에 메모리, 하드 드라이브 공간 및 대역폭을 낭비하는 이유는 무엇입니까?) 하지만 대부분의 프로그래밍 언어에는 사용하기 쉬운 기능이 있으므로 걱정하지 마세요. 브라우저는 만료일이 지난 쿠키를 자동으로 삭제합니다.
  • DomainsPaths에는 더 자세한 설명이 필요합니다. Domain은 쿠키가 활성화될 도메인입니다. 도메인이 "ads.google.com"이면 쿠키는 해당 도메인의 서버에만 전송되고, 도메인이 "google.com"이면 쿠키는 해당 도메인의 모든 하위 도메인에 대한 서버로 전송됩니다. Google, google.com 자체도 포함됩니다.
  • Path는 쿠키가 전송되는 도메인의 경로입니다. 즉, 경로가 "/images/"로 설정되고 도메인이 "ads.google.com"으로 설정된 경우 브라우저가 "ads.google"에서 파일을 요청하는 경우에만 쿠키가 서버로 전송됩니다. com/images/'. 경로가 "/"로 설정되면 요청한 파일이 서버에 있는 위치에 관계없이 쿠키가 서버로 전송됩니다.

다음 단계에서는 프로그래밍 언어에서 이러한 속성을 사용하는 방법을 검토하겠습니다.


2단계. 쿠키를 만들고 읽는 방법

쿠키는 다양한 방법으로 생성할 수 있지만, 이 튜토리얼에서는 PHP와 JavaScript에 중점을 둘 것입니다.

PHP

在 PHP 中创建 cookie 时要记住的最重要的事情是,您必须在向浏览器发送任何数据之前设置所有 cookie。这意味着您应该始终任何输出之前初始化新的cookie。这包括 echo() 或 print() 命令以及 或

标记。当然,也有一些例外,但这是一般的经验法则。
<?php
/***Creating a cookie***/
$name = 'clientname';
$value = 'Peter Griffin';
//time() gives current time in seconds, and we add 60 seconds * 30 = 30 minutes
//so this cookie expires in 30 minutes.
//You may notice that the expire date is in seconds, PHP translates this to
//the correct format internally!
$expireDate = time() + 60 * 30;
$path = '/example/';
$domain = 'test.envato.com';
$secure = false; //only transmit the cookie if a HTTPS connection is established
$httponly = true; //make cookie available only for the HTTP protocol (and not for JavaScript)
setcookie( $name, $value, $expireDate, $path, $domain, $secure, $httponly);

<html>
.... //all content etc goes here
?>
로그인 후 복사

除了 $secure$httponly 之外,现在看起来应该很熟悉。 “secure”是强制仅在已建立 HTTPS 连接的情况下发送 cookie,如果设置为 true,则通常应设置为 false。 “httponly”使 cookie 只能通过 HTTP 协议使用,这意味着客户端语言(如 JavaScript 和 VBscript)无法访问 cookie。这有助于防止令人讨厌的事情,例如跨站点脚本,如果您无意使用 JavaScript 等语言编辑客户端的 cookie,则应将其设置为 true。另外,为了防止误解,“httponly”并不意味着 cookie 不能通过 HTTPS 发送,因为事实上它们仍然可以。但是,请注意,上面的代码片段可以变得非常小(并且应该如此):

<?php
setcookie( 'clientname', 'Peter Griffin', time()+60*30, '/example/', 'test.envato.com', false,true);
?>
로그인 후 복사

太棒了!现在我们可以创建cookie,但我们也必须能够读取它们。幸运的是,一旦创建了 cookie,PHP 就可以让这一切变得非常简单。在 PHP 中,有一个名为 $_COOKIE[] 的环境变量,可用于提取 cookie 的值。要使用它,只需将 cookie 的名称插入方括号 [] 内,如下所示:

<?php
$cookieValue = $_COOKIE['name of the cookie'];
?>
로그인 후 복사

这个环境变量可以像其他环境变量一样使用。就像 $_GET[] 和 $_POST[] 一样,如果您愿意,可以直接将其视为普通变量(当然,一旦您检查了 cookie 是否确实存在)。

如果您想更改过期日期、路径或域,则必须使用与原始 cookie 相同的名称,使用 setcookie() 覆盖现有 cookie。如果您将过期日期更改为过去的日期(例如 time()-30*60),则 Cookie 将被删除。

JavaScript

Cookie 也可以在客户端读取和写入。尽管 JavaScript 没有提供一个很好的读取和写入 cookie 的解决方案,但它是可能的并且被广泛使用。 JavaScript 使用 document.cookie 对象进行 cookie 操作,如以下代码片段所示:

//get current date
var expiredate = new Date();
//increase date by 5 hours
expiredate.setHours( expiredate.getHours() + 5);
document.cookie = 'cookiename=cookievalue; expires='  + expiredate.toUTCString() + 'path=/example/; domain=test.envato.com';
로그인 후 복사

您可能已经注意到,此语法与 HTTP 协议表示法非常相似。这样做的优点是更容易控制,但也带来了一些潜在的问题。下面是读取 cookie 的 片段。

var cookieName = 'testcookiename';
var textArray = document.cookie.split(';'); //put all the parts of the string in an array
for(var i = 0; i < textArray.length; i++){ // loop though all string pieces
var textPiece = textArray[i]; //contains 1 string piece
 //filter beginning spaces
while(textPiece(0)==' ') textPiece = textPiece.substring(1,textPiece.length);
//if the textpiece contains our cookies name
if (textPiece.indexOf(cookieName)== 0){ 
 //return whats after the cookies name
return textPiece.substring(cookieName.length,c.length);
}
}
로그인 후 복사

我知道,我知道;这是一种痛苦。对你们来说幸运的是,我在下面发布了一些预先编写的函数(不过,出于学习目的,您可能想创建自己的函数,而且您应该这样做!)。

function writeCookie(cookieName, cookieValue, expireHours, path, domain){
var date =  new Date();
date.setHours(date.getHours + expireHours);
document.cookie = cookieName + '=' + cookieValue + '; expires=' + date + '; path=' + path + '; domain=' + domain;
}

function readCookie(cookieName){
var textArray = document.cookie.split(';');
for(var i = 0; i < textArray.length; i++){
var textPiece = textArray[i]; 
while(textPiece(0)==' ') textPiece = textPiece.substring(1,textPiece.length);
if (textPiece.indexOf(cookieName)== 0) return textPiece.substring(cookieName.length,c.length);
}
}
로그인 후 복사

请记住,这些片段不包含任何错误检查。


第 3 步. 如何处理 Cookie

你知道吗? -

Cookie 是由 Netscape 发明的,该公司希望使用它们为在线商店创建购物车。多亏了 cookie,人们即使在与商店断开连接后也能够保留购物车中的商品。

如今,我们几乎将 Cookie 用于您能想到的所有用途。您可以使用它们来保存用户设置,例如名称、语言、位置或屏幕尺寸。这可以提高您想要为客户提供的服务质量,因为您可以优化为客户提供的服务,并在将来记住这种优化。例如,您可以将客户的首选语言保存到 cookie,然后在客户每次访问您的网站时以首选语言显示您网站的内容。

当然,用cookie还有很多比这更有趣的事情!在下一步中,我将向您展示一个很酷的代码片段示例。


第 4 步。 编写很酷的东西

终于!现在我们可以开始编写一些很棒的代码了!下面是一个奖励片段,它使用 cookie 创建重新登录机制。

“记住我”登录片段

在我们开始之前,此片段包含一些 MySQL 代码。如果您不熟悉 MySQL,请不要惊慌。尽管这段代码有点困难,但只要有一些基本的 PHP 和 cookie 知识就应该可以理解。

要创建“记住我”的实现,我们必须具备一些条件。首先,我们需要一个包含用户名、密码和标识字段的数据库表。其次,我们需要一个唯一的字符串或数字来通过cookie安全地识别客户端(这是数据库表中的标识)。在此代码片段中,我们将使用 SHA-1 摘要(它只是一个字符串)作为标识符。如果使用得当,这可以提供出色的安全性。

大多数人只是在 cookie 中插入用户名和密码,然后自动将其发送到服务器。 应始终避免这种情况!Cookie 通常通过非安全连接发送,因此任何潜在攻击者很容易看到内容。

<?php

//this assumes that the user has just logged in
/****Creating an identification string****/

$username; //normally the username would be known after login

//create a digest from two random values and the username
$digest = sha1(strval(rand(0,microtime(true)) + $username + strval(microtime(true)); 

//save to database (assuming connection is already made)
mysql_query('UPDATE users SET reloginDigest="'.$digest.'" WHERE username="'.$username.'"');  

//set the cookie
setcookie( 'reloginID', $digest, time()+60*60*24*7,'/', 'test.example.com', false, true); 


//this assumes that the user is logged out and cookie is set
/****Verifying users through the cookie****/

$digest = $_COOKIE['reloginID'];
$digest = mysql_real_escape_string($digest); //filter any malicious content

//check database for digest
$result = mysql_query('SELECT username FROM users WHERE reloginDigest="'.$digest.'"');
//check if a digest was found
if(mysql_num_rows($result) == 1){
	$userdata  = mysql_fetch_object($result);
	$username = $userdata->username;

	//here you should set a new digest for the next relogin using the above code!

	echo 'You have successfully logged in, '.$username;

} else{
//digest didn't exist (or more of the same digests were found, but that's not going to happen)
echo "failed to login!";
}

?>
로그인 후 복사

通过像我们一样使用摘要,获得两个相同摘要的机会微乎其微。摘要是一个四十个字符串,理论上,如果输入发生更改,它应该始终提供完整的随机输出。实际上,您应该在服务器端代码中添加时间限制,以便摘要在 X 分钟后无效。这可以防止攻击者复制某人的 cookie 并使用它们登录。


第 5 步。最佳实践

本教程即将结束。作为结论,我想总结一些最佳实践:

  • 切勿将敏感数据插入 cookie。客户可能会在公共计算机上浏览,因此不要留下任何个人信息。
  • 永远不要相信来自 Cookie 的数据。始终过滤字符串和数字!攻击者可能会向 Cookie 写入恶意数据,以执行您不希望服务执行的操作。
  • 尝试估计 cookie 的有效期限,并相应地设置到期日期。您不想让客户的计算机被设置为一百年后过期的旧 cookie 占用。
  • 始终设置 secure 和 httponly 以满足您的应用程序需求。如果您的应用程序不使用 JavaScript 编辑 cookie,请启用 httponly。如果您始终有 HTTPS 连接,请启用安全。这提高了数据的完整性和机密性。

结论

我希望您从今天的 Nettuts+ 教程中学到了一些东西。如果您有任何疑问,请随时发表评论或在 Twitter 上打个招呼。

위 내용은 쿠키의 세계 탐험: 초보자 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿