1"use strict";(globalThis.webpackChunkbambuser_docs||=[]).push([[4373],{65722(e,r,n){n.r(r),n.d(r,{assets:()=>d,contentTitle:()=>t,default:()=>h,frontMatter:()=>a,metadata:()=>i,toc:()=>l});const i=JSON.parse('{"id":"troubleshooting/miniplayer-origins","title":"Our website has different domain/subdomain for different parts. Would Miniplayer work?","description":"Fix cross-origin frame access errors in Miniplayer across multiple domains/subdomains: CSP frame-ancestors \'self\' workaround; address bar won\'t change.","source":"@site/live/troubleshooting/miniplayer-origins.md","sourceDirName":"troubleshooting","slug":"/troubleshooting/miniplayer-different-origins","permalink":"/docs/live/troubleshooting/miniplayer-different-origins","draft":false,"unlisted":false,"tags":[{"inline":true,"label":"live","permalink":"/docs/live/tags/live"}],"version":"current","frontMatter":{"title":"Our website has different domain/subdomain for different parts. Would Miniplayer work?","description":"Fix cross-origin frame access errors in Miniplayer across multiple domains/subdomains: CSP frame-ancestors \'self\' workaround; address bar won\'t change.","slug":"miniplayer-different-origins","tags":["live"],"hide_table_of_contents":false}}');var s=n(74848),o=n(28453);const a={title:"Our website has different domain/subdomain for different parts. Would Miniplayer work?",description:"Fix cross-origin frame access errors in Miniplayer across multiple domains/subdomains: CSP frame-ancestors 'self' workaround; address bar won't change.",slug:"miniplayer-different-origins",tags:["live"],hide_table_of_contents:!1},t=void 0,d={},l=[{value:"Example Scenario - Cross-Origin Frame Access Error",id:"example-scenario---cross-origin-frame-access-error",level:2},{value:"What would happen",id:"what-would-happen",level:3},{value:"Problem",id:"problem",level:2},{value:"Workaround",id:"workaround",level:2},{value:"Workaround Limitation",id:"workaround-limitation",level:2}];function c(e){const r={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",hr:"hr",li:"li",ol:"ol",p:"p",strong:"strong",ul:"ul",...(0,o.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(r.admonition,{title:"recommendation",type:"note",children:(0,s.jsxs)(r.p,{children:["If your website consists of multiple subdomains that you control, miniplayer could work under certain circumstances, however, with limitations. Therefore, we do not recommend below approach. Instead, we suggest ",(0,s.jsx)(r.a,{href:"/live/miniplayer#disabling-the-miniplayer",children:"disabling the Miniplayer"})," to avoid these cross-origin issues."]})}),"\n",(0,s.jsx)(r.h2,{id:"example-scenario---cross-origin-frame-access-error",children:"Example Scenario - Cross-Origin Frame Access Error"}),"\n",(0,s.jsx)(r.p,{children:"Let's say your website consists of:"}),"\n",(0,s.jsxs)(r.ul,{children:["\n",(0,s.jsxs)(r.li,{children:[(0,s.jsx)(r.strong,{children:(0,s.jsx)(r.a,{href:"http://www.brand.com",children:"www.brand.com"})})," - where you embedded the player"]}),"\n",(0,s.jsxs)(r.li,{children:[(0,s.jsx)(r.strong,{children:"shop.brand.com"})," - where your product pages are linked from"]}),"\n"]}),"\n",(0,s.jsx)(r.h3,{id:"what-would-happen",children:"What would happen"}),"\n",(0,s.jsxs)(r.ol,{children:["\n",(0,s.jsxs)(r.li,{children:["The player is opened under the ",(0,s.jsx)(r.code,{children:"www.brand.com"})," domain (e.g., ",(0,s.jsx)(r.code,{children:"www.brand.com/live"}),")."]}),"\n",(0,s.jsxs)(r.li,{children:["An iframe is automatically created, which has the same URL as the current page (",(0,s.jsx)(r.code,{children:"www.brand.com/live"}),")."]}),"\n",(0,s.jsxs)(r.li,{children:["When a viewer clicks on a product, the player minimizes and tries to open the product URL (hosted under ",(0,s.jsx)(r.code,{children:"shop.brand.com"}),") in the iframe."]}),"\n",(0,s.jsxs)(r.li,{children:["Since the origin of the iframe parent is ",(0,s.jsx)(r.code,{children:"www.brand.com"}),", but the page rendered in it is from a cross-origin URL (",(0,s.jsx)(r.code,{children:"shop.brand.com"}),"), the browser may refuse to render that page in the iframe."]}),"\n",(0,s.jsx)(r.li,{children:"An error message appears inside the iframe."}),"\n",(0,s.jsx)(r.li,{children:"The same issue occurs for all navigations to cross-origin domains within the iframe."}),"\n"]}),"\n",(0,s.jsx)(r.hr,{}),"\n",(0,s.jsx)(r.h2,{id:"problem",children:"Problem"}),"\n",(0,s.jsx)(r.p,{children:"In the above example, the issue could arise because your server responses include a security header that prevents your website from being rendered in iframes with cross-origin parents. For example:"}),"\n",(0,s.jsxs)(r.ul,{children:["\n",(0,s.jsx)(r.li,{children:(0,s.jsx)(r.code,{children:"X-Frame-Options: SAMEORIGIN"})}),"\n",(0,s.jsx)(r.li,{children:(0,s.jsx)(r.code,{children:"Content-Security-Policy: frame-ancestors 'self';"})}),"\n"]}),"\n",(0,s.jsx)(r.hr,{}),"\n",(0,s.jsx)(r.h2,{id:"workaround",children:"Workaround"}),"\n",(0,s.jsxs)(r.p,{children:["To address this, you need to whitelist the origin of the iframe parent (",(0,s.jsx)(r.code,{children:"www.brand.com"})," or wherever the player is embedded) by updating the server response headers of the pages hosted on other domains (e.g., ",(0,s.jsx)(r.code,{children:"shop.brand.com"}),") as follows:"]}),"\n",(0,s.jsxs)(r.ul,{children:["\n",(0,s.jsx)(r.li,{children:(0,s.jsx)(r.code,{children:"Content-Security-Policy: frame-ancestors 'self' www.brand.com;"})}),"\n"]}),"\n",(0,s.jsx)(r.h2,{id:"workaround-limitation",children:"Workaround Limitation"}),"\n",(0,s.jsx)(r.p,{children:"Note that the address bar will not change when a user navigates to a different domain/subdomain due to web constraints."})]})}function h(e={}){const{wrapper:r}={...(0,o.R)(),...e.components};return r?(0,s.jsx)(r,{...e,children:(0,s.jsx)(c,{...e})}):c(e)}},28453(e,r,n){n.d(r,{R:()=>a,x:()=>t});var i=n(96540);const s={},o=i.createContext(s);function a(e){const r=i.useContext(o);return i.useMemo(function(){return"function"==typeof e?e(r):{...r,...e}},[r,e])}function t(e){let r;return r=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:a(e.components),i.createElement(o.Provider,{value:r},e.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.