Prompt and Applicable Context
A Service Worker must intercept only same-origin image and document routes and extract tenant and resource IDs. Design a URLPattern matcher covering component boundaries, groups, case rules, and unsupported-browser fallback.
URLPattern is a standardized URL pattern matcher for protocol, host, port, pathname, search, and hash components, with named or numbered capture groups. It is useful for routing, Service Worker caching, and edge rules, but a match is not authorization and does not replace normalization or access checks.
What the Interviewer Evaluates
Cover component matching instead of whole-string matching, wildcard and group syntax, baseURL for relative patterns, per-component case behavior, the trust boundary of captures, compile failures, and cross-browser compatibility.
Clarifying Questions
Confirm allowed protocols, hosts, and ports; whether paths are case-sensitive; whether search parameters participate; and whether tenant and resource IDs must be complete. Also confirm page, Service Worker, or Worker context, browser support, and whether a match affects caching or security decisions.
30-Second Answer Framework
“I would fix protocol, host, and port components, use named groups only in the path, and set an explicit baseURL for relative patterns. Compile-time construction catches syntax errors; at runtime I would match the complete URL, enforce same-origin, then use captures for routing or cache keys. URLPattern provides matching, not authorization. Unsupported browsers get a limited URL-component fallback covered by the same tests, not a broad regex that reimplements URL semantics.”
Step-by-Step Deep Dive
Step 1: Build a component-aware pattern
URLPattern accepts an object with protocol, hostname, port, pathname, search, and hash, or a URL-style string. Security-sensitive routes should fix protocol and host instead of accepting any origin that happens to share a path.
Step 2: Use named capture groups
Named path groups can be read from the exec() result and mapped to tenant and resource fields. A capture proves only that the string has the expected shape; validate its character set, length, and business existence separately.
const assetPattern = new URLPattern({
protocol: "https",
hostname: "cdn.example.com",
pathname: "/tenant/:tenantId/assets/:assetId.:ext",
});
const match = assetPattern.exec(request.url);
const assetId = match?.pathname.groups.assetId;Step 3: Define wildcard and separator boundaries
A wildcard matches characters within its component; do not assume it crosses path separators or covers search parameters automatically. Write each hierarchy level explicitly and test empty values, extra slashes, and encoded characters.
Step 4: Understand baseURL and relative patterns
A relative pattern needs a baseURL to resolve protocol, host, and other components. Different environments can therefore produce different matchers. Fix the base at construction and test development, preview, and production domains.
Step 5: Handle case and normalization rules
URL components have different case rules. Hostnames are generally case-insensitive, while paths and other components may be case-sensitive. Do not lowercase the entire URL before matching because that can change a resource path or signature input.
Step 6: Separate matching from authorization
URLPattern does not prove that a tenant belongs to the user or that a resource is readable. After matching, enforce origin, authentication, authorization, cache isolation, and response type checks. A captured tenant ID remains untrusted input.
Step 7: Compile errors and runtime cost
Patterns parse during construction, so invalid syntax should fail during startup or registration rather than on the first request. Reuse compiled instances instead of constructing one per request, and measure matching cost against real URL distributions on hot paths.
Step 8: Design a compatibility fallback
An unsupported environment can use new URL() and check only the components the business needs. Do not use a broad regex to reproduce protocol, host, encoding, and search parsing. The fallback must share the native matcher’s test vectors.
High-Quality Sample Answer
I would construct a URLPattern with fixed https, a fixed CDN host, and explicit path components, using named groups for tenant and resource IDs. A Service Worker would match the complete URL, then enforce same-origin, authentication, and cache partitioning; captures remain untrusted strings and still need length, character-set, and authorization checks. Construct the pattern once and fail fast on syntax errors. Fix the baseURL to the deployment domain and test case differences, encoded slashes, extra search parameters, and each environment. Older browsers use a limited URL component fallback, never a broad regex that claims to reproduce full URL semantics.
Common Mistakes
Matching only pathname and assuming same-origin
Any protocol or host could pass the same path. A security-sensitive matcher must fix origin components and recheck request origin at runtime.
Treating captures as validated IDs
Captures prove shape only. Validate character set, length, tenant ownership, resource existence, and authorization.
Lowercasing or regex-normalizing every URL
Component case and encoding semantics differ. Whole-string lowercasing can break paths and signatures, while a broad regex can cross separators or miss search rules.
Follow-Up Questions and Responses
How do you prevent a development baseURL from reaching production?
Inject the baseURL as deployment configuration, validate allowed protocols and hosts at startup, and fix production domains in build and end-to-end tests. Never derive a security matcher base from a user-controlled URL.
How would you support an optional file extension?
Use the pattern syntax's optional group and test the extension, no extension, extra dots, and encoded characters separately. When the capture is absent, choose an explicit content type and cache policy.
How can URLPattern coexist with a routing library?
Let URLPattern do fast edge or Service Worker filtering, and let the application router perform full navigation and parameter validation. Share URL contract tests so both layers interpret a route identically.