Manager: Resolve preview iframe URL against the document base URI

code/core/src/manager-api/modules/url.ts

@@ -57,6 +57,11 @@ const mergeSerializedParams = (params: string, extraParams: string) => {
     .join(';');
 };
 
+const resolveIframeUrl = (baseUrl: string, { absolute }: { absolute: boolean }): string => {
+  const resolved = new URL('iframe.html', baseUrl);
+  return absolute ? resolved.href : `${resolved.pathname}${resolved.search}${resolved.hash}`;
+};
+
 // URL query params the manager consumes for layout/navigation. Everything else is a custom param
 // passed through to the preview iframe. Listing the boundary once keeps customQueryParams derived
 // identically at init (initialUrlSupport) and on every navigation (root.tsx), so they can't diverge.
@@ -267,10 +272,10 @@ export const init: ModuleFn<SubAPI, SubState> = (moduleArgs) => {
       const networkAddress = global.STORYBOOK_NETWORK_ADDRESS ?? originAddress;
       const managerBase =
         base === 'origin' ? originAddress : base === 'network' ? networkAddress : pathname;
+      const previewBaseUrl = base ? managerBase : global.document?.baseURI || originAddress;
       const previewBase = refId
         ? refs[refId].url + '/iframe.html'
-        : global.PREVIEW_URL ||
-          `${managerBase.replace(/\/[^/]*\.html$/, '').replace(/\/?$/, '/')}iframe.html`;
+        : global.PREVIEW_URL || resolveIframeUrl(previewBaseUrl, { absolute: Boolean(base) });
 
       const refParam = refId ? `&refId=${encodeURIComponent(refId)}` : '';
       const { args = '', globals = '', ...otherParams } = queryParams;

code/core/src/manager-api/tests/url.test.js

@@ -22,6 +22,9 @@ vi.mock('@storybook/global', () => ({
         origin: 'http://localhost:6006',
       },
     },
+    document: {
+      baseURI: 'http://localhost:6006/',
+    },
     STORYBOOK_NETWORK_ADDRESS: 'http://192.168.1.1:6006/',
   },
 }));
@@ -324,6 +327,10 @@ describe('getStoryHrefs', () => {
     getState: () => state,
   };
 
+  beforeEach(() => {
+    global.document.baseURI = 'http://localhost:6006/';
+  });
+
   it('returns manager and preview URLs for a story', () => {
     const { api, state } = initURL({
       store,
@@ -542,28 +549,45 @@ describe('getStoryHrefs', () => {
       fullAPI: { getCurrentStoryData: () => ({ id: 'test--story' }) },
     });
     store.setState(state);
+    global.document.baseURI = 'http://localhost:6006/index.html';
 
     const { managerHref, previewHref } = api.getStoryHrefs('test--story');
     expect(managerHref).toEqual('/index.html?path=/story/test--story');
     expect(previewHref).toEqual('/iframe.html?id=test--story&viewMode=story');
   });
 
-  it('correctly links when hosted at a subpath without trailing slash', () => {
+  it('honors a custom <base href> for subpath hosting, independent of the router pathname (#33848)', () => {
     const { api, state } = initURL({
       store,
       provider: { channel: new EventEmitter() },
-      state: { location: { pathname: '/design-system', search: '' } },
+      state: { location: { pathname: '/', search: '' } },
       navigate: vi.fn(),
       fullAPI: { getCurrentStoryData: () => ({ id: 'test--story' }) },
     });
     store.setState(state);
+    global.document.baseURI = 'http://localhost:6006/design-system/';
 
-    const { managerHref, previewHref } = api.getStoryHrefs('test--story');
-    expect(managerHref).toEqual('/design-system?path=/story/test--story');
+    const { previewHref } = api.getStoryHrefs('test--story');
     expect(previewHref).toEqual('/design-system/iframe.html?id=test--story&viewMode=story');
   });
 
-  it('correctly links when hosted at a subpath with trailing slash', () => {
+  it('resolves to the parent directory at a subpath without a trailing slash', () => {
+    const { api, state } = initURL({
+      store,
+      provider: { channel: new EventEmitter() },
+      state: { location: { pathname: '/storybook', search: '' } },
+      navigate: vi.fn(),
+      fullAPI: { getCurrentStoryData: () => ({ id: 'test--story' }) },
+    });
+    store.setState(state);
+    global.document.baseURI = 'http://localhost:6006/storybook';
+
+    const { managerHref, previewHref } = api.getStoryHrefs('test--story');
+    expect(managerHref).toEqual('/storybook?path=/story/test--story');
+    expect(previewHref).toEqual('/iframe.html?id=test--story&viewMode=story');
+  });
+
+  it('correctly links when hosted at a subpath with a trailing slash', () => {
     const { api, state } = initURL({
       store,
       provider: { channel: new EventEmitter() },
@@ -572,13 +596,14 @@ describe('getStoryHrefs', () => {
       fullAPI: { getCurrentStoryData: () => ({ id: 'test--story' }) },
     });
     store.setState(state);
+    global.document.baseURI = 'http://localhost:6006/design-system/';
 
     const { managerHref, previewHref } = api.getStoryHrefs('test--story');
     expect(managerHref).toEqual('/design-system/?path=/story/test--story');
     expect(previewHref).toEqual('/design-system/iframe.html?id=test--story&viewMode=story');
   });
 
-  it('correctly links when hosted at a subpath with index.html', () => {
+  it('correctly links when hosted at a subpath served via index.html', () => {
     const { api, state } = initURL({
       store,
       provider: { channel: new EventEmitter() },
@@ -587,12 +612,60 @@ describe('getStoryHrefs', () => {
       fullAPI: { getCurrentStoryData: () => ({ id: 'test--story' }) },
     });
     store.setState(state);
+    global.document.baseURI = 'http://localhost:6006/design-system/index.html';
 
     const { managerHref, previewHref } = api.getStoryHrefs('test--story');
     expect(managerHref).toEqual('/design-system/index.html?path=/story/test--story');
     expect(previewHref).toEqual('/design-system/iframe.html?id=test--story&viewMode=story');
   });
 
+  it('keeps the full prefix for a nested subpath with a trailing slash', () => {
+    const { api, state } = initURL({
+      store,
+      provider: { channel: new EventEmitter() },
+      state: { location: { pathname: '/a/b/c/', search: '' } },
+      navigate: vi.fn(),
+      fullAPI: { getCurrentStoryData: () => ({ id: 'test--story' }) },
+    });
+    store.setState(state);
+    global.document.baseURI = 'http://localhost:6006/a/b/c/';
+
+    const { previewHref } = api.getStoryHrefs('test--story');
+    expect(previewHref).toEqual('/a/b/c/iframe.html?id=test--story&viewMode=story');
+  });
+
+  it('drops only the last segment for a nested subpath without a trailing slash', () => {
+    const { api, state } = initURL({
+      store,
+      provider: { channel: new EventEmitter() },
+      state: { location: { pathname: '/a/b/c', search: '' } },
+      navigate: vi.fn(),
+      fullAPI: { getCurrentStoryData: () => ({ id: 'test--story' }) },
+    });
+    store.setState(state);
+    global.document.baseURI = 'http://localhost:6006/a/b/c';
+
+    const { previewHref } = api.getStoryHrefs('test--story');
+    expect(previewHref).toEqual('/a/b/iframe.html?id=test--story&viewMode=story');
+  });
+
+  it('resolves absolute base URLs at a subpath', () => {
+    const { api, state } = initURL({
+      store,
+      provider: { channel: new EventEmitter() },
+      state: { location: { pathname: '/design-system/', search: '' } },
+      navigate: vi.fn(),
+      fullAPI: { getCurrentStoryData: () => ({ id: 'test--story' }) },
+    });
+    store.setState(state);
+
+    const origin = api.getStoryHrefs('test--story', { base: 'origin' });
+    expect(origin.previewHref).toContain('http://localhost:6006/design-system/iframe.html');
+
+    const network = api.getStoryHrefs('test--story', { base: 'network' });
+    expect(network.previewHref).toContain('http://192.168.1.1:6006/iframe.html');
+  });
+
   it('stays interactive by default (no freeze contract)', () => {
     const { api, state } = initURL({
       store,