1"use strict";(globalThis.webpackChunkbambuser_docs||=[]).push([[2915],{35078(e,r,n){n.r(r),n.d(r,{assets:()=>l,contentTitle:()=>a,default:()=>h,frontMatter:()=>t,metadata:()=>i,toc:()=>d});const i=JSON.parse('{"id":"troubleshooting/miniplayer-origins","title":"Our website has different domain/subdomain for different parts. Would Miniplayer work?","description":"Different subdomains break Miniplayer/Cobrowsing/Surf-While-In-Queue with cross-origin frame errors; SAMEORIGIN/frame-ancestors \'self\' cause; relax workaround.","source":"@site/video-consultation/troubleshooting/miniplayer-origins.md","sourceDirName":"troubleshooting","slug":"/troubleshooting/miniplayer-different-origins","permalink":"/docs/video-consultation/troubleshooting/miniplayer-different-origins","draft":false,"unlisted":false,"tags":[{"inline":true,"label":"video consultation","permalink":"/docs/video-consultation/tags/video-consultation"}],"version":"current","frontMatter":{"title":"Our website has different domain/subdomain for different parts. Would Miniplayer work?","description":"Different subdomains break Miniplayer/Cobrowsing/Surf-While-In-Queue with cross-origin frame errors; SAMEORIGIN/frame-ancestors \'self\' cause; relax workaround.","slug":"miniplayer-different-origins","tags":["video consultation"],"hide_table_of_contents":false}}');var o=n(74848),s=n(28453);const t={title:"Our website has different domain/subdomain for different parts. Would Miniplayer work?",description:"Different subdomains break Miniplayer/Cobrowsing/Surf-While-In-Queue with cross-origin frame errors; SAMEORIGIN/frame-ancestors 'self' cause; relax workaround.",slug:"miniplayer-different-origins",tags:["video consultation"],hide_table_of_contents:!1},a=void 0,l={},d=[{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,s.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(r.admonition,{title:"recommendation",type:"note",children:[(0,o.jsxs)(r.p,{children:["If your website consists of multiple subdomains that you control, Video Consultation could work under certain circumstances, however, with limitations. Therefore, we do not recommend below approach. Instead, we suggest ",(0,o.jsx)(r.strong,{children:"disabling"})," below features to avoid these cross-origin issues.:"]}),(0,o.jsxs)(r.ul,{children:["\n",(0,o.jsx)(r.li,{children:(0,o.jsx)(r.a,{href:"/video-consultation/floating-player#miniplayer-faq",children:"Miniplayer"})}),"\n",(0,o.jsxs)(r.li,{children:[(0,o.jsx)(r.a,{href:"/video-consultation/cobrowsing",children:"Cobrowsing"})," - Bambuser setting, reach out to Bambuser contact for that"]}),"\n",(0,o.jsxs)(r.li,{children:[(0,o.jsx)(r.a,{href:"/video-consultation/surf-while-in-queue",children:"Minimized Calls Widget"})," - Bambuser setting, reach out to Bambuser contact for that"]}),"\n",(0,o.jsxs)(r.li,{children:[(0,o.jsx)(r.a,{href:"/video-consultation/initial-setup#calls-widget-positioning",children:"Calls Widget navigation"})," - Bambuser setting, reach out to Bambuser contact for that"]}),"\n"]})]}),"\n",(0,o.jsx)(r.h2,{id:"example-scenario---cross-origin-frame-access-error",children:"Example Scenario - Cross-Origin Frame Access Error"}),"\n",(0,o.jsx)(r.p,{children:"Let's say your website consists of:"}),"\n",(0,o.jsxs)(r.ul,{children:["\n",(0,o.jsxs)(r.li,{children:[(0,o.jsx)(r.strong,{children:(0,o.jsx)(r.a,{href:"http://www.brand.com",children:"www.brand.com"})})," - where you embedded the player"]}),"\n",(0,o.jsxs)(r.li,{children:[(0,o.jsx)(r.strong,{children:"shop.brand.com"})," - where your product pages are linked from"]}),"\n"]}),"\n",(0,o.jsx)(r.h3,{id:"what-would-happen",children:"What would happen"}),"\n",(0,o.jsxs)(r.ol,{children:["\n",(0,o.jsxs)(r.li,{children:["The Call Widget is opened under the ",(0,o.jsx)(r.code,{children:"www.brand.com"})," domain (e.g., ",(0,o.jsx)(r.code,{children:"www.brand.com/call"}),")."]}),"\n",(0,o.jsxs)(r.li,{children:["An iframe is automatically created, which has the same URL as the current page (",(0,o.jsx)(r.code,{children:"www.brand.com/call"}),")."]}),"\n",(0,o.jsxs)(r.li,{children:["When a viewer clicks on a product, the Call widget tries to open the product URL (hosted under ",(0,o.jsx)(r.code,{children:"shop.brand.com"}),") in the iframe."]}),"\n",(0,o.jsxs)(r.li,{children:["Since the origin of the iframe parent is ",(0,o.jsx)(r.code,{children:"www.brand.com"}),", but the page rendered in it is from a cross-origin URL (",(0,o.jsx)(r.code,{children:"shop.brand.com"}),"), the browser may refuse to render that page in the iframe."]}),"\n",(0,o.jsx)(r.li,{children:"An error message appears inside the iframe."}),"\n",(0,o.jsx)(r.li,{children:"The same issue occurs for all navigations to cross-origin domains within the iframe."}),"\n"]}),"\n",(0,o.jsx)(r.hr,{}),"\n",(0,o.jsx)(r.h2,{id:"problem",children:"Problem"}),"\n",(0,o.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,o.jsxs)(r.ul,{children:["\n",(0,o.jsx)(r.li,{children:(0,o.jsx)(r.code,{children:"X-Frame-Options: SAMEORIGIN"})}),"\n",(0,o.jsx)(r.li,{children:(0,o.jsx)(r.code,{children:"Content-Security-Policy: frame-ancestors 'self';"})}),"\n"]}),"\n",(0,o.jsx)(r.hr,{}),"\n",(0,o.jsx)(r.h2,{id:"workaround",children:"Workaround"}),"\n",(0,o.jsxs)(r.p,{children:["To address this, you need to whitelist the origin of the iframe parent (",(0,o.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,o.jsx)(r.code,{children:"shop.brand.com"}),") as follows:"]}),"\n",(0,o.jsxs)(r.ul,{children:["\n",(0,o.jsx)(r.li,{children:(0,o.jsx)(r.code,{children:"Content-Security-Policy: frame-ancestors 'self' www.brand.com;"})}),"\n"]}),"\n",(0,o.jsx)(r.h2,{id:"workaround-limitation",children:"Workaround Limitation"}),"\n",(0,o.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,s.R)(),...e.components};return r?(0,o.jsx)(r,{...e,children:(0,o.jsx)(c,{...e})}):c(e)}},28453(e,r,n){n.d(r,{R:()=>t,x:()=>a});var i=n(96540);const o={},s=i.createContext(o);function t(e){const r=i.useContext(s);return i.useMemo(function(){return"function"==typeof e?e(r):{...r,...e}},[r,e])}function a(e){let r;return r=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:t(e.components),i.createElement(s.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.