Trong qu&aacute; tr&igrave;nh l&agrave;m frontend, nhiều developer gặp kh&oacute; khăn với c&aacute;c vấn đề li&ecirc;n quan đến Access-Control-Allow-Origin header. Khi đ&oacute;, giải ph&aacute;p CORS l&agrave; y&ecirc;u cầu quan trọng đối với c&aacute;c lập tr&igrave;nh vi&ecirc;n website để truy vấn qua API. Vậy CORS l&agrave; g&igrave;, tại sao n&ecirc;n sử dụng v&agrave; cơ chế hoạt động của n&oacute; như thế n&agrave;o? B&agrave;i viết dưới đ&acirc;y của <a title="Tek4.vn " href="https://tek4.vn/">Tek4.vn</a> sẽ gi&uacute;p bạn giải đ&aacute;p c&aacute;c thắc mắc li&ecirc;n quan tới CORS.&nbsp;
<h2 style="text-align: justify;">CORS l&agrave; g&igrave;?</h2>
<a href="https://tek4.vn/cors-la-gi">CORS</a> l&agrave; c&aacute;ch viết tắt của Cross origin resource sharing, dịch ra tiếng Việt l&agrave; cơ chế cho ph&eacute;p hạn chế chia sẻ t&agrave;i nguy&ecirc;n của website n&agrave;y với website kh&aacute;c. Đ&acirc;y l&agrave; một t&iacute;nh năng được bổ sung v&agrave;o HTML5 hoặc c&aacute;c HTTP headers để chỉ dẫn cho tr&igrave;nh duyệt website về việc sử dụng v&agrave; quản l&yacute; nội dung cross-domain. Điều n&agrave;y kh&ocirc;ng cho ph&eacute;p bạn lấy dữ liệu từ một trang kh&aacute;c th&ocirc;ng qua cơ chế XMLHttpRequest.&nbsp;
CORS cho ph&eacute;p nhiều t&agrave;i nguy&ecirc;n kh&aacute;c nhau như Fonts, JavaScript,... của một website. C&aacute;c t&agrave;i nguy&ecirc;n n&agrave;y c&oacute; thể được truy vấn từ domain kh&aacute;c với domain của trang web đ&oacute;. Trong trường hợp muốn chia sẻ t&agrave;i nguy&ecirc;n cho một domain cụ thể, bạn chỉ cần sử dụng tới xử l&yacute; CORS trong Node.js. Nếu một trang web sử dụng t&agrave;i nguy&ecirc;n hệ thống kh&aacute;c th&igrave; cần c&oacute; sự đồng &yacute; của m&aacute;y chủ server.&nbsp;
Hơn nữa, cơ chế CORS cũng được xem như l&agrave; một kỹ thuật để ph&aacute;t triển tương t&aacute;c giữa client v&agrave; server. N&oacute; gi&uacute;p việc tương t&aacute;c trở n&ecirc;n nhanh ch&oacute;ng v&agrave; đơn giản. Đồng thời CORS cũng cho ph&eacute;p JavaScript ở một website tạo ra request tr&ecirc;n 1 REST API. Nhờ đ&oacute; m&agrave; khả năng tương t&aacute;c của c&aacute;c dịch vụ tr&ecirc;n Internet cũng được cải thiện hơn.&nbsp;
<img style="width: 700px; display: block; margin-left: auto; margin-right: auto;" title="Cors cho ph&eacute;p c&aacute;c t&agrave;i nguy&ecirc;n bị hạn chế tr&ecirc;n trang web được y&ecirc;u cầu từ một domain kh&aacute;c b&ecirc;n ngo&agrave;i domain m&agrave; từ đ&oacute; t&agrave;i nguy&ecirc;n đầu ti&ecirc;n được ph&acirc;n ph&aacute;t" src="https://tek4.vn/public_files/d617269d-cd49-4a2d-816b-c4979a515119" alt="cors l&agrave; g&igrave;" />
<h2 style="text-align: justify;">L&yacute; do n&ecirc;n d&ugrave;ng CORS</h2>
Trước hết, CORS được sinh ra để phục vụ cho same-origin policy, li&ecirc;n quan tới bảo mật được c&agrave;i đặt v&agrave;o to&agrave;n bộ tr&igrave;nh duyệt hiện nay: Ch&iacute;nh s&aacute;ch n&agrave;y ngăn chặn việc truy cập t&agrave;i nguy&ecirc;n của c&aacute;c  domain kh&aacute;c một c&aacute;ch tuỳ &yacute;. Dưới đ&acirc;y l&agrave; một kịch bản cụ thể về ch&iacute;nh s&aacute;ch n&agrave;y để bạn tham khảo:&nbsp;
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1">Người d&ugrave;ng truy cập v&agrave;o một website c&oacute; m&atilde; độc, sử dụng JavaScript để truy cập tin nhắn Facebook của bạn th&ocirc;ng qua địa chỉ https://facebook.com/messages.&nbsp;</li>
<li style="font-weight: 400;" aria-level="1">Nếu đ&atilde; đăng nhập Facebook từ trước v&agrave; kh&ocirc;ng c&oacute; same-origin policy, website độc hại đ&oacute; c&oacute; thể thoải m&aacute;i lấy dữ liệu của bạn v&agrave; c&aacute;c th&ocirc;ng tin m&agrave; kh&ocirc;ng bị giới hạn.&nbsp;</li>
</ul>
Same-origin policy c&oacute; nhiệm vụ ngăn chặn kịch bản như tr&ecirc;n để bảo vệ người d&ugrave;ng, đảm bảo an to&agrave;n hơn khi lướt web. Bạn c&oacute; thể thử tr&ecirc;n web console v&agrave; r&agrave; so&aacute;t được lỗi dưới đ&acirc;y:&nbsp;
<code>$.get (&lsquo;https://facebook.com/messages&rsquo;)&nbsp;</code>
<code>Access to XMLHttpRequest at &lsquo;https://facebook.com/messages&rsquo; from origin &lsquo;xxx&rsquo; has been blocked by CORS policy: No</code>
<code>&lsquo;Access-Control-Allow-Origin&rsquo; header is present on the requested resource: </code>
Tuy nhi&ecirc;n, trong qu&aacute; tr&igrave;nh l&agrave;m việc với website, c&aacute;c lập tr&igrave;nh vi&ecirc;n phải thường xuy&ecirc;n thực hiện truy vấn đến c&aacute;c domain kh&aacute;c, đặc biệt l&agrave; API. L&uacute;c n&agrave;y giải ph&aacute;p tối ưu nhất l&agrave; sử dụng CORS. N&oacute; sử dụng c&aacute;c HTTP header để th&ocirc;ng b&aacute;o cho tr&igrave;nh duyệt về c&aacute;c ứng dụng web chạy domain n&agrave;y c&oacute; thể truy cập t&agrave;i nguy&ecirc;n của domain kh&aacute;c.&nbsp;
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1">B&ecirc;n cạnh đ&oacute;, CORS c&oacute; thể ứng dụng phổ biến v&agrave;o xử lấy c&aacute;c trường hợp trong thực tế. Bạn c&oacute; thể bắt gặp n&oacute; trong trường hợp một ứng dụng web chạy ở domain foo.com v&agrave; cần truy vấn tới bar.com để lấy dữ liệu. C&aacute;c lập tr&igrave;nh vi&ecirc;n thường sử dụng XMLHttpRequest để JavaScript c&oacute; thể thực hiện được.&nbsp;</li>
<li style="font-weight: 400;" aria-level="1">Nhờ sử dụng CORS, ch&uacute;ng ta c&oacute; thể giao tiếp trong ứng dụng web đơn giản v&agrave; dễ d&agrave;ng hơn. Hầu hết c&aacute;c tr&igrave;nh duyệt hiện nay đều c&oacute; c&agrave;i đặt same-origin-policy v&agrave; tu&acirc;n thủ n&oacute; rất chặt chẽ. Do đ&oacute;, c&aacute;c truy xuất ở tr&ecirc;n sẽ kh&ocirc;ng thể đạt được kết quả g&igrave; nếu kh&ocirc;ng c&oacute; c&aacute;c header CORS ph&ugrave; hợp.&nbsp;</li>
</ul>
<img style="width: 700px; display: block; margin-left: auto; margin-right: auto;" title="Cors l&agrave; một ch&iacute;nh s&aacute;ch li&ecirc;n quan đến bảo mật được c&agrave;i đặt v&agrave;o to&agrave;n bộ c&aacute;c tr&igrave;nh duyệt gi&uacute;p ngăn chặn việc truy cập t&agrave;i nguy&ecirc;n của c&aacute;c domain kh&aacute;c một c&aacute;ch bừa b&atilde;i" src="https://tek4.vn/public_files/8b2a782f-9cd3-4731-a02b-b9e7350ae1e7" alt="L&yacute; do n&ecirc;n d&ugrave;ng Cors" />
<h2 style="text-align: justify;">Cơ chế hoạt động của CORS</h2>
CORS hoạt động theo cơ chế như sau: khi một tr&igrave;nh duyệt gửi request tới một domain kh&aacute;c để y&ecirc;u cầu l&agrave;m việc g&igrave; đ&oacute;, c&aacute;c request sẽ được gắn th&ecirc;m header l&agrave; origin. Header n&agrave;y c&oacute; nhiệm vụ x&aacute;c định origin của client, được th&ecirc;m tự động bởi tr&igrave;nh duyệt v&agrave; kh&ocirc;ng ai thay đổi được. Origin đại diện cho nguồn gốc truy vấn v&agrave; được cấu tạo gồm 3 phần ch&iacute;nh:&nbsp;
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1">Protocol/Scheme: (HTTPS/HTTP).&nbsp;</li>
<li style="font-weight: 400;" aria-level="1">Host: Domain/Server.&nbsp;</li>
<li style="font-weight: 400;" aria-level="1">Port: Cổng, nếu gi&aacute; trị n&agrave;y mặc định l&agrave; 80 th&igrave; c&oacute; thể kh&ocirc;ng cần tới.&nbsp;</li>
</ul>
Tiếp đ&oacute;, c&aacute;c server sẽ xem x&eacute;t Origin của Request m&agrave; người d&ugrave;ng gửi c&oacute; hợp l&yacute; kh&ocirc;ng. Nếu header đ&oacute; hợp lệ, tr&igrave;nh duyệt sẽ trả n&oacute; về response k&egrave;m theo header Access-Control-Allow-Origin. Header n&agrave;y sẽ cho biết liệu client c&oacute; hợp lệ kh&ocirc;ng v&agrave; tiếp tục thực hiện qu&aacute; tr&igrave;nh request. Header Access-Control-Allow-Origin liệt k&ecirc; c&aacute;c t&ecirc;n miền được cho ph&eacute;p thực hiện request của CORS.&nbsp;
K&yacute; tự * cho ph&eacute;p to&agrave;n bộ domain kh&aacute;c thực hiện request. Thế nhưng, c&aacute;ch n&agrave;y thường được coi l&agrave; kh&ocirc;ng an to&agrave;n trừ khi API của bạn được sử dụng với mục đ&iacute;ch c&ocirc;ng khai. Nếu kh&ocirc;ng c&oacute; header Access-Control-Allow-Origin hoặc gi&aacute; trị kh&ocirc;ng hợp lệ, tr&igrave;nh duyệt sẽ kh&ocirc;ng b&aacute;o lỗi.&nbsp;
Hầu hết c&aacute;c header li&ecirc;n quan tới CORS đều c&oacute; phần tiền tố bắt đầu bằng Access-Control. B&ecirc;n cạnh Access-Control-Allow-Origin, c&aacute;c header li&ecirc;n quan tới CORS c&oacute; thể chứa:&nbsp;
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1">Access-Control-Allow-Methods: l&agrave; danh s&aacute;ch c&aacute;c phương thức HTTP m&agrave; m&aacute;y chủ cho ph&eacute;p m&aacute;y kh&aacute;ch sử dụng được (GET, PUT, DELETE, PUT,..). Trong đ&oacute;, c&aacute;c phương thức n&agrave;y kh&ocirc;ng thể ghi đ&egrave; hay sửa đổi được.</li>
<li style="font-weight: 400;" aria-level="1">Access-Control-Allow-Headers: l&agrave; danh s&aacute;ch những header m&agrave; ph&iacute;a m&aacute;y chủ đang hỗ trợ (x-authentication-token,..). Nếu trong y&ecirc;u cầu m&agrave; ph&iacute;a m&aacute;y kh&aacute;ch gửi tới kh&ocirc;ng c&oacute; header trong danh s&aacute;ch n&agrave;y th&igrave; sẽ bị m&aacute;y chủ bỏ qua.&nbsp;</li>
<li style="font-weight: 400;" aria-level="1">Access-Control-Max-Age: l&agrave; một kiểu m&ocirc; tả thời gian hợp lệ của preflight request. Nếu c&aacute;c m&ocirc; tả n&agrave;y bị qu&aacute; hạn, tr&igrave;nh duyệt sẽ tạo ra một preflight request mới.&nbsp;</li>
</ul>
<h2 style="text-align: justify;">C&aacute;c truy vấn sử dụng trong CORS</h2>
Dựa theo quy chuẩn quốc tế, c&aacute;c truy vấn sau cần phải sử dụng đến cơ chế CORS:
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1">C&aacute;c truy vấn bằng XMLHttpRequest hoặc Fetch API tới một domain kh&aacute;c.&nbsp;</li>
<li style="font-weight: 400;" aria-level="1">Ảnh, video được vẽ bằng Canvas c&oacute; sử dụng c&ocirc;ng cụ drawImage.&nbsp;</li>
<li style="font-weight: 400;" aria-level="1">Web fonts truy vấn tới domain kh&aacute;c qua c&ocirc;ng cụ font face của CSS. Trong đ&oacute;, nếu được cho ph&eacute;p, website chỉ sử dụng font dạng Truetype.&nbsp;</li>
<li style="font-weight: 400;" aria-level="1">WebGL Texture.&nbsp;</li>
</ul>
<h2 style="text-align: justify;">Sử dụng CORS như thế n&agrave;o?</h2>
C&aacute;c lập tr&igrave;nh vi&ecirc;n mới khi l&agrave;m việc c&ugrave;ng API của c&aacute;c h&atilde;ng lớn với t&agrave;i liệu đầy đủ thường mắc phải những hiểu lầm kh&aacute; lớn về CORS. Họ thường cho rằng cơ chế CORS l&agrave; một phần của frontend. Tuy nhi&ecirc;n, CORS thực chất ho&agrave;n to&agrave;n l&agrave; c&ocirc;ng việc của backend. C&aacute;c lập tr&igrave;nh vi&ecirc;n frontend thường kh&ocirc;ng cần thao t&aacute;c nhiều nếu cần d&ugrave;ng tới c&aacute;c truy vấn trong trường hợp cần d&ugrave;ng tới c&aacute;c truy vấn CORS.&nbsp;
Đối với m&aacute;y chủ, khi đ&atilde; c&oacute; được c&aacute;c th&ocirc;ng tin về nguồn gốc của truy vấn, server c&oacute; thể lựa chọn để phản hồi lại. Sau đ&oacute;, m&aacute;y chủ sẽ trả về lỗi hoặc c&aacute;c dữ liệu cần thiết. Nếu trả về dữ liệu, c&aacute;c server cần thiết lập HTTP header để tr&igrave;nh duyệt hiểu rằng truy vấn n&agrave;y được chấp nhận.&nbsp;
C&oacute; thể thấy, CORS hỗ trợ th&uacute;c đẩy qu&aacute; tr&igrave;nh trao đổi data giữa tr&igrave;nh duyệt web v&agrave; server. CORS ho&agrave;n to&agrave;n kh&ocirc;ng li&ecirc;n quan tới trao đổi trực tiếp giữa ứng dụng web v&agrave; một server web kh&aacute;c. Một v&iacute; dụ điển h&igrave;nh về ứng dụng của CORS l&agrave; backend ứng dụng đ&oacute; truy cập tới t&agrave;i nguy&ecirc;n tr&ecirc;n một origin kh&aacute;c.&nbsp;
Nếu đang sử dụng hosting cPanel, bạn cần bật CORS để chạy ứng dụng của m&igrave;nh. Bạn c&oacute; thể k&iacute;ch hoạt CORS bằng c&aacute;ch th&ecirc;m c&aacute;c d&ograve;ng sau v&agrave;o tệp .htaccess của hosting cPanel.&nbsp;
<code>&lt;IfModule mod_headers.c&gt;&nbsp;</code>
<code>Header set Access-Control-Allow-Origin &ldquo;*&rdquo;&nbsp;</code>
<code>&lt;/IfModule&gt;</code>
Trong trường hợp đang sử dụng m&atilde; nguồn PHP, bạn c&oacute; thể sử dụng cấu tr&uacute;c sau:&nbsp;
<code>&lt;?php</code>
<code>header(&ldquo;Access-Control-Allow-Headers: Authorization, Content-Type&rdquo;);&nbsp;</code>
<code>header(&ldquo;Access-Control-Allow-Origin:*&rdquo;);&nbsp;</code>
<code>header(&lsquo;content-type:application/json; charset=utf-8&rsquo;);</code>
<code>?&gt;&nbsp;</code>
Kết&nbsp;
Như vậy, b&agrave;i viết đ&atilde; gi&uacute;p bạn đọc giải đ&aacute;p CORS l&agrave; g&igrave;, c&aacute;ch để ứng dụng cơ chế n&agrave;y v&agrave;o ứng dụng web dễ d&agrave;ng hơn trong qu&aacute; tr&igrave;nh trao đổi th&ocirc;ng tin. Cơ chế CORS l&agrave; một giải ph&aacute;p quan trọng đối với c&aacute;c lập tr&igrave;nh vi&ecirc;n hiện đại, hỗ trợ hiển thị nội dung v&agrave; tăng khả năng tương t&aacute;c giữa c&aacute;c dịch vụ tr&ecirc;n Internet. Hy vọng với những chia sẻ tr&ecirc;n, bạn đọc c&oacute; thể mở rộng th&ecirc;m vốn kiến thức của m&igrave;nh về c&ocirc;ng nghệ th&ocirc;ng tin hiện đại.&nbsp;

Admin

Cors là gì? Giải pháp dành cho lập trình viên webs

Cùng tác giả

Admin

Có liên quan