fix: resolve relative URLs against location.href (#2471)

Author: kettanaito

src/browser/utils/getAbsoluteWorkerUrl.test.ts

@@ -1,6 +1,4 @@
-/**
- * @vitest-environment jsdom
- */
+// @vitest-environment jsdom
 import { getAbsoluteWorkerUrl } from './getAbsoluteWorkerUrl'
 
 const rawLocation = window.location

src/core/utils/url/getAbsoluteUrl.test.ts

@@ -1,29 +1,47 @@
-/**
- * @vitest-environment jsdom
- */
+// @vitest-environment jsdom
 import { getAbsoluteUrl } from './getAbsoluteUrl'
 
-it('rebases a relative URL against the current "baseURI" (default)', () => {
-  expect(getAbsoluteUrl('/reviews')).toEqual('http://localhost/reviews')
+const rawLocation = window.location
+
+afterAll(() => {
+  Object.defineProperty(window, 'location', {
+    value: rawLocation,
+  })
+})
+
+it('resolves a relative URL against the current location (default)', () => {
+  expect(getAbsoluteUrl('/reviews')).toBe('http://localhost/reviews')
+})
+
+it('supports relative URLs starting with search parameters', () => {
+  Object.defineProperty(window, 'location', {
+    value: {
+      href: 'http://localhost/nested',
+    },
+  })
+
+  expect(getAbsoluteUrl('?resourceId=abc-123')).toBe(
+    'http://localhost/nested?resourceId=abc-123',
+  )
 })
 
-it('rebases a relative URL against a custom base URL', () => {
-  expect(getAbsoluteUrl('/user', 'https://api.github.com')).toEqual(
+it('resolves a relative URL against a custom base URL', () => {
+  expect(getAbsoluteUrl('/user', 'https://api.github.com')).toBe(
     'https://api.github.com/user',
   )
 })
 
 it('returns a given absolute URL as-is', () => {
-  expect(getAbsoluteUrl('https://api.mswjs.io/users')).toEqual(
+  expect(getAbsoluteUrl('https://api.mswjs.io/users')).toBe(
     'https://api.mswjs.io/users',
   )
 })
 
 it('returns an absolute URL given a relative path without a leading slash', () => {
-  expect(getAbsoluteUrl('users')).toEqual('http://localhost/users')
+  expect(getAbsoluteUrl('users')).toBe('http://localhost/users')
 })
 
 it('returns a path with a pattern as-is', () => {
-  expect(getAbsoluteUrl(':api/user')).toEqual('http://localhost/:api/user')
-  expect(getAbsoluteUrl('*/resource/*')).toEqual('*/resource/*')
+  expect(getAbsoluteUrl(':api/user')).toBe('http://localhost/:api/user')
+  expect(getAbsoluteUrl('*/resource/*')).toBe('*/resource/*')
 })

src/core/utils/url/getAbsoluteUrl.ts

@@ -16,8 +16,7 @@ export function getAbsoluteUrl(path: string, baseUrl?: string): string {
 
   // Resolve a relative request URL against a given custom "baseUrl"
   // or the document baseURI (in the case of browser/browser-like environments).
-  const origin =
-    baseUrl || (typeof document !== 'undefined' && document.baseURI)
+  const origin = baseUrl || (typeof location !== 'undefined' && location.href)
 
   return origin
     ? // Encode and decode the path to preserve escaped characters.

test/browser/rest-api/request/matching/uri.mocks.ts

@@ -23,6 +23,14 @@ const worker = setupWorker(
   http.get(`/resource\\('id'\\)`, () => {
     return HttpResponse.json({ mocked: true })
   }),
+
+  http.get('./', ({ request }) => {
+    const url = new URL(request.url)
+
+    if (url.searchParams.has('resourceId')) {
+      return HttpResponse.json({ mocked: true })
+    }
+  }),
 )
 
 worker.start()

test/browser/rest-api/request/matching/uri.test.ts

@@ -6,11 +6,11 @@ test('matches an exact string with the same request URL with a trailing slash',
 }) => {
   await loadExample(require.resolve('./uri.mocks.ts'))
 
-  const res = await fetch('https://api.github.com/made-up/')
+  const response = await fetch('https://api.github.com/made-up/')
 
-  expect(res.status()).toEqual(200)
-  expect(res.fromServiceWorker()).toBe(true)
-  expect(await res.json()).toEqual({
+  expect(response.status()).toEqual(200)
+  expect(response.fromServiceWorker()).toBe(true)
+  await expect(response.json()).resolves.toEqual({
     mocked: true,
   })
 })
@@ -22,9 +22,11 @@ test('does not match an exact string with a different request URL with a trailin
 }) => {
   await loadExample(require.resolve('./uri.mocks.ts'))
 
-  const res = await page.evaluate(() => fetch('https://api.github.com/other/'))
+  const response = await page.evaluate(() =>
+    fetch('https://api.github.com/other/'),
+  )
 
-  expect(res.status).not.toBe(200)
+  expect(response.status).not.toBe(200)
 })
 
 test('matches an exact string with the same request URL without a trailing slash', async ({
@@ -33,11 +35,11 @@ test('matches an exact string with the same request URL without a trailing slash
 }) => {
   await loadExample(require.resolve('./uri.mocks.ts'))
 
-  const res = await fetch('https://api.github.com/made-up')
+  const response = await fetch('https://api.github.com/made-up')
 
-  expect(res.status()).toEqual(200)
-  expect(res.fromServiceWorker()).toBe(true)
-  expect(await res.json()).toEqual({
+  expect(response.status()).toEqual(200)
+  expect(response.fromServiceWorker()).toBe(true)
+  await expect(response.json()).resolves.toEqual({
     mocked: true,
   })
 })
@@ -49,9 +51,11 @@ test('does not match an exact string with a different request URL without a trai
 }) => {
   await loadExample(require.resolve('./uri.mocks.ts'))
 
-  const res = await page.evaluate(() => fetch('https://api.github.com/other'))
+  const response = await page.evaluate(() =>
+    fetch('https://api.github.com/other'),
+  )
 
-  expect(res.status).not.toBe(200)
+  expect(response.status).not.toBe(200)
 })
 
 test('matches a mask against a matching request URL', async ({
@@ -60,11 +64,11 @@ test('matches a mask against a matching request URL', async ({
 }) => {
   await loadExample(require.resolve('./uri.mocks.ts'))
 
-  const res = await fetch('https://test.mswjs.io/messages/abc-123')
+  const response = await fetch('https://test.mswjs.io/messages/abc-123')
 
-  expect(res.status()).toEqual(200)
-  expect(res.fromServiceWorker()).toBe(true)
-  expect(await res.json()).toEqual({
+  expect(response.status()).toEqual(200)
+  expect(response.fromServiceWorker()).toBe(true)
+  await expect(response.json()).resolves.toEqual({
     messageId: 'abc-123',
   })
 })
@@ -75,13 +79,13 @@ test('ignores query parameters when matching a mask against a matching request U
 }) => {
   await loadExample(require.resolve('./uri.mocks.ts'))
 
-  const res = await fetch(
+  const response = await fetch(
     'https://test.mswjs.io/messages/abc-123/items?hello=true',
   )
 
-  expect(res.status()).toEqual(200)
-  expect(res.fromServiceWorker()).toBe(true)
-  expect(await res.json()).toEqual({
+  expect(response.status()).toEqual(200)
+  expect(response.fromServiceWorker()).toBe(true)
+  await expect(response.json()).resolves.toEqual({
     messageId: 'abc-123',
   })
 })
@@ -93,11 +97,11 @@ test('does not match a mask against a non-matching request URL', async ({
 }) => {
   await loadExample(require.resolve('./uri.mocks.ts'))
 
-  const res = await page.evaluate(() =>
+  const response = await page.evaluate(() =>
     fetch('https://test.mswjs.io/users/def-456').catch(() => null),
   )
 
-  expect(res).toBeNull()
+  expect(response).toBeNull()
 })
 
 test('matches a RegExp against a matching request URL', async ({
@@ -106,11 +110,11 @@ test('matches a RegExp against a matching request URL', async ({
 }) => {
   await loadExample(require.resolve('./uri.mocks.ts'))
 
-  const res = await fetch('https://mswjs.google.com/path')
+  const response = await fetch('https://mswjs.google.com/path')
 
-  expect(res.status()).toEqual(200)
-  expect(res.fromServiceWorker()).toBe(true)
-  expect(await res.json()).toEqual({
+  expect(response.status()).toEqual(200)
+  expect(response.fromServiceWorker()).toBe(true)
+  await expect(response.json()).resolves.toEqual({
     mocked: true,
   })
 })
@@ -122,11 +126,11 @@ test('does not match a RegExp against a non-matching request URL', async ({
 }) => {
   await loadExample(require.resolve('./uri.mocks.ts'))
 
-  const res = await page.evaluate(() =>
+  const response = await page.evaluate(() =>
     fetch('https://mswjs.google.com/other').catch(() => null),
   )
 
-  expect(res).toBeNull()
+  expect(response).toBeNull()
 })
 
 test('supports escaped parentheses in the request URL', async ({
@@ -135,11 +139,26 @@ test('supports escaped parentheses in the request URL', async ({
 }) => {
   await loadExample(require.resolve('./uri.mocks.ts'))
 
-  const res = await fetch(`/resource('id')`)
+  const response = await fetch(`/resource('id')`)
+
+  expect(response.status()).toEqual(200)
+  expect(response.fromServiceWorker()).toBe(true)
+  await expect(response.json()).resolves.toEqual({
+    mocked: true,
+  })
+})
+
+test('matches a relative URL starting with search parameters', async ({
+  loadExample,
+  fetch,
+}) => {
+  await loadExample(require.resolve('./uri.mocks.ts'))
+
+  const response = await fetch('?resourceId=abc-123')
 
-  expect(res.status()).toEqual(200)
-  expect(res.fromServiceWorker()).toBe(true)
-  expect(await res.json()).toEqual({
+  expect(response.status()).toEqual(200)
+  expect(response.fromServiceWorker()).toBe(true)
+  await expect(response.json()).resolves.toEqual({
     mocked: true,
   })
 })