@samitouri / QOS-React / commits / 061d6ce3c0

fix(react-dom): access iframe contentWindow instead of contentDocument (#15099)

MDN has a list of methods for obtaining the window reference of an iframe: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage#Syntax fix(react-dom): check if iframe belongs to the same origin Accessing the contentDocument of a HTMLIframeElement can cause the browser to throw, e.g. if it has a cross-origin src attribute. Safari will show an error in the console when the access results in "Blocked a frame with origin". e.g: ```javascript try { $0.contentDocument.defaultView } catch (err) { console.log('err', err) } > Blocked a frame with origin X from accessing a frame with origin Y. Protocols, domains, and ports must match. > err – TypeError: null is not an object (evaluating '$0.contentDocument.defaultView') ``` A safety way is to access one of the cross origin properties: Window or Location Which might result in "SecurityError" DOM Exception and it is compatible to Safari. ```javascript try { $0.contentWindow.location.href } catch (err) { console.log('err', err) } > err – SecurityError: Blocked a frame with origin "http://localhost:3001" from accessing a cross-origin frame. Protocols, domains, and ports must match. ``` https://html.spec.whatwg.org/multipage/browsers.html#integration-with-idl

Renan Valentin committed Mar 20, 2019 at 14:11 UTC 061d6ce3c0310d3b7f2122ad216be01bc4eff956
1 file changed +19 -5
packages/react-dom/src/client/ReactInputSelection.js
+19 -5
@@ -40,15 +40,29 @@ function isInDocument(node) {
40 );
41 }
42
43 +function isSameOriginFrame(iframe) {
44 + try {
45 + // Accessing the contentDocument of a HTMLIframeElement can cause the browser
46 + // to throw, e.g. if it has a cross-origin src attribute.
47 + // Safari will show an error in the console when the access results in "Blocked a frame with origin". e.g:
48 + // iframe.contentDocument.defaultView;
49 + // A safety way is to access one of the cross origin properties: Window or Location
50 + // Which might result in "SecurityError" DOM Exception and it is compatible to Safari.
51 + // https://html.spec.whatwg.org/multipage/browsers.html#integration-with-idl
52 +
53 + return typeof iframe.contentWindow.location.href === 'string';
54 + } catch (err) {
55 + return false;
56 + }
57 +}
58 +
59 function getActiveElementDeep() {
60 let win = window;
61 let element = getActiveElement();
62 while (element instanceof win.HTMLIFrameElement) {
47 - // Accessing the contentDocument of a HTMLIframeElement can cause the browser
48 - // to throw, e.g. if it has a cross-origin src attribute
49 - try {
50 - win = element.contentDocument.defaultView;
51 - } catch (e) {
63 + if (isSameOriginFrame(element)) {
64 + win = element.contentWindow;
65 + } else {
66 return element;
67 }
68 element = getActiveElement(win.document);