Sơ lược về Web Cookies

28 tháng 5, 2021 By DEVERA ACADEMY

      Với tốc độ phát triển của công nghệ hiện nay, ứng dụng web đã trở thành một khái niệm quá đỗi quen thuộc. Một chút hiểu biết về Web Cookie chắc chắn là thứ cần thiết cho dù bạn là người tạo ra hay là sử dụng trang Web. Bởi Cookie về bản chất nó thực sự không mấy an toàn.

      Sơ lược về Web Cookie

      Web Cookie (còn được gọi là http cookie hoặc cookie trình duyệt) là một tệp văn bản chứa dữ liệu nhỏ được lưu trữ trong bộ nhớ của trình duyệt, cho phép nó ghi nhớ thông tin trạng thái khi người dùng điều hướng đến một trang web. Ví dụ: khi người dùng điều hướng đến các trang web khác, trình duyệt có thể nhận ra người dùng từ lần đăng nhập đầu tiên cho các hành động tiếp theo.
      Nhờ cơ chế lưu trữ thông tin về đăng nhập và các trường điền biểu mẫu cho người dùng, Web Cookie thể hiện được sự tiện lợi của mình đặc biệt trong các trang Web thương mại điện tử. Bởi với Web Cookie người dùng không cần phải nhập lại thông tin về bản thân mỗi lần vào Web mua hàng, Web cookie giúp cho không riêng gì các Web mua hàng duy trì một sự liền mạch, loại bỏ các thao tác thừa đem lại trải nghiệm mượt mà hơn cho người dùng.

      Có rất nhiều loại Cookie, trong đó có 3 loại cookie chính là session cookie, pesistent cookie và third-party cookie:

      Session cookie (cookie phiên) chỉ tồn tại khi người dùng mở trình duyệt và đăng nhập, thường được xóa sau khi tắt trình duyệt. 
      Persistent Cookie (cookie duy trì) sẽ tồn tại trong một khoảng thời gian nhất định hoặc đến một ngày nào đó xác định.

      Third-Party Cookie (cookie bên thứ ba) dùng để theo vết người dùng trên nhiều miền và trang web. Cookie này thường được sử dụng cho những trang web quảng cáo.

      Cách triển khai Cookie

      Tạo Cookie ở Server-Side 

      Khi tạo cookie, server sẽ gửi header Set-Cookie cùng với các phản hồi tới Client. Header này nhằm thông báo đến trình duyệt về việc tạo và lưu trữ Cookie, các HTTP request sau này đều được tự động thêm Cookie header.

      Ví dụ cú pháp của cookie:

      Set-Cookie: key=value;

      Trong Node.js:

      response.setHeader('Set-Cookie', 'key=value');

      Trong đó value là một chuỗi hay một mảng giá trị được liên kết với cùng một Cookie:

      response.setHeader('Set-Cookie',['id=1','name=Diogenis']); 

      Để xóa một Cookie bạn có thể làm theo các cách sau:

      • Đặt giá trị Expries là một ngày trong quá khứ

      • Đặt Max-Age = 0

      • Sử dụng phương thức clearCookie() của ExpressJS

      Cài đặt Cookie ở phía Client-Side

      Cookie có thể tạo bằng một Object của JavaScript là Document.Cookie.

      Tạo cookie phía client cũng tương tự như ví dụ với NodeJS ở trên, bạn có thể truyền giá trị và các thuộc tính áp dụng dưới dạng chuỗi:  document.cookie = “name=Diogenis”;

      Để truy cập cookie, bạn có thể đọc trực tiếp từ đối tượng:

      • Input: console.log(document.cookie);

      • Output:  “name=Diogenis”

      Để xóa cookie, hãy ghi đè giá trị trống lên và đặt Expires trong quá khứ:  document.cookie = “name=; expires=Mon, 20 Dec 1920 00:00:00 UTC;”;

      Cookie Flags

      Cookie Flag (cờ) bổ sung vào Cookie giúp tăng tính cụ thể cho dữ liệu.

      Expires và Max-Age

      Để xây dựng persistent Cookie bạn cần phải đặt ngày hết hạn, điều này có thể thực hiện thông qua hai cách:

      • Với một ngày cụ thể trong Expires: 
        Set-Cookie: id=2; Expires=Monday, 20 Jan 2021 00:00:00 GMT;
      • Với một khoảng thời gian cụ thể trong Max-Age: 
        Set-Cookie: id=2; Max-Age=58162000;

      Domain và Path

      Các cờ Domain (miền) và Path (đường dẫn) xác định phạm vi các miền có thể truy cập của cookie.

      • Domain chỉ định các server được phép truy cập, bao gồm cả các miền phụ. Nếu không có cờ này, mặc định chỉ cho phép server lưu trữ dữ liệu của trang web hiện tại chứa Cookie, không bao gồm các tên miền phụ.

      • Path chỉ định một đường dẫn URL (bao gồm trong URL được yêu cầu) để cho phép gửi cookie cùng với HTTP Request. Khi đặt cờ, sử dụng dấu gạch chéo (/) để bao gồm cả các thư mục con.

      Path=/page

      cho phép truy cập trên    Path=/page/1 và Path=/page/1/custom

      Secure và HttpOnly

      Trong các Request đã được mã hóa được gửi qua giao thức HTTPs tới máy chủ, Cookie có thể bao gồm cờ Secure (bảo mật). Bản thân cookie vốn không an toàn nên các thông tin nhạy cảm sẽ không bao giờ được phép lưu trữ trong cookie. Thế nên, một số trình duyệt (Chrome, Firefox, ...) ngăn các trang web không an toàn đặt cookie bằng cờ bảo mật này.

      Đối với các Cookie được dùng với mục đích duy trì thông tin theo phiên phía máy chủ, thì nên sử dụng 
      cờ HttpOnly để ngăn Cookie truy cập các đối tượng Document trong JavaScript. 

      Set-Cookie: id=1; Secure; HttpOnly;

      SameSite

      Vì lý do bảo mật và ngăn cookie nhận được các Request trên nhiều trang web nên đặt cờ SameSite. SameSitee tuân theo các thuộc tính sau: None, Lax hoặc Strict.

      • None cho phép gửi cookie trên cùng một trang hoặc trên nhiều trang. 

      • Lax sẽ cho phép gửi cookie khi khách hàng điều hướng đến miền từ một trang web bên ngoài. 

      • Strict chỉ cho phép trình duyệt gửi cookie cho các request trên cùng một trang web.

      Trong các trường hợp còn lại, cookie được giữ lại trên các yêu cầu phụ trên nhiều trang web. Lax là giá trị được trình duyệt sử dụng mặc định.

      Tác giả Diogenis Panagiotis

      Dịch bởi Devera Academy