<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Thanh Dương Phan</title>
    <description>The latest articles on DEV Community by Thanh Dương Phan (@duongphan).</description>
    <link>https://dev.to/duongphan</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1504352%2Fe063e59b-b210-46f2-9602-e93874c68048.jpg</url>
      <title>DEV Community: Thanh Dương Phan</title>
      <link>https://dev.to/duongphan</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/duongphan"/>
    <language>en</language>
    <item>
      <title>Sử dụng MongoDB hiệu quả trong Nodejs</title>
      <dc:creator>Thanh Dương Phan</dc:creator>
      <pubDate>Mon, 10 Jun 2024 01:35:46 +0000</pubDate>
      <link>https://dev.to/duongphan/su-dung-mongodb-hieu-qua-trong-nodejs-2kh9</link>
      <guid>https://dev.to/duongphan/su-dung-mongodb-hieu-qua-trong-nodejs-2kh9</guid>
      <description>&lt;p&gt;&lt;strong&gt;MongoDB&lt;/strong&gt; là một database hướng tài liệu (document), một dạng NoSQL database. Vì thế, MongoDB sẽ tránh cấu trúc table-based của relational database để thích ứng với các tài liệu như JSON có một schema rất linh hoạt gọi là BSON. MongoDB sử dụng lưu trữ dữ liệu dưới dạng Document JSON nên mỗi một collection sẽ các các kích cỡ và các document khác nhau. Các dữ liệu được lưu trữ trong document kiểu JSON nên truy vấn sẽ rất nhanh. &lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--BUBKDa-1--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://imgproxy4.tinhte.vn/_AFLmh6SdsDeF-741pmNQuTJdYFuorh2QEJWWExrgj8/w:600/plain/https://wiki.tino.org/wp-content/uploads/2021/05/word-image-954.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--BUBKDa-1--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://imgproxy4.tinhte.vn/_AFLmh6SdsDeF-741pmNQuTJdYFuorh2QEJWWExrgj8/w:600/plain/https://wiki.tino.org/wp-content/uploads/2021/05/word-image-954.png" alt="MongoDB" width="600" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  1. Khi nào nên dùng MongoDB?
&lt;/h2&gt;

&lt;p&gt;Ví dụ như các hệ thống realtime (thời gian thực) yêu cầu phản hồi nhanh, Các hệ thống bigdata với yêu cầu truy vấn nhanh hay các hệ thống có lượng request lớn thì MongoDB sẽ là sự lựa chọn ưu tiên hơn CSDL quan hệ. Tùy theo dự án và trường hợp cụ thể để sử dụng CSDL quan hệ hay sử dụng MongoDB đem lại hiệu quả cao.&lt;/p&gt;

&lt;h2&gt;
  
  
  2. Ưu điểm của MongoDB
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Dữ liệu lưu trữ phi cấu trúc, không có tính ràng buộc, toàn vẹn nên tính sẵn sàng cao, hiệu suất lớn và dễ dàng mở rộng lưu trữ.&lt;/li&gt;
&lt;li&gt;Dữ liệu được caching (ghi đệm) lên RAM, hạn chế truy cập vào ổ cứng nên tốc độ đọc và ghi cao.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  3. Nhược điểm của MongoDB
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Không ứng dụng được cho các mô hình giao dịch nào có yêu cầu độ chính xác cao do không có ràng buộc.&lt;/li&gt;
&lt;li&gt;Không có cơ chế transaction (giao dịch) để phục vụ các ứng dụng ngân hàng.&lt;/li&gt;
&lt;li&gt;Dữ liệu lấy RAM làm trọng tâm hoạt động vì vậy khi hoạt động yêu cầu một bộ nhớ RAM lớn.&lt;/li&gt;
&lt;li&gt;Mọi thay đổi về dữ liệu mặc định đều chưa được ghi xuống ổ cứng ngay lập tức vì vậy khả năng bị mất dữ liệu từ nguyên nhân mất điện đột xuất là rất cao.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Xem chi tiết “Cách Kết Nối MongoDB Trong Nodejs” tại:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://devful-blog.vercel.app/blogs/cach-ket-noi-mongodb-trong-nodejs"&gt;Cách Kết Nối MongoDB Trong Nodejs&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Website mà mọi người có thể xem thêm nhiều bài viết blog hay về công nghệ thông tin&lt;/strong&gt; &lt;a href="https://devful-blog.vercel.app/"&gt;Devful Blog&lt;/a&gt; (sẽ vô cùng hữu ích cho mọi người đấy nhé)&lt;/p&gt;

</description>
      <category>mongodb</category>
      <category>webdev</category>
      <category>javascript</category>
      <category>node</category>
    </item>
    <item>
      <title>Các Thư Viện React.js Nên Sử Dụng</title>
      <dc:creator>Thanh Dương Phan</dc:creator>
      <pubDate>Mon, 10 Jun 2024 01:19:12 +0000</pubDate>
      <link>https://dev.to/duongphan/cac-thu-vien-reactjs-nen-su-dung-4cea</link>
      <guid>https://dev.to/duongphan/cac-thu-vien-reactjs-nen-su-dung-4cea</guid>
      <description>&lt;h2&gt;
  
  
  Giới thiệu
&lt;/h2&gt;

&lt;p&gt;React.js đã và đang trở thành một trong những thư viện JavaScript phổ biến nhất cho phát triển giao diện người dùng. Nhờ khả năng linh hoạt, hiệu quả và cộng đồng hỗ trợ lớn mạnh, React.js được sử dụng để xây dựng mọi thứ, từ các trang web đơn giản đến các ứng dụng web phức tạp.&lt;/p&gt;

&lt;p&gt;Tuy nhiên, với vô số thư viện React.js có sẵn, việc lựa chọn những thư viện phù hợp cho dự án của bạn có thể trở nên khó khăn. Bài viết này sẽ giới thiệu cho bạn một số thư viện React.js tốt nhất mà bạn nên sử dụng trong năm 2024.&lt;/p&gt;

&lt;h2&gt;
  
  
  Các Thư Viện React.js Nên Sử Dụng
&lt;/h2&gt;

&lt;h3&gt;
  
  
  1. Quản lý trạng thái
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Redux:&lt;/strong&gt; Một thư viện quản lý trạng thái phổ biến cho các ứng dụng React.js. Redux giúp bạn tổ chức trạng thái ứng dụng của mình một cách hiệu quả và dễ dự đoán. &lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimgproxy4.tinhte.vn%2FW0qiOyaIlnmhvXiEhmaLcltRGZxToivNLtb6KbhcIIg%2Fw%3A600%2FaHR0cHM6Ly9lbmNyeXB0ZWQtdGJuMC5nc3RhdGljLmNvbS9pbWFnZXM_cT10Ym46QU5kOUdjUkhxSDIzVERTRmJPdWtKc2ItUTVka3NLUk1MeXVSd1RFV1pMOXpseHFiY1Emcw" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimgproxy4.tinhte.vn%2FW0qiOyaIlnmhvXiEhmaLcltRGZxToivNLtb6KbhcIIg%2Fw%3A600%2FaHR0cHM6Ly9lbmNyeXB0ZWQtdGJuMC5nc3RhdGljLmNvbS9pbWFnZXM_cT10Ym46QU5kOUdjUkhxSDIzVERTRmJPdWtKc2ItUTVka3NLUk1MeXVSd1RFV1pMOXpseHFiY1Emcw" alt="Redux"&gt;&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;MobX:&lt;/strong&gt; Một thư viện quản lý trạng thái nhẹ và dễ sử dụng cho React.js. MobX sử dụng lập trình phản ứng để tự động cập nhật giao diện người dùng khi trạng thái thay đổi. &lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimgproxy4.tinhte.vn%2Fqn78YjDCxFAMObL4jXDtIOE3Wf9oKQT6YyZDK2zTLlA%2Fw%3A600%2Fplain%2Fhttps%3A%2F%2Fd585tldpucybw.cloudfront.net%2Fsfimages%2Fdefault-source%2Fblogs%2F2020%2F2020-11%2Fmobx-concepts.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimgproxy4.tinhte.vn%2Fqn78YjDCxFAMObL4jXDtIOE3Wf9oKQT6YyZDK2zTLlA%2Fw%3A600%2Fplain%2Fhttps%3A%2F%2Fd585tldpucybw.cloudfront.net%2Fsfimages%2Fdefault-source%2Fblogs%2F2020%2F2020-11%2Fmobx-concepts.png" alt="MobX"&gt;&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Context API:&lt;/strong&gt; Một API tích hợp sẵn trong React.js cho phép bạn chia sẻ trạng thái giữa các thành phần React mà không cần sử dụng thư viện bên ngoài.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  2. Giao diện người dùng
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Material-UI:&lt;/strong&gt; Một thư viện giao diện người dùng dựa trên Material Design của Google. Material-UI cung cấp một bộ đầy đủ các thành phần giao diện người dùng đẹp mắt và dễ sử dụng.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Ant Design:&lt;/strong&gt; Một thư viện giao diện người dùng dựa trên ngôn ngữ thiết kế Enterprise của Ant Financial. Ant Design cung cấp một bộ thành phần giao diện người dùng phong phú và có thể tùy chỉnh cao.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Bootstrap React:&lt;/strong&gt; Một thư viện giao diện người dùng dựa trên Bootstrap CSS framework. Bootstrap React giúp bạn dễ dàng tạo các giao diện người dùng đáp ứng bằng React.js.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  3. Định tuyến
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;React Router:&lt;/strong&gt; Một thư viện định tuyến phổ biến cho React.js. React Router giúp bạn quản lý các URL trong ứng dụng web của mình và hiển thị các thành phần React phù hợp. &lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimgproxy4.tinhte.vn%2Fy3cAeOABNmp1yUJlmskycNPR0yU80MiZKmnb0bGWApk%2Fw%3A600%2Fplain%2Fhttps%3A%2F%2Fhanam88.com%2Fimages%2Fposts_from_2022_12_20%2Fmaterial-ui.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimgproxy4.tinhte.vn%2Fy3cAeOABNmp1yUJlmskycNPR0yU80MiZKmnb0bGWApk%2Fw%3A600%2Fplain%2Fhttps%3A%2F%2Fhanam88.com%2Fimages%2Fposts_from_2022_12_20%2Fmaterial-ui.png" alt="React Router"&gt;&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Next.js:&lt;/strong&gt; Một framework React.js giúp bạn dễ dàng tạo các ứng dụng web một trang (SPA) và các trang web tĩnh. Next.js bao gồm một bộ định tuyến tích hợp sẵn dựa trên React Router.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  4. Xử lý dữ liệu
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Axios:&lt;/strong&gt; Một thư viện HTTP client phổ biến cho JavaScript. Axios giúp bạn dễ dàng thực hiện các yêu cầu HTTP và truy xuất dữ liệu từ API. &lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimgproxy4.tinhte.vn%2F_6wU1LkZ4IB5QfVgPPcm8jLfh6zNn1hxnb0s5L0YGwQ%2Fw%3A600%2Fplain%2Fhttps%3A%2F%2Fassets.axios.com%2F203e9f932cc97836ac2ff4c6c982676c.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimgproxy4.tinhte.vn%2F_6wU1LkZ4IB5QfVgPPcm8jLfh6zNn1hxnb0s5L0YGwQ%2Fw%3A600%2Fplain%2Fhttps%3A%2F%2Fassets.axios.com%2F203e9f932cc97836ac2ff4c6c982676c.png" alt="Axios"&gt;&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;React Query:&lt;/strong&gt; Một thư viện quản lý dữ liệu cho React.js. React Query giúp bạn dễ dàng truy xuất, lưu trữ và cập nhật dữ liệu trong các ứng dụng React.js của mình.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Apollo Client:&lt;/strong&gt; Một thư viện GraphQL client phổ biến cho JavaScript. Apollo Client giúp bạn dễ dàng truy xuất dữ liệu từ các GraphQL API.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  5. Kiểm thử
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Jest:&lt;/strong&gt; Một framework kiểm thử đơn vị phổ biến cho JavaScript. Jest giúp bạn dễ dàng viết và chạy các bài kiểm thử đơn vị cho mã React.js của mình.&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;React Testing Library:&lt;/strong&gt; Một thư viện kiểm thử React.js giúp bạn dễ dàng viết các bài kiểm thử tích hợp cho các thành phần React.js của mình.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Cypress:&lt;/strong&gt; Một công cụ kiểm thử đầu cuối cho các ứng dụng web. Cypress giúp bạn dễ dàng kiểm thử giao diện người dùng và chức năng của ứng dụng React.js của mình.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Ngoài ra, còn có rất nhiều thư viện React.js khác có thể hữu ích cho dự án của bạn. Việc lựa chọn thư viện phù hợp phụ thuộc vào nhu cầu cụ thể của bạn.&lt;/p&gt;

&lt;p&gt;Bài viết bạn có thể tham khảo: &lt;a href="https://devful-blog.vercel.app/blogs/gioi-thieu-react-query-va-ly-do-tai-sao-ban-nen-su-dung-no-trong-du-an-react-cua-ban" rel="noopener noreferrer"&gt;Giới Thiệu React-Query Và Lý Do Tại Sao Bạn Nên Sử Dụng Nó Trong Dự Án React Của Bạn&lt;/a&gt;&lt;br&gt;
Bạn có thể xem nhiều thông tin hơn tại website &lt;a href="https://devful-blog.vercel.app/" rel="noopener noreferrer"&gt;Devful Blog&lt;/a&gt; để ủng hộ chúng mình nha :3&lt;/p&gt;

</description>
      <category>react</category>
      <category>javascript</category>
      <category>webdev</category>
      <category>programming</category>
    </item>
    <item>
      <title>Lập trình web phải phân biệt được Session và Cookie</title>
      <dc:creator>Thanh Dương Phan</dc:creator>
      <pubDate>Mon, 10 Jun 2024 00:59:02 +0000</pubDate>
      <link>https://dev.to/duongphan/lap-trinh-web-phai-phan-biet-duoc-session-va-cookie-2mi0</link>
      <guid>https://dev.to/duongphan/lap-trinh-web-phai-phan-biet-duoc-session-va-cookie-2mi0</guid>
      <description>&lt;h2&gt;
  
  
  1. Giới thiệu về Session và Cookie
&lt;/h2&gt;

&lt;p&gt;Trong thế giới web hiện đại, việc quản lý thông tin người dùng giữa các lần truy cập là một yếu tố quan trọng để tạo ra trải nghiệm người dùng mượt mà và cá nhân hóa. Hai công cụ chính để thực hiện điều này là session (phiên làm việc) và cookie (bánh quy). Trong bài viết này, chúng ta sẽ tìm hiểu chi tiết về session và cookie, cách chúng hoạt động, và cách sử dụng chúng trong lập trình web.&lt;/p&gt;

&lt;h3&gt;
  
  
  Session là gì?
&lt;/h3&gt;

&lt;p&gt;Session là một phiên làm việc tạm thời của người dùng trên website, thường bắt đầu khi người dùng truy cập vào trang web và kết thúc khi họ rời khỏi hoặc sau một khoảng thời gian không hoạt động. Dữ liệu session thường được lưu trữ trên server và gắn liền với một session ID duy nhất.&lt;/p&gt;

&lt;h3&gt;
  
  
  Cookie là gì?
&lt;/h3&gt;

&lt;p&gt;Cookie là những đoạn dữ liệu nhỏ được lưu trữ trên máy tính của người dùng bởi trình duyệt web. Cookie có thể chứa thông tin về các trang web mà người dùng đã truy cập, các tùy chọn cá nhân, hoặc thông tin xác thực.&lt;/p&gt;

&lt;h3&gt;
  
  
  Sự khác biệt giữa Session và Cookie
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Vị trí lưu trữ: Session lưu trữ dữ liệu trên server, còn Cookie lưu trữ trên máy người dùng.&lt;/li&gt;
&lt;li&gt;Bảo mật: Session bảo mật hơn vì dữ liệu không lưu trữ trên máy người dùng, trong khi cookie dễ bị tấn công và giả mạo nếu không được mã hóa.&lt;/li&gt;
&lt;li&gt;Dung lượng: Cookie có giới hạn dung lượng (thường là 4KB), còn session có thể lưu trữ dữ liệu lớn hơn vì nó được lưu trên server.&lt;/li&gt;
&lt;li&gt;Thời gian sống: Session thường hết hạn sau một khoảng thời gian không hoạt động, còn cookie có thể được thiết lập để tồn tại trong một thời gian dài hoặc đến khi người dùng xóa chúng.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Cách sử dụng Cookie
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Tạo và đọc Cookie
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;1. Tạo Cookie:&lt;/strong&gt; Bạn có thể tạo cookie bằng cách sử dụng document.cookie. Để tạo một cookie, bạn cần thiết lập tên, giá trị và các tùy chọn như thời gian hết hạn, đường dẫn (path), miền (domain), và bảo mật (secure). &lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fphoto2.tinhte.vn%2Fdata%2Fattachment-files%2F2024%2F05%2F8343058_code.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fphoto2.tinhte.vn%2Fdata%2Fattachment-files%2F2024%2F05%2F8343058_code.png" alt="Code"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;2. Đọc Cookie:&lt;/strong&gt; Để đọc cookie, bạn cũng sử dụng document.cookie, nhưng cần xử lý chuỗi kết quả để tách các cookie thành các phần tử riêng lẻ. &lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fphoto2.tinhte.vn%2Fdata%2Fattachment-files%2F2024%2F05%2F8343064_code.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fphoto2.tinhte.vn%2Fdata%2Fattachment-files%2F2024%2F05%2F8343064_code.png" alt="Code"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;3. Xóa Cookie:&lt;/strong&gt; Để xóa một cookie, bạn chỉ cần thiết lập thời gian hết hạn của nó về quá khứ. &lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fphoto2.tinhte.vn%2Fdata%2Fattachment-files%2F2024%2F05%2F8343067_code.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fphoto2.tinhte.vn%2Fdata%2Fattachment-files%2F2024%2F05%2F8343067_code.png" alt="Code"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Cách sử dụng Session
&lt;/h2&gt;

&lt;p&gt;Session thường được quản lý bởi server và không thể trực tiếp tạo hoặc thao tác bằng JavaScript. Tuy nhiên, bạn có thể sử dụng các API như localStorage và sessionStorage để lưu trữ dữ liệu phiên làm việc phía client.&lt;/p&gt;

&lt;h2&gt;
  
  
  Sử dụng sessionStorage
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;sessionStorage&lt;/strong&gt; lưu trữ dữ liệu trong một phiên duy nhất. Dữ liệu sẽ bị xóa khi tab hoặc trình duyệt đóng.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;1. Lưu trữ dữ liệu:&lt;/strong&gt; &lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fphoto2.tinhte.vn%2Fdata%2Fattachment-files%2F2024%2F05%2F8343096_code.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fphoto2.tinhte.vn%2Fdata%2Fattachment-files%2F2024%2F05%2F8343096_code.png" alt="Code"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;2. Đọc dữ liệu:&lt;/strong&gt; &lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fphoto2.tinhte.vn%2Fdata%2Fattachment-files%2F2024%2F05%2F8343099_code.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fphoto2.tinhte.vn%2Fdata%2Fattachment-files%2F2024%2F05%2F8343099_code.png" alt="Code"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;3. Xóa dữ liệu:&lt;/strong&gt; &lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fphoto2.tinhte.vn%2Fdata%2Fattachment-files%2F2024%2F05%2F8343101_code.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fphoto2.tinhte.vn%2Fdata%2Fattachment-files%2F2024%2F05%2F8343101_code.png" alt="Code"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Khi nào nên sử dụng Session và Cookie
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Cookie: Sử dụng khi bạn cần lưu trữ thông tin trong một khoảng thời gian dài, chia sẻ dữ liệu giữa các trang, hoặc cần gửi dữ liệu đến server mỗi lần gửi yêu cầu HTTP.&lt;/li&gt;
&lt;li&gt;sessionStorage: Sử dụng khi bạn cần lưu trữ dữ liệu chỉ trong phiên làm việc hiện tại và không cần dữ liệu này sau khi người dùng đóng tab hoặc trình duyệt.&lt;/li&gt;
&lt;li&gt;localStorage: Sử dụng khi bạn cần lưu trữ dữ liệu lâu dài trên client mà không phụ thuộc vào phiên làm việc.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Kết luận
&lt;/h2&gt;

&lt;p&gt;Việc sử dụng session và cookie đúng cách trong JavaScript sẽ giúp bạn quản lý thông tin người dùng hiệu quả, cải thiện trải nghiệm người dùng và tăng cường tính cá nhân hóa của website. Hiểu rõ cách hoạt động và khi nào nên sử dụng từng công cụ này sẽ giúp bạn xây dựng các ứng dụng web mạnh mẽ và bảo mật hơn.&lt;/p&gt;

</description>
      <category>session</category>
      <category>cookie</category>
      <category>security</category>
      <category>webdev</category>
    </item>
    <item>
      <title>HTTPS là gì mà web nào cũng xài (Phần 1)</title>
      <dc:creator>Thanh Dương Phan</dc:creator>
      <pubDate>Sun, 19 May 2024 02:44:31 +0000</pubDate>
      <link>https://dev.to/duongphan/https-la-gi-ma-web-nao-cung-xai-phan-1-3ki5</link>
      <guid>https://dev.to/duongphan/https-la-gi-ma-web-nao-cung-xai-phan-1-3ki5</guid>
      <description>&lt;h2&gt;
  
  
  1.   Giới thiệu
&lt;/h2&gt;

&lt;p&gt;Có lẽ chúng ta ai cũng đều biết về 2 giao thức mạng là http và https. Về cơ bản thì http sẽ truyền dữ liệu đi qua internet mà không thông qua mã hóa, điều này sẽ gây ra nguy cơ bị đánh cắp dữ liệu rất cao. &lt;/p&gt;

&lt;p&gt;Trong khi đó, https thường được biết là = http + secure, dữ liệu sẽ được mã hóa ở bên gửi và giải mã khi đến bên nhận, sẽ an toàn hơn rất nhiều, do đó các trang web hiện nay đều đã chuyển sang sử dụng https (chẳng hạn như trang của &lt;a href="https://bepuit.com"&gt;Bếp UIT&lt;/a&gt;). Vậy cụ thể thì quá trình mã hóa này hoạt động như thế nào, chúng ta hãy cùng tìm hiểu thông qua bài viết hôm nay nhé.&lt;/p&gt;

&lt;h2&gt;
  
  
  2.   Mã hóa đối xứng và bất đối xứng
&lt;/h2&gt;

&lt;p&gt;Đầu tiên hãy nói về một vấn đề cơ bản: Nếu chúng ta gửi dữ liệu từ nơi này đến nơi khác bằng plain text thì chuyện gì sẽ xảy ra? &lt;/p&gt;

&lt;p&gt;Đó là rất có khả năng, một kẻ xấu đứng giữa có thể bắt được và đọc thông tin của chúng ta. Vì vậy chúng ta cần phải mã hóa dữ liệu trước khi truyền đi, và người nhận sẽ giải mã để đọc được dữ liệu đó.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Oo-gOEmN--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://images.viblo.asia/129530ff-92eb-4c49-92cf-a484bb43aeae.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Oo-gOEmN--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://images.viblo.asia/129530ff-92eb-4c49-92cf-a484bb43aeae.png" alt="Mã hóa đối xứng" width="463" height="81"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Trong mã hóa đối xứng&lt;/em&gt;, người gửi sẽ mã hóa thông tin với một secret key, và người nhận sẽ giải mã với cùng một secret key đó. Nhưng có một vấn đề cần giải quyết khi sử dụng loại mã hóa này: Làm sao để 2 người trao đổi khóa bí mật (thông qua internet) mà không bị lộ khóa này.&lt;/p&gt;

&lt;p&gt;Vấn đề sẽ được giải quyết nếu chúng ta sử dụng “Mã hóa bất đối xứng” – nơi mà không cần trao đổi khóa bí mật nữa.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--y5NfWT4y--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://images.viblo.asia/e3bdf658-61ea-43b5-851c-72b2e88ae3bc.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--y5NfWT4y--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://images.viblo.asia/e3bdf658-61ea-43b5-851c-72b2e88ae3bc.png" alt="Mã hóa bất đối xứng" width="513" height="219"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Trong mã hóa bất đối xứng&lt;/em&gt;, mỗi người sẽ có một cặp public key và private key với tính chất: &lt;strong&gt;dữ liệu được mã hóa bằng public key, chỉ có thể được giải mã bởi private key tương ứng&lt;/strong&gt;. Public key của một người có thể được thoải mái gửi đi ra bên ngoài, trong khi private key sẽ được tuyệt đối giữ bí mật, không tiết lộ cho bất kì ai khác (có thể lưu local trong máy của người đó).&lt;/p&gt;

&lt;p&gt;Như hình minh họa ở trên, chúng ta có thể thấy, người gửi biết được public key của người nhận, sau đó mã hóa dữ liệu muốn gửi đi bằng public key này. Sau khi dữ liệu đến nơi, người nhận sẽ dùng private key của mình để giải mã và đọc được dữ liệu bên trong.&lt;/p&gt;

&lt;p&gt;Trong trường hợp có một kẻ thứ 3 bắt được đoạn dữ liệu được mã hóa này, hắn cũng không thể giải mã được, vì dữ liệu đã được mã hóa bằng public key của người gửi, nên chỉ có thể giải mã ra bằng private key của người đó mà thôi, mà private key này hoàn toàn không được chia sẻ với ai.&lt;/p&gt;

&lt;p&gt;Chúng ta có thể để ý thấy rằng không hề có một sự trao đổi khóa bí mật diễn ra ở đây. Private key của người nhận sẽ được bảo mật tuyệt đối và đó là điều mà mã hóa đối xứng không làm được.&lt;/p&gt;

&lt;h2&gt;
  
  
  3.   Làm sao tạo ra một kết nối an toàn
&lt;/h2&gt;

&lt;p&gt;Nguyên tắc cơ bản để tạo ra một kết nối an toàn là thực hiện truyền nhận dữ liệu thông qua mã hóa đối xứng bằng một session key (mã hóa đối xứng), và 2 bên sẽ trao đối session key này thông qua mã hóa bất đối xứng. Cụ thể là như sau:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--1LSmyvdI--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://images.viblo.asia/b4bf328c-60cf-412b-8de1-137e632a040d.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--1LSmyvdI--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://images.viblo.asia/b4bf328c-60cf-412b-8de1-137e632a040d.png" alt="Kết nối an toàn sử dụng cả mã hóa đối xứng và bất đối xứng" width="483" height="258"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Ví dụ đây là một kết nối giữa máy mình và Netflix.&lt;/p&gt;

&lt;p&gt;Đầu tiên thì máy chủ của Netflix sẽ được cấp cho một cặp public và private key. Trình duyệt của mình sẽ gửi yêu cầu và Netflix sẽ truyền public key này cho mình.&lt;/p&gt;

&lt;p&gt;Sau đó, trình duyệt của mình sẽ tạo ra một session key (khóa màu vàng, đóng vai trò là secret key trong mã hóa đối xứng). Session key được gửi tới máy chủ của Netflix thông qua mã hóa đối xứng, vì ta đã biết được public key của Netflix. Session key đã được truyền từ trình duyệt của mình đến máy chủ Netflix một cách an toàn.&lt;/p&gt;

&lt;p&gt;Sau các bước này thì 2 bên có thể thoải mái truyền dữ liệu đi bằng việc mã hóa đối xứng với session key đã biết. &lt;/p&gt;

&lt;p&gt;Nhưng, đây chưa phải là cách tối ưu nhất. Có một vấn đề khác lại nảy sinh.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--ffl5iKp0--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://images.viblo.asia/ed1741a0-fd98-47e3-9f45-a9d90591de1e.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--ffl5iKp0--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://images.viblo.asia/ed1741a0-fd98-47e3-9f45-a9d90591de1e.png" alt="Lỗ hổng trong kết nối an toàn" width="430" height="235"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Mọi chuyện sẽ diễn ra êm đẹp nếu như ở bước đầu tiên, kẻ tấn công, bằng một cách thần kì nào đấy, bắt được thông điệp yêu cầu gửi public key của mình đến Netflix, và gửi cho mình một public key giả (public key của hắn).&lt;/p&gt;

&lt;p&gt;Và sau đó, session key sẽ được mã hóa bằng public key giả, và tên giả mạo này chỉ việc giải mã bằng private key của hắn và đọc được session key của mình.&lt;/p&gt;

&lt;p&gt;Và kể từ đó, dữ liệu truyền đi được mã hóa bằng session key của mình đều bị kẻ gian ác này đọc được. &lt;/p&gt;

&lt;p&gt;Điều này quá nguy hiểm đúng không nào, đó là lý do cho sự ra đời của certificate. Chúng ta sẽ tìm hiểu chúng trong các bài viết tiếp theo nhé.&lt;/p&gt;

&lt;h3&gt;
  
  
  Một phút quảng cáo
&lt;/h3&gt;

&lt;p&gt;Nếu mọi người có hứng thú thì ghé thăm&lt;a href="https://bepuit.com/blog/gioi-thieu-ve-bep-uit-661a30dc90c7de33d0c89f70.html"&gt; Bếp UIT&lt;/a&gt; của nhà mình với &lt;a href="https://bepuit.com/blog/top-5-mon-an-ban-khong-nen-bo-lo-tai-bep-uit-6623424be0c3afb0e3c1625c.html"&gt;những món ăn vô cũng hấp dẫn&lt;/a&gt; nhé, chẳng hạn như món &lt;a href="https://bepuit.com/product/pho-bo-kobe-661a7ff590c7de33d0c8a0f7.html"&gt;Phở bò Kobe&lt;/a&gt; nè o((&amp;gt;ω&amp;lt; ))o.&lt;/p&gt;

</description>
      <category>https</category>
      <category>websecurity</category>
      <category>cryptography</category>
    </item>
  </channel>
</rss>
