Tôi có thể thay đổi giá trị cookie bằng JavaScript không?

Nếu chúng ta muốn tạo, cập nhật (thay đổi) hoặc xóa cookie trong JavaScript, chúng ta phải thực hiện một số thao tác rất đơn giản như tôi mô tả bên dưới. Đây là tình huống khá phổ biến trong quá trình phát triển JavaScript hàng ngày khi chúng ta muốn thực hiện một số thao tác dựa trên cookie. Cookies được sử dụng để lưu trữ các mẩu thông tin dạng văn bản nhỏ và có thời hạn sử dụng. Sau ngày hôm đó, cookie sẽ bị xóa khỏi bộ nhớ của trình duyệt. Điều này rất tốt để lưu trữ trong cookie và sử dụng các thao tác tạo, thay đổi, xóa và xóa, trong e. g. biểu mẫu, giỏ mua hàng, v.v.

Mục lục

• Bước 1 – Chuẩn bị ngày hết hạn cho cookie
• Bước 2 – Tạo cookie
• Bước 3 – Cập nhật ngày hết hạn cookie
• Bước 4 – xóa cookie

Bước 1 – Chuẩn bị ngày hết hạn cho cookie

Tôi thường sử dụng chức năng dưới đây để xác định ngày hết hạn của cookie. Hàm lấy thời gian tính bằng phút làm đối số, thêm nó vào thời gian hiện tại và trả về ngày và giờ hết hạn (thời gian hiện tại + phút tính từ đối số)

function setTimeForCookies (minutes) {
	var now = new Date();
	var time = now.getTime();

	time += minutes * 60 * 1000;
	now.setTime(time);
	return now;
}

Bước 2 – Tạo cookie

Tôi tạo một cookie theo cách rất phổ biến, như được trình bày bên dưới. Để đặt tham số “hết hạn”, tôi sử dụng chức năng trên

document.cookie = "cookieName=This is a cookie value; expires=" + setTimeForCookies(60) + "; path=/";

Bước 3 – Cập nhật ngày hết hạn cookie

Như mình đã đề cập ở đầu bài, để cập nhật ngày hết hạn chúng ta cũng làm tương tự như bước 2, với ngày mới. Vì vậy, nói chung, nó không cập nhật cookie mà viết lại nó. Theo cách tương tự, chúng tôi có thể cập nhật/viết lại giá trị cookie

document.cookie = "cookieName=This is a NEW cookie value; expires=" + setTimeForCookies(120) + "; path=/";

Bước 4 – xóa cookie

Để xóa cookie, chúng tôi phải cập nhật ngày hết hạn, nhưng chúng tôi phải đặt ngày ở đâu đó trong QUÁ KHỨ. Sau đó, cookie tự động hết hạn và sẽ bị trình duyệt xóa. Cách tốt nhất là đặt ngày. 1 tháng 1 năm 1970 – tất nhiên là đúng định dạng. “Thu, 01 Jan 1970 00. 00. 01 GMT” (thời gian unix)

Cookies là các chuỗi dữ liệu nhỏ được lưu trữ trực tiếp trong trình duyệt. Chúng là một phần của giao thức HTTP, được xác định bởi đặc tả RFC 6265

Cookie thường được đặt bởi máy chủ web bằng cách sử dụng tiêu đề HTTP

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

2 phản hồi. Sau đó, trình duyệt sẽ tự động thêm chúng vào (hầu hết) mọi yêu cầu tới cùng một miền bằng cách sử dụng tiêu đề HTTP

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

3

Một trong những trường hợp sử dụng phổ biến nhất là xác thực

1. Khi đăng nhập, máy chủ sử dụng tiêu đề HTTP

   document.cookie = "user=John"; // update only cookie named 'user'
   alert(document.cookie); // show all cookies

   2 trong phản hồi để đặt cookie có "số nhận dạng phiên" duy nhất
2. Lần tới khi yêu cầu được gửi đến cùng một miền, trình duyệt sẽ gửi cookie qua mạng bằng cách sử dụng tiêu đề HTTP

   document.cookie = "user=John"; // update only cookie named 'user'
   alert(document.cookie); // show all cookies

   3
3. Vì vậy, máy chủ biết ai đã thực hiện yêu cầu

Chúng tôi cũng có thể truy cập cookie từ trình duyệt, sử dụng thuộc tính

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

6

Có nhiều điều phức tạp về cookie và các tùy chọn của chúng. Trong chương này, chúng tôi sẽ đề cập chi tiết

Đọc từ tài liệu. bánh quy

Trình duyệt của bạn có lưu trữ bất kỳ cookie nào từ trang web này không?

________số 8

Giá trị của

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

6 bao gồm các cặp

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

8, được phân định bởi

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

9. Mỗi cái là một cookie riêng biệt

Để tìm một cookie cụ thể, chúng tôi có thể tách

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

6 cho

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

9, sau đó tìm đúng tên. Chúng ta có thể sử dụng biểu thức chính quy hoặc hàm mảng để làm điều đó

Chúng tôi để nó như một bài tập cho người đọc. Ngoài ra, ở cuối chương, bạn sẽ tìm thấy các hàm trợ giúp để thao tác với cookie

Ghi vào tài liệu. bánh quy

Chúng ta có thể viết thư cho

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

6. Nhưng nó không phải là một thuộc tính dữ liệu, nó là một bộ truy cập (getter/setter). Một nhiệm vụ cho nó được đối xử đặc biệt

Thao tác ghi vào

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

6 chỉ cập nhật các cookie được đề cập trong đó, nhưng không chạm vào các cookie khác

Chẳng hạn, cuộc gọi này đặt cookie có tên

document.cookie = "cookieName=This is a cookie value; expires=" + setTimeForCookies(60) + "; path=/";

64 và giá trị

document.cookie = "cookieName=This is a cookie value; expires=" + setTimeForCookies(60) + "; path=/";

65

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

Nếu bạn chạy nó, thì có thể bạn sẽ thấy nhiều cookie. Đó là bởi vì hoạt động của

document.cookie = "cookieName=This is a cookie value; expires=" + setTimeForCookies(60) + "; path=/";

66 không ghi đè lên tất cả các cookie. Nó chỉ đặt cookie đã đề cập

document.cookie = "cookieName=This is a cookie value; expires=" + setTimeForCookies(60) + "; path=/";

64

Về mặt kỹ thuật, tên và giá trị có thể có bất kỳ ký tự nào. Để giữ định dạng hợp lệ, chúng phải được thoát bằng hàm

document.cookie = "cookieName=This is a cookie value; expires=" + setTimeForCookies(60) + "; path=/";

68 tích hợp

document.cookie = "cookieName=This is a cookie value; expires=" + setTimeForCookies(60) + "; path=/";

6

Hạn chế

Có một số hạn chế

• Cặp

  document.cookie = "user=John"; // update only cookie named 'user'
  alert(document.cookie); // show all cookies

  8, sau

  document.cookie = "cookieName=This is a cookie value; expires=" + setTimeForCookies(60) + "; path=/";

  68, không được vượt quá 4KB. Vì vậy, chúng tôi không thể lưu trữ bất kỳ thứ gì lớn trong cookie
• Tổng số cookie trên mỗi miền được giới hạn trong khoảng hơn 20, giới hạn chính xác tùy thuộc vào trình duyệt

Cookie có một số tùy chọn, nhiều tùy chọn trong số đó rất quan trọng và nên được đặt

Các tùy chọn được liệt kê sau

document.cookie = "cookieName=This is a NEW cookie value; expires=" + setTimeForCookies(120) + "; path=/";

51, được phân cách bởi

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

9, như thế này

document.cookie = "cookieName=This is a NEW cookie value; expires=" + setTimeForCookies(120) + "; path=/";

5

con đường

• document.cookie = "cookieName=This is a NEW cookie value; expires=" + setTimeForCookies(120) + "; path=/";

  53

Tiền tố đường dẫn url phải là tuyệt đối. Nó làm cho cookie có thể truy cập được đối với các trang trong đường dẫn đó. Theo mặc định, đó là đường dẫn hiện tại

Nếu một cookie được đặt bằng

document.cookie = "cookieName=This is a NEW cookie value; expires=" + setTimeForCookies(120) + "; path=/";

54, nó sẽ hiển thị ở các trang

document.cookie = "cookieName=This is a NEW cookie value; expires=" + setTimeForCookies(120) + "; path=/";

55 và

document.cookie = "cookieName=This is a NEW cookie value; expires=" + setTimeForCookies(120) + "; path=/";

56, nhưng không hiển thị ở

document.cookie = "cookieName=This is a NEW cookie value; expires=" + setTimeForCookies(120) + "; path=/";

57 hoặc

document.cookie = "cookieName=This is a NEW cookie value; expires=" + setTimeForCookies(120) + "; path=/";

58

Thông thường, chúng ta nên đặt

document.cookie = "cookieName=This is a NEW cookie value; expires=" + setTimeForCookies(120) + "; path=/";

59 vào thư mục gốc.

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

50 để làm cho cookie có thể truy cập được từ tất cả các trang của trang web

miền

• document.cookie = "user=John"; // update only cookie named 'user'
  alert(document.cookie); // show all cookies

  51

Miền xác định nơi có thể truy cập cookie. Tuy nhiên, trong thực tế vẫn còn những hạn chế. Chúng tôi không thể đặt bất kỳ tên miền nào

Không có cách nào để cookie có thể truy cập được từ một tên miền cấp 2 khác, vì vậy,

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

52 sẽ không bao giờ nhận được cookie được đặt tại

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

53

Đó là một hạn chế về an toàn, để cho phép chúng tôi lưu trữ dữ liệu nhạy cảm trong cookie chỉ khả dụng trên một trang web

Theo mặc định, cookie chỉ có thể truy cập được tại miền đã đặt cookie

Xin lưu ý, theo mặc định, cookie cũng không được chia sẻ với tên miền phụ, chẳng hạn như

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

54

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

5

…Nhưng điều này có thể thay đổi. Nếu chúng tôi muốn cho phép các tên miền phụ như

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

54 nhận cookie được đặt tại

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

53, điều đó là có thể

Để điều đó xảy ra, khi đặt cookie ở

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

53, chúng ta nên đặt rõ ràng tùy chọn

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

58 cho tên miền gốc.

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

51. Sau đó, tất cả các tên miền phụ sẽ thấy cookie đó

Ví dụ

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

6

Vì lý do lịch sử,

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

60 (có dấu chấm trước

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

53) cũng hoạt động theo cách tương tự, cho phép truy cập cookie từ tên miền phụ. Đó là một ký hiệu cũ và nên được sử dụng nếu chúng tôi cần hỗ trợ các trình duyệt rất cũ

Tóm lại, tùy chọn

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

58 cho phép tạo cookie có thể truy cập được tại các tên miền phụ

hết hạn, tuổi tối đa

Theo mặc định, nếu cookie không có một trong các tùy chọn này, nó sẽ biến mất khi đóng trình duyệt. Những cookie như vậy được gọi là "cookie theo phiên"

Để cookie tồn tại khi đóng trình duyệt, chúng tôi có thể đặt tùy chọn

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

63 hoặc

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

64

• document.cookie = "user=John"; // update only cookie named 'user'
  alert(document.cookie); // show all cookies

  65

Ngày hết hạn cookie xác định thời gian, khi trình duyệt sẽ tự động xóa nó

Ngày phải chính xác ở định dạng này, theo múi giờ GMT. Chúng ta có thể sử dụng

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

66 để lấy nó. Chẳng hạn, chúng tôi có thể đặt cookie hết hạn sau 1 ngày

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

4

Nếu chúng tôi đặt

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

63 thành một ngày trong quá khứ, cookie sẽ bị xóa

• document.cookie = "user=John"; // update only cookie named 'user'
  alert(document.cookie); // show all cookies

  68

Đó là một giải pháp thay thế cho

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

63 và chỉ định thời hạn hết hạn của cookie tính bằng giây kể từ thời điểm hiện tại

Nếu được đặt thành 0 hoặc giá trị âm, cookie sẽ bị xóa

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

8

chắc chắn

• document.cookie = "user=John"; // update only cookie named 'user'
  alert(document.cookie); // show all cookies

  40

Cookie chỉ nên được chuyển qua HTTPS

Theo mặc định, nếu chúng tôi đặt cookie ở

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

41, thì nó cũng xuất hiện ở

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

42 và ngược lại

Nghĩa là, cookie dựa trên tên miền, chúng không phân biệt giữa các giao thức

Với tùy chọn này, nếu một cookie được đặt bởi

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

42, thì nó sẽ không xuất hiện khi cùng một trang được truy cập bằng HTTP, như

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

41. Vì vậy, nếu một cookie có nội dung nhạy cảm không bao giờ được gửi qua HTTP không được mã hóa, thì cờ

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

40 là điều phù hợp

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

5

cùng địa điểm

Đó là một thuộc tính bảo mật khác

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

46. Nó được thiết kế để bảo vệ khỏi cái gọi là tấn công XSRF (giả mạo yêu cầu giữa các trang web)

Để hiểu cách nó hoạt động và khi nó hữu ích, hãy xem các cuộc tấn công XSRF

tấn công XSRF

Hãy tưởng tượng, bạn đã đăng nhập vào trang web

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

47. Đó là. bạn có cookie xác thực từ trang web đó. Trình duyệt của bạn sẽ gửi nó tới

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

47 với mọi yêu cầu, để nó nhận ra bạn và thực hiện tất cả các hoạt động tài chính nhạy cảm

Bây giờ, trong khi duyệt web trong một cửa sổ khác, bạn vô tình đến một trang web khác

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

49. Trang web đó có mã JavaScript gửi biểu mẫu

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

80 đến

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

47 với các trường bắt đầu giao dịch tới tài khoản của tin tặc

Trình duyệt gửi cookie mỗi khi bạn truy cập trang web

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

47, ngay cả khi biểu mẫu được gửi từ

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

49. Vì vậy, ngân hàng nhận ra bạn và thực sự thực hiện thanh toán

Đó là cái gọi là cuộc tấn công “Cross-Site Request Forgery” (viết tắt là XSRF)

Các ngân hàng thực sự được bảo vệ khỏi nó tất nhiên. Tất cả các biểu mẫu được tạo bởi

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

47 đều có một trường đặc biệt, được gọi là “mã thông báo bảo vệ XSRF”, mà một trang xấu không thể tạo hoặc trích xuất từ ​​một trang từ xa. Nó có thể gửi một biểu mẫu ở đó, nhưng không thể lấy lại dữ liệu. Trang web

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

47 kiểm tra mã thông báo đó ở mọi dạng mà nó nhận được

Việc bảo vệ như vậy cần có thời gian để thực hiện mặc dù. Chúng tôi cần đảm bảo rằng mọi biểu mẫu đều có trường mã thông báo bắt buộc và chúng tôi cũng phải kiểm tra tất cả các yêu cầu

Nhập tùy chọn cùng trang web cookie

Tùy chọn cookie

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

46 cung cấp một cách khác để bảo vệ khỏi các cuộc tấn công như vậy, mà (về lý thuyết) không yêu cầu “mã thông báo bảo vệ xsrf”

Nó có hai giá trị có thể

• document.cookie = "user=John"; // update only cookie named 'user'
  alert(document.cookie); // show all cookies

  87 (giống như

  document.cookie = "user=John"; // update only cookie named 'user'
  alert(document.cookie); // show all cookies

  46 không có giá trị)

Cookie có

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

87 không bao giờ được gửi nếu người dùng đến từ bên ngoài cùng một trang

Nói cách khác, cho dù người dùng nhấp vào liên kết từ thư của họ hoặc gửi biểu mẫu từ

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

49 hoặc thực hiện bất kỳ thao tác nào bắt nguồn từ một miền khác, cookie sẽ không được gửi

Nếu cookie xác thực có tùy chọn

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

46, thì cuộc tấn công XSRF không có cơ hội thành công, vì gửi từ

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

49 không có cookie. Vì vậy,

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

47 sẽ không nhận ra người dùng và sẽ không tiến hành thanh toán

Bảo vệ khá đáng tin cậy. Chỉ các hoạt động đến từ

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

47 mới gửi cookie

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

46, e. g. gửi biểu mẫu từ một trang khác tại

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

47

Mặc dù, có một sự bất tiện nhỏ

Khi người dùng theo một liên kết hợp pháp đến

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

47, chẳng hạn như từ ghi chú của chính họ, họ sẽ ngạc nhiên rằng

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

47 không nhận ra họ. Thật vậy, cookie

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

87 không được gửi trong trường hợp đó

Chúng tôi có thể giải quyết vấn đề đó bằng cách sử dụng hai cookie. một cho "sự công nhận chung", chỉ với mục đích nói. “Xin chào, John” và một cái khác cho các hoạt động thay đổi dữ liệu với

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

87. Sau đó, một người đến từ bên ngoài trang web sẽ thấy chào mừng, nhưng các khoản thanh toán phải được thực hiện từ trang web của ngân hàng để gửi cookie thứ hai

• document.cookie = "user=John"; // update only cookie named 'user'
  alert(document.cookie); // show all cookies

  11

Một cách tiếp cận thoải mái hơn cũng bảo vệ khỏi XSRF và không phá vỡ trải nghiệm người dùng

Chế độ lỏng lẻo, giống như

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

12, cấm trình duyệt gửi cookie khi đến từ bên ngoài trang web, nhưng thêm một ngoại lệ

Cookie

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

11 được gửi nếu cả hai điều kiện này đều đúng

1. Phương thức HTTP là “an toàn” (e. g. NHẬN, nhưng không ĐĂNG)

   Danh sách đầy đủ các phương thức HTTP an toàn nằm trong đặc tả RFC7231. Về cơ bản, đây là những phương thức nên được sử dụng để đọc, nhưng không ghi dữ liệu. Họ không được thực hiện bất kỳ thao tác thay đổi dữ liệu nào. Theo một liên kết luôn là GET, phương pháp an toàn

2. Hoạt động thực hiện điều hướng cấp cao nhất (thay đổi URL trong thanh địa chỉ của trình duyệt)

   Điều đó thường đúng, nhưng nếu điều hướng được thực hiện trong

   document.cookie = "user=John"; // update only cookie named 'user'
   alert(document.cookie); // show all cookies

   14, thì đó không phải là cấp cao nhất. Ngoài ra, các phương thức JavaScript cho các yêu cầu mạng không thực hiện bất kỳ điều hướng nào, do đó chúng không phù hợp

Vì vậy, những gì

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

11 làm, về cơ bản là cho phép thao tác “đi tới URL” phổ biến nhất có cookie. e. g. mở một liên kết trang web từ các ghi chú đáp ứng các điều kiện này

Nhưng bất cứ điều gì phức tạp hơn, chẳng hạn như yêu cầu mạng từ một trang web khác hoặc gửi biểu mẫu, sẽ mất cookie

Nếu điều đó phù hợp với bạn, thì việc thêm

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

11 có thể sẽ không ảnh hưởng đến trải nghiệm người dùng và thêm khả năng bảo vệ

Nhìn chung,

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

46 là một lựa chọn tuyệt vời

Có một nhược điểm

• document.cookie = "user=John"; // update only cookie named 'user'
  alert(document.cookie); // show all cookies

  46 bị bỏ qua (không được hỗ trợ) bởi các trình duyệt rất cũ, năm 2017 hoặc lâu hơn

Vì vậy, nếu chúng tôi chỉ dựa vào

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

46 để cung cấp sự bảo vệ, thì các trình duyệt cũ sẽ dễ bị tấn công

Nhưng chúng tôi chắc chắn có thể sử dụng

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

46 cùng với các biện pháp bảo vệ khác, chẳng hạn như mã thông báo xsrf, để thêm một lớp bảo vệ bổ sung và sau đó, trong tương lai, khi các trình duyệt cũ ngừng hoạt động, chúng tôi có thể sẽ loại bỏ mã thông báo xsrf

httpOnly

Tùy chọn này không liên quan gì đến JavaScript, nhưng chúng tôi phải đề cập đến nó cho đầy đủ

Máy chủ web sử dụng tiêu đề

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

2 để đặt cookie. Ngoài ra, nó có thể đặt tùy chọn

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

02

Tùy chọn này cấm mọi quyền truy cập JavaScript vào cookie. Chúng tôi không thể nhìn thấy một cookie như vậy hoặc thao tác với nó bằng cách sử dụng

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

6

Điều đó được sử dụng như một biện pháp phòng ngừa, để bảo vệ khỏi một số cuộc tấn công nhất định khi tin tặc đưa mã JavaScript của chính anh ta vào một trang và đợi người dùng truy cập trang đó. Điều đó hoàn toàn không thể xảy ra, tin tặc sẽ không thể đưa mã của họ vào trang web của chúng tôi, nhưng có thể có lỗi cho phép họ làm điều đó

Thông thường, nếu điều đó xảy ra và người dùng truy cập trang web bằng mã JavaScript của hacker, thì mã đó sẽ thực thi và giành quyền truy cập vào

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

6 bằng cookie người dùng chứa thông tin xác thực. Điều đó thật xấu

Nhưng nếu một cookie là

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

02, thì

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

6 không nhìn thấy nó, vì vậy nó được bảo vệ

ruột thừa. chức năng cookie

Đây là một tập hợp nhỏ các chức năng để hoạt động với cookie, thuận tiện hơn so với sửa đổi thủ công của

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

6

Có nhiều thư viện cookie cho điều đó, vì vậy những thư viện này là dành cho mục đích demo. Hoàn toàn làm việc mặc dù

getCookie(tên)

Cách ngắn nhất để truy cập cookie là sử dụng biểu thức chính quy

Hàm

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

08 trả về cookie với

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

09 đã cho

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

1

Ở đây

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

10 được tạo động, để khớp với

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

11

Xin lưu ý rằng giá trị cookie được mã hóa, vì vậy,

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

12 sử dụng hàm

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

13 tích hợp để giải mã

setCookie(tên, giá trị, tùy chọn)

Đặt

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

09 của cookie thành

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

15 đã cho với

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

50 theo mặc định (có thể được sửa đổi để thêm các giá trị mặc định khác)

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

0

xóaCookie(tên)

Để xóa cookie, chúng ta có thể gọi nó với ngày hết hạn âm

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

1

Cập nhật hoặc xóa phải sử dụng cùng một đường dẫn và tên miền

Xin lưu ý. khi chúng tôi cập nhật hoặc xóa cookie, chúng tôi nên sử dụng chính xác các tùy chọn tên miền và đường dẫn giống như khi chúng tôi đặt nó

Cùng với nhau. bánh quy. js

ruột thừa. Cookie của bên thứ ba

Cookie được gọi là "bên thứ ba" nếu nó được đặt bởi một tên miền khác với trang mà người dùng đang truy cập

Ví dụ

1. Một trang tại

   document.cookie = "user=John"; // update only cookie named 'user'
   alert(document.cookie); // show all cookies

   53 tải một biểu ngữ từ một trang web khác.

   document.cookie = "user=John"; // update only cookie named 'user'
   alert(document.cookie); // show all cookies

   18

2. Cùng với biểu ngữ, máy chủ từ xa tại

   document.cookie = "user=John"; // update only cookie named 'user'
   alert(document.cookie); // show all cookies

   19 có thể đặt tiêu đề

   document.cookie = "user=John"; // update only cookie named 'user'
   alert(document.cookie); // show all cookies

   2 bằng cookie như

   document.cookie = "user=John"; // update only cookie named 'user'
   alert(document.cookie); // show all cookies

   21. Một cookie như vậy bắt nguồn từ miền

   document.cookie = "user=John"; // update only cookie named 'user'
   alert(document.cookie); // show all cookies

   19 và sẽ chỉ hiển thị tại

   document.cookie = "user=John"; // update only cookie named 'user'
   alert(document.cookie); // show all cookies

   19
   

3. Lần tới khi truy cập

   document.cookie = "user=John"; // update only cookie named 'user'
   alert(document.cookie); // show all cookies

   19, máy chủ từ xa sẽ nhận cookie

   document.cookie = "user=John"; // update only cookie named 'user'
   alert(document.cookie); // show all cookies

   25 và nhận ra người dùng
   

4. Điều thậm chí còn quan trọng hơn là khi người dùng di chuyển từ

   document.cookie = "user=John"; // update only cookie named 'user'
   alert(document.cookie); // show all cookies

   53 sang một trang web khác

   document.cookie = "user=John"; // update only cookie named 'user'
   alert(document.cookie); // show all cookies

   52, cũng có biểu ngữ, thì

   document.cookie = "user=John"; // update only cookie named 'user'
   alert(document.cookie); // show all cookies

   19 sẽ nhận được cookie, vì nó thuộc về

   document.cookie = "user=John"; // update only cookie named 'user'
   alert(document.cookie); // show all cookies

   19, do đó nhận ra khách truy cập và theo dõi anh ta khi anh ta di chuyển giữa các trang web
   

Cookie của bên thứ ba thường được sử dụng cho các dịch vụ theo dõi và quảng cáo, do bản chất của chúng. Chúng bị ràng buộc với miền ban đầu, vì vậy,

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

19 có thể theo dõi cùng một người dùng giữa các trang web khác nhau, nếu tất cả họ đều truy cập vào nó

Đương nhiên, một số người không thích bị theo dõi, vì vậy các trình duyệt cho phép tắt các cookie đó

Ngoài ra, một số trình duyệt hiện đại sử dụng các chính sách đặc biệt cho các cookie đó

• Safari hoàn toàn không cho phép cookie của bên thứ ba
• Firefox đi kèm với một "danh sách đen" các tên miền của bên thứ ba nơi nó chặn cookie của bên thứ ba

Xin lưu ý

Nếu chúng tôi tải một tập lệnh từ miền của bên thứ ba, chẳng hạn như

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

31 và tập lệnh đó sử dụng

document.cookie = "user=John"; // update only cookie named 'user'
alert(document.cookie); // show all cookies

6 để đặt cookie, thì cookie đó không phải là của bên thứ ba

Nếu tập lệnh đặt cookie, thì bất kể tập lệnh đến từ đâu – cookie thuộc về miền của trang web hiện tại

ruột thừa. GDPR

Chủ đề này hoàn toàn không liên quan đến JavaScript, chỉ là một điều cần lưu ý khi đặt cookie

Có một luật ở Châu Âu gọi là GDPR, thực thi một bộ quy tắc để các trang web tôn trọng quyền riêng tư của người dùng. Một trong những quy tắc này là yêu cầu quyền rõ ràng để theo dõi cookie từ người dùng

Xin lưu ý, đó chỉ là về theo dõi/xác định/ủy quyền cookie

Vì vậy, nếu chúng tôi đặt cookie chỉ lưu một số thông tin, nhưng không theo dõi cũng như không xác định người dùng, thì chúng tôi có thể tự do thực hiện

Nhưng nếu chúng tôi định đặt cookie có phiên xác thực hoặc id theo dõi, thì người dùng phải cho phép điều đó

Các trang web thường có hai biến thể tuân theo GDPR. Chắc hẳn bạn đã thấy cả hai trên web rồi

1. Nếu một trang web chỉ muốn đặt cookie theo dõi cho người dùng được xác thực

   Để làm như vậy, biểu mẫu đăng ký phải có hộp kiểm như “chấp nhận chính sách quyền riêng tư” (mô tả cách sử dụng cookie), người dùng phải chọn hộp kiểm đó và sau đó trang web được tự do đặt cookie xác thực

2. Nếu một trang web muốn đặt cookie theo dõi cho mọi người

   Để làm như vậy một cách hợp pháp, một trang web hiển thị “màn hình giật gân” theo phương thức cho người mới và yêu cầu họ đồng ý với cookie. Sau đó, trang web có thể đặt chúng và cho phép mọi người xem nội dung. Điều đó có thể gây khó chịu cho khách truy cập mới mặc dù. Không ai thích xem những màn hình giật gân kiểu “phải bấm” thay vì nội dung. Nhưng GDPR yêu cầu một thỏa thuận rõ ràng

GDPR không chỉ về cookie mà còn về các vấn đề khác liên quan đến quyền riêng tư, nhưng điều đó vượt quá phạm vi của chúng tôi

Làm cách nào để cập nhật giá trị cookie trong js?

Tôi có thể thay đổi giá trị của cookie không?

Chúng tôi có thể thao tác với cookie bằng JavaScript không?

Làm cách nào để nhận giá trị cookie cụ thể trong JavaScript?