Trình Tạo URL

Giải phẫu của một URL, từng thành phần một

Ngữ pháp định nghĩa mọi URL trên web sống trong RFC 3986 «Uniform Resource Identifier (URI): Generic Syntax» (Berners-Lee, Fielding, Masinter, tháng 1 năm 2005). Các trình duyệt thực sự sử dụng một biến thể hơi khoan dung hơn được định nghĩa trong WHATWG URL Living Standard. Cả hai đều đồng ý về các thành phần:

• Lược đồ, https, http, ftp, mailto, data, tel, sms, magnet, cùng với các lược đồ ứng dụng tùy chỉnh (myapp://). RFC 3986 yêu cầu chữ thường; WHATWG chuẩn hóa. Đăng ký Lược đồ URI của IANA có danh sách chính thức các lược đồ đã đăng ký.
• Quyền, userinfo@host:port. Dạng thông tin xác thực nhúng user:password@ bị phản đối vì bảo mật: Chrome 64 (tháng 1 năm 2018) chặn tải tài nguyên phụ với thông tin xác thực trong URL vì chúng cho phép các thủ thuật lừa đảo.
• Host, một tên miền hoặc IP literal. Tên miền quốc tế hóa như президент.рф được chuyển đổi sang ASCII qua Punycode (RFC 3492, tháng 3 năm 2003): ví dụ đó trở thành xn--d1abbgf6aiiy.xn--p1ai. Trình duyệt thực hiện chuyển đổi minh bạch để hiển thị.
• Cổng, chỉ bao gồm khi không phải mặc định cho lược đồ. Mặc định: 80 (http), 443 (https), 21 (ftp), 22 (ssh), 25 (smtp), 5432 (postgres), 3306 (mysql), 6379 (redis).
• Đường dẫn, các đoạn được phân tách bằng dấu gạch chéo. Mỗi đoạn mã hóa phần trăm bất cứ thứ gì bên ngoài tập pchar được định nghĩa trong RFC 3986 §3.3. Các đoạn dấu chấm . và .. có ngữ nghĩa loại bỏ (§5.2.4).
• Truy vấn, theo quy ước các cặp khóa-giá trị được phân tách bằng &, nhưng RFC 3986 chỉ nói «chuỗi không rõ ràng sau ?». Quy ước được chính thức hóa trong thuật toán application/x-www-form-urlencoded của WHATWG.
• Đoạn, mọi thứ sau #. Không bao giờ được gửi đến máy chủ. Được sử dụng bởi các bộ định tuyến ứng dụng trang đơn, các liên kết neo, và các token luồng ngầm OAuth.

Mã hóa phần trăm: bẫy + so với %20

RFC 3986 §2.3 định nghĩa các ký tự không dành riêng không bao giờ cần mã hóa: A-Z a-z 0-9 - . _ ~. Mọi thứ khác, khi xuất hiện dưới dạng dữ liệu bên trong một thành phần URL, trở thành %XX nơi XX là giá trị hex của byte. Các ký tự UTF-8 nhiều byte mở rộng thành nhiều bộ ba phần trăm: é (U+00E9, UTF-8 C3 A9) mã hóa thành %C3%A9. Cạm bẫy kinh điển là ký tự khoảng trắng: trong một đường dẫn hoặc đoạn URL thông thường, khoảng trắng mã hóa thành %20; trong chuỗi truy vấn được mã hóa biểu mẫu (thuật toán application/x-www-form-urlencoded được chia sẻ bởi các biểu mẫu HTML và bộ tuần tự hóa chuỗi truy vấn WHATWG), khoảng trắng mã hóa thành +. Một máy chủ giải mã dữ liệu biểu mẫu chuyển đổi + trở lại thành khoảng trắng; một máy chủ coi truy vấn như một URI chung không. Trộn lẫn hai quy ước âm thầm làm hỏng dữ liệu. Mẫu an toàn trong JavaScript: sử dụng new URLSearchParams cho truy vấn và encodeURIComponent cho các giá trị riêng lẻ; sự tuân thủ đặc tả được xử lý cho bạn.

Nơi bạn thực sự cần một trình xây dựng URL

• Liên kết tiếp thị được gắn thẻ UTM cho Google Analytics (Urchin Tracking Module, trong GA kể từ năm 2005): năm tham số chuẩn là utm_source, utm_medium, utm_campaign, utm_content, utm_term, tất cả đều viết thường theo hướng dẫn của chính Google.
• Yêu cầu ủy quyền OAuth 2.0 (RFC 6749, tháng 10 năm 2012): đặc tả bắt buộc response_type, client_id, redirect_uri, scope, state làm các tham số truy vấn trên điểm cuối ủy quyền.
• Liên kết sâu di động: một lược đồ app:// mà OS định tuyến đến ứng dụng đã cài đặt của bạn thay vì trình duyệt, hoặc một Android App Link / iOS Universal Link được phục vụ từ tên miền của bạn.
• Thử nghiệm client API: https://api.example.com/v2/users?expand=projects&since=2024-01-01. Đánh máy thủ công những điều này liên tục thất bại ở bước «khoảng trắng bên trong một giá trị».
• Bộ phá vỡ cache CDN: ?v=2026-05-12-1 được thêm vào URL tài sản tĩnh để triển khai làm vô hiệu phiên bản đã lưu trong bộ nhớ đệm. Chuỗi truy vấn là một phần của khóa cache.
• Dịch vụ chuyển đổi hình ảnh (Cloudinary, imgix, Cloudflare Images): chuyển đổi được mã hóa dưới dạng các tham số truy vấn hoặc đoạn đường dẫn. Một cuộc gọi điển hình trông giống như ?w=800&q=85&fm=webp.
• Mẫu email nơi trang đích đọc các tham số qua JS, thường kết hợp các thẻ UTM với một token hoặc uid duy nhất để theo dõi mỗi người nhận.

Sai lầm phổ biến

• Quên mã hóa & bên trong một giá trị. Một giá trị «mèo & chó» được thả ngây thơ vào ?loài=mèo & chó trở thành một khóa loài với giá trị mèo cộng với một khóa rỗng lạc lối. Luôn chuyển qua encodeURIComponent.
• Mã hóa kép. Gọi encodeURIComponent trên một chuỗi đã được mã hóa biến %20 thành %2520. Dễ dàng khi một giá trị đi qua hai hệ thống mà mỗi hệ thống «mã hóa phòng thủ».
• Không khớp dấu gạch chéo cuối. RFC 3986 nói rằng https://example.com/api và https://example.com/api/ là các tài nguyên khác nhau. Hầu hết các API REST đối xử với chúng giống nhau, nhưng một số trả về chuyển hướng 308; chọn một dạng chuẩn và ghi lại nó.
• Trộn + và %20. Chuỗi truy vấn được mã hóa biểu mẫu sử dụng + cho khoảng trắng; mã hóa phần trăm chung sử dụng %20. Một đường dẫn với + theo nghĩa đen tồn tại qua sao chép-dán nhưng thất bại khi một bộ giải mã biểu mẫu đọc nó.
• Thông tin xác thực nhúng. https://user:pass@example.com bị phản đối và bị chặn cho tải tài nguyên phụ trong Chrome 64+. Sử dụng tiêu đề Authorization.
• Lừa đảo IDN. Cyrillic «а» (U+0430) trông giống hệt Latin «a». Trình duyệt hiển thị Punycode khi một tên miền pha trộn các chữ viết, nhưng một URL được xây dựng thủ công trỏ đến аpple.com (а Cyrillic) mở một trang web khác với apple.com. Sử dụng Punycode (xn--...) để bảo mật, hoặc gắn bó với ASCII.
• Thêm // sau các lược đồ không sử dụng nó. mailto:, tel:, sms:, magnet: tất cả bỏ qua // và đi thẳng đến đường dẫn. mailto:user@example.com đúng; mailto://... không đúng.

Thêm câu hỏi thường gặp

Độ dài tối đa của URL là bao nhiêu?

RFC 3986 không đặt giới hạn. Trong thực tế: các trình duyệt giới hạn khoảng 2.000 ký tự cho thanh địa chỉ (Internet Explorer 11 là 2.083; Chrome và Firefox dung nạp lâu hơn nhưng cắt giảm hiển thị); hầu hết CDN và proxy giới hạn ở 4.096 hoặc 8.192; các máy chủ như Apache và Nginx mặc định ở 8.192 byte cho dòng yêu cầu. Nếu bạn cần hơn 2.000 ký tự, hãy chuyển sang body POST.

Tôi có thể bao gồm cùng một tham số truy vấn nhiều lần không?

Có. ?tag=red&tag=blue&tag=green là hợp lệ. Cách máy chủ diễn giải nó phụ thuộc vào framework: Express / Node.js phân tích thành req.query.tag = ['red', 'blue', 'green']; PHP cần quy ước dấu ngoặc ?tag[]=red&tag[]=blue; Rails phân tích thành một mảng nếu bạn sử dụng dấu ngoặc tag[]. Phương thức URLSearchParams.getAll('tag') luôn trả về tất cả các giá trị dưới dạng một mảng bất kể kiểu dấu ngoặc.

Các tham số truy vấn có ảnh hưởng đến SEO không?

Các tham số theo dõi (UTM, fbclid, gclid) thường không ảnh hưởng đến xếp hạng tìm kiếm tự nhiên. Rủi ro là lập chỉ mục nội dung trùng lặp: một URL được gắn thẻ và phiên bản sạch của nó trông như hai trang khác nhau đối với một trình thu thập thông tin. Cách khắc phục là một thẻ <link rel="canonical" href="clean-url"> chỉ mọi biến thể được gắn thẻ đến cùng một URL chuẩn.

Một Template URI là gì, và tôi có nên sử dụng nó không?

RFC 6570 (tháng 3 năm 2012) định nghĩa Template URI: một cú pháp cho các URL được tham số hóa với các trình giữ chỗ. Chúng được sử dụng trong các đặc tả OpenAPI / Swagger, JSON Hyper-Schema, và một số API HATEOAS. Đối với xây dựng URL hàng ngày, việc nối chuỗi đơn giản thông qua trình xây dựng này dễ hơn; Template URI tỏa sáng khi tài liệu hóa một bề mặt API và tạo SDK client.

Có gì được gửi đến máy chủ không?

Không. Mọi thành phần bạn nhập, mã hóa, và URL cuối cùng được xây dựng trong JavaScript của trình duyệt của bạn. Không có cuộc gọi mạng nào được thực hiện để lắp ráp URL. Mở tab Mạng trong DevTools và thử công cụ: bạn sẽ thấy không có yêu cầu đi ra trong quá trình xây dựng.