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
3Một trong những trường hợp sử dụng phổ biến nhất là xác thực
- Khi đăng nhập, máy chủ sử dụng tiêu đề HTTP
2 trong phản hồi để đặt cookie có "số nhận dạng phiên" duy nhấtdocument.cookie = "user=John"; // update only cookie named 'user' alert[document.cookie]; // show all cookies
- 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
3document.cookie = "user=John"; // update only cookie named 'user' alert[document.cookie]; // show all cookies
- 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
6Có 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ệtThao 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ácChẳ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
8, saudocument.cookie = "user=John"; // update only cookie named 'user' alert[document.cookie]; // show all cookies
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àydocument.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 webmiền
51document.cookie = "user=John"; // update only cookie named 'user' alert[document.cookie]; // show all cookies
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
54document.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
6Vì 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
65document.cookie = "user=John"; // update only cookie named 'user' alert[document.cookie]; // show all cookies
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àydocument.cookie = "user=John"; // update only cookie named 'user'
alert[document.cookie]; // show all cookies
4Nế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
68document.cookie = "user=John"; // update only cookie named 'user' alert[document.cookie]; // show all cookies
Đó 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ạiNế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
8chắc chắn
40document.cookie = "user=John"; // update only cookie named 'user' alert[document.cookie]; // show all cookies
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ạiNghĩ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ợpdocument.cookie = "user=John"; // update only cookie named 'user'
alert[document.cookie]; // show all cookies
5cù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ảmBâ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ặcTrì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 đượcViệ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ể
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ị]document.cookie = "user=John"; // update only cookie named 'user' alert[document.cookie]; // show all cookies
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 trangNó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ửiNế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ánBả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
47Mặ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
11document.cookie = "user=John"; // update only cookie named 'user' alert[document.cookie]; // show all cookies
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 đúngPhươ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
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
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ợpdocument.cookie = "user=John"; // update only cookie named 'user' alert[document.cookie]; // show all cookies
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àyNhư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ờiCó một nhược điểm
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ơndocument.cookie = "user=John"; // update only cookie named 'user' alert[document.cookie]; // show all cookies
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ôngNhư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 xsrfhttpOnly
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
02Tù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ấuNhư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
6Có 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 đã chodocument.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
11Xin 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
0xó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
1Cậ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ụ
Một trang tại
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
18document.cookie = "user=John"; // update only cookie named 'user' alert[document.cookie]; // show all cookies
Cùng với biểu ngữ, máy chủ từ xa tại
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ềndocument.cookie = "user=John"; // update only cookie named 'user' alert[document.cookie]; // show all cookies
19 và sẽ chỉ hiển thị tạidocument.cookie = "user=John"; // update only cookie named 'user' alert[document.cookie]; // show all cookies
19document.cookie = "user=John"; // update only cookie named 'user' alert[document.cookie]; // show all cookies
Lần tới khi truy cập
19, máy chủ từ xa sẽ nhận cookiedocument.cookie = "user=John"; // update only cookie named 'user' alert[document.cookie]; // show all cookies
25 và nhận ra người dùngdocument.cookie = "user=John"; // update only cookie named 'user' alert[document.cookie]; // show all cookies
Điều thậm chí còn quan trọng hơn là khi người dùng di chuyển từ
53 sang một trang web khácdocument.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 webdocument.cookie = "user=John"; // update only cookie named 'user' alert[document.cookie]; // show all cookies
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ứ baNế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
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
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