Thẻ liên quan đến thông tin meta
Bài viết này giải thích các thẻ liên quan đến siêu thông tin.
Nó giải thích thẻ <meta>, bao gồm các điểm liên quan đến SEO, thiết kế đáp ứng và Content-Security-Policy.
YouTube Video
Thẻ liên quan đến thông tin meta
Thẻ <meta>
1<meta charset="UTF-8">
2<meta name="viewport" content="width=device-width, initial-scale=1.0">- Thẻ
<meta>cung cấp siêu dữ liệu cho tài liệu HTML. Siêu dữ liệu không được hiển thị trên trang nhưng được các công cụ tìm kiếm và trình duyệt sử dụng. Thẻ<meta>được sử dụng cho mô tả trang, từ khóa, thông tin tác giả và thiết lập thiết kế đáp ứng.
Thẻ <meta name="viewport">
1<meta name="viewport" content="width=device-width, initial-scale=1">- Thẻ
<meta name="viewport">điều khiển bố cục và tỷ lệ của các trang web trên các thiết bị khác nhau. Nó thường được sử dụng trong thiết kế đáp ứng để đảm bảo hiển thị đúng trên các thiết bị di động.
Thẻ <meta name="description">
1<meta name="description" content="An example webpage">- Thẻ
<meta name="description">được sử dụng để mô tả ngắn gọn nội dung của một trang web. Các công cụ tìm kiếm sử dụng mô tả này để hiển thị tóm tắt của trang trong kết quả tìm kiếm.
Thẻ <meta name="keywords">
1<meta name="keywords" content="HTML, CSS, JavaScript">- Thẻ
<meta name="keywords">cung cấp danh sách các từ khóa liên quan đến nội dung trang. Các công cụ tìm kiếm sử dụng các từ khóa này để hiểu nội dung trang tốt hơn.
Thẻ <meta name="author">
1<meta name="author" content="John Doe">- Thẻ
<meta name="author">xác định tác giả của trang web. Thông tin này chủ yếu được sử dụng bởi các công cụ tìm kiếm và công cụ khác để xác định chính xác tác giả của trang.
Thẻ <meta http-equiv="refresh">
1<meta http-equiv="refresh" content="5; url=https://example.com">- Thẻ
<meta http-equiv="refresh">được sử dụng để tự động tải lại trang hoặc chuyển hướng đến một URL khác sau một khoảng thời gian xác định. Nó rất hữu ích cho việc tải lại trang hoặc chuyển hướng người dùng.
Thẻ <meta http-equiv="cache-control">
1<meta http-equiv="cache-control" content="no-cache">- Thẻ
<meta http-equiv="cache-control">được sử dụng để kiểm soát hành vi lưu trữ của trang web. Nó có thể chỉ định là lưu trữ trang hay xác thực lại khi truy cập sau này.
Thẻ <meta http-equiv="expires">
1<meta http-equiv="expires" content="Tue, 01 Jan 2025 00:00:00 GMT">- Thẻ
<meta http-equiv="expires">thiết lập ngày hết hạn cho nội dung trang. Khi ngày chỉ định đã qua, nội dung trở nên lỗi thời, và trình duyệt sẽ được nhắc lấy phiên bản mới.
Thẻ <meta http-equiv="X-UA-Compatible">
1<meta http-equiv="X-UA-Compatible" content="IE=edge">- Thẻ
<meta http-equiv="X-UA-Compatible">được sử dụng để chỉ định chế độ tương thích cho Internet Explorer. Thẻ này đảm bảo rằng trình duyệt sử dụng phiên bản thích hợp của cơ chế dựng hình để hiển thị trang.
Thẻ <meta http-equiv="content-security-policy">
Thuộc tính http-equiv="content-security-policy" trong thẻ meta HTML là một chức năng để áp dụng các quy tắc bảo mật cụ thể trong trình duyệt nhằm tăng cường bảo mật cho trang web. Bằng cách sử dụng thuộc tính này, các nhà phát triển trang web có thể đặt chính sách liên quan đến việc tải tài nguyên và thực thi script để ngăn chặn các cuộc tấn công như XSS (Tấn công cross-site scripting) và tiêm dữ liệu.
Chính sách bảo mật nội dung là gì?
Content-Security-Policy (CSP) là một loại tiêu đề HTTP được sử dụng để kiểm soát các tài nguyên bên ngoài (hình ảnh, script, stylesheet, v.v.) mà một trang web có thể tải và các loại mã nào có thể được thực thi. Thông thường, nó được gửi dưới dạng tiêu đề HTTP nhưng cũng có thể được xác định trong HTML sử dụng thẻ meta. Phương pháp này cho phép chỉ định CSP trên phía máy khách thay vì đặt tiêu đề trên phía máy chủ.
Ví dụ, bạn có thể thiết lập CSP trong thẻ meta của HTML như sau:.
1<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://example.com; script-src 'self' https://apis.google.com">Trong ví dụ này, các chính sách sau được thiết lập:
default-src 'self': Về cơ bản, tất cả các tài nguyên chỉ được tải từ cùng một nguồn gốc (chính nó).img-src https://example.com: Hình ảnh chỉ được tải từhttps://example.com.script-src 'self' https://apis.google.com: Chỉ các script từ cùng một nguồn gốc hoặc từhttps://apis.google.commới có thể được thực thi.
Sự khác biệt giữa http-equiv và tiêu đề HTTP
Thông thường, Content-Security-Policy được gửi từ máy chủ đến máy khách dưới dạng tiêu đề HTTP. Tuy nhiên, nếu bạn thiết lập nó trên phía máy khách bằng cách sử dụng thẻ meta, nó có thể được viết trực tiếp trong HTML.
Tuy nhiên, có một số điểm khác biệt quan trọng giữa việc thiết lập nó dưới dạng tiêu đề HTTP và chỉ định nó bằng thẻ meta:
-
Ưu tiên: CSP được gửi qua tiêu đề HTTP sẽ được ưu tiên hơn CSP được chỉ định trong thẻ
meta. Điều này có nghĩa là nếu CSP được thiết lập trên phía máy chủ, nó sẽ không bị ghi đè bởi một thẻmetađược sử dụng trên phía máy khách. -
Thời gian áp dụng: CSP được chỉ định thông qua tiêu đề HTTP sẽ được áp dụng trước khi trang được tải. Mặt khác, CSP được chỉ định thông qua một thẻ
metađược áp dụng khi HTML được phân tích, do đó các tài nguyên có thể đã được tải.
Các chỉ thị có sẵn trong CSP
Trong CSP, các chỉ thị khác nhau được sử dụng để chỉ định các chính sách cho phép hoặc không cho phép tải và thực thi các loại tài nguyên cụ thể. Các chỉ thị điển hình bao gồm những điều sau đây:.
- default-src: Chỉ định chính sách nguồn mặc định cho tất cả các tài nguyên. Nó áp dụng cho các tài nguyên không được chỉ định bởi các chỉ thị khác.
- script-src: Chỉ định nguồn JavaScript. Để ngăn chặn các cuộc tấn công XSS, bạn có thể hạn chế việc tải script từ các trang web bên ngoài.
- style-src: Chỉ định nguồn CSS. Bằng cách hạn chế tải các stylesheet từ các nguồn bên ngoài, bạn có thể ngăn chặn các cuộc tấn công vào kiểu dáng trang web của mình.
- img-src: Chỉ định nguồn hình ảnh. Bạn có thể hạn chế việc tải hình ảnh từ các nguồn bên ngoài.
- connect-src: Chỉ định các URL được phép cho XMLHttpRequests và kết nối WebSocket. Điều này đảm bảo an ninh cho việc giao tiếp API bên ngoài và WebSocket.
Bằng cách kết hợp những chỉ thị này, bạn có thể xây dựng các chính sách chi tiết cho tài nguyên trên trang web của mình.
Cấu hình CSP thực tiễn để tăng cường bảo mật
Dưới đây là một ví dụ về cài đặt CSP để tăng cường bảo mật cho trang web của bạn. Điều này có thể giảm nguy cơ tấn công XSS và rò rỉ dữ liệu.
1<meta http-equiv="Content-Security-Policy"
2 content="default-src 'self'; script-src 'self' https://trusted-cdn.com; object-src 'none'; style-src 'self'; base-uri 'self'; form-action 'self';">Các chính sách sau được áp dụng với cấu hình này:
default-src 'self': Tất cả tài nguyên chỉ được tải từ cùng một nguồn gốc.script-src 'self' https://trusted-cdn.com: Các script chỉ được tải từ cùng một nguồn gốc hoặc từ một CDN đáng tin cậy.object-src 'none': Thẻobjectkhông được sử dụng. Điều này nhằm ngăn chặn các cuộc tấn công dựa trên Flash hoặc plugin.style-src 'self': Chỉ tải các tập tin stylesheet từ nguồn gốc của chính nó.base-uri 'self': Cơ sở URL do thẻ<base>đặt ra được giới hạn ở chính nguồn đó.form-action 'self': Đích gửi biểu mẫu bị giới hạn trong chính nguồn gốc. Điều này giảm thiểu rủi ro dữ liệu biểu mẫu bị gửi đến các trang web bên ngoài.
Kết luận
Bằng cách sử dụng http-equiv="content-security-policy" để định nghĩa CSP trong HTML, có thể tăng cường bảo mật cho trang web. Một CSP được cấu hình đúng cách là công cụ mạnh mẽ giúp giảm thiểu rủi ro tấn công XSS và rò rỉ dữ liệu, bảo vệ trang web của bạn.
Bạn có thể làm theo bài viết trên bằng cách sử dụng Visual Studio Code trên kênh YouTube của chúng tôi. Vui lòng ghé thăm kênh YouTube.