Skip to content

Commit 5df7ff7

Browse files
Renan Ferreirarenanvalentin
authored andcommitted
fix(react-dom): access iframe contentWindow instead of contentDocument
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
1 parent 103378b commit 5df7ff7

File tree

1 file changed

+20
-5
lines changed

1 file changed

+20
-5
lines changed

packages/react-dom/src/client/ReactInputSelection.js

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -40,15 +40,30 @@ function isInDocument(node) {
4040
);
4141
}
4242

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 throw an uncatchable error 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+
const canReadHrefAttribute = iframe.contentWindow.location.href;
54+
return canReadHrefAttribute != null;
55+
} catch (err) {
56+
return false;
57+
}
58+
}
59+
4360
function getActiveElementDeep() {
4461
let win = window;
4562
let element = getActiveElement();
4663
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) {
64+
if (isSameOriginFrame(element)) {
65+
win = element.contentWindow;
66+
} else {
5267
return element;
5368
}
5469
element = getActiveElement(win.document);

0 commit comments

Comments
 (0)