<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong><br>
Bug</p>
<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto">Our application has credit card input fields hosted in iframes and we make use of <code class="notranslate">postMessage</code> restricted to a <code class="notranslate">targetOrigin</code>.</p>
<p dir="auto">The problem is that <code class="notranslate">ReactInputSelection</code> tries to access the <code class="notranslate">contentDocument</code> of the iframe but this result in a security violation on iOS, breaking the post message flow.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// react-dom/src/client/ReactInputSelection.js
function getActiveElementDeep() {
  let win = window;
  let element = getActiveElement();
  while (element instanceof win.HTMLIFrameElement) {
    // Accessing the contentDocument of a HTMLIframeElement can cause the browser
    // to throw, e.g. if it has a cross-origin src attribute
    try {
      win = element.contentDocument.defaultView;
    } catch (e) {
      return element;
    }
    element = getActiveElement(win.document);
  }
  return element;
}"><pre class="notranslate"><span class="pl-c">// react-dom/src/client/ReactInputSelection.js</span>
<span class="pl-k">function</span> <span class="pl-en">getActiveElementDeep</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-k">let</span> <span class="pl-s1">win</span> <span class="pl-c1">=</span> <span class="pl-smi">window</span><span class="pl-kos">;</span>
  <span class="pl-k">let</span> <span class="pl-s1">element</span> <span class="pl-c1">=</span> <span class="pl-en">getActiveElement</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-k">while</span> <span class="pl-kos">(</span><span class="pl-s1">element</span> <span class="pl-k">instanceof</span> <span class="pl-s1">win</span><span class="pl-kos">.</span><span class="pl-c1">HTMLIFrameElement</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-c">// Accessing the contentDocument of a HTMLIframeElement can cause the browser</span>
    <span class="pl-c">// to throw, e.g. if it has a cross-origin src attribute</span>
    <span class="pl-k">try</span> <span class="pl-kos">{</span>
      <span class="pl-s1">win</span> <span class="pl-c1">=</span> <span class="pl-s1">element</span><span class="pl-kos">.</span><span class="pl-c1">contentDocument</span><span class="pl-kos">.</span><span class="pl-c1">defaultView</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span> <span class="pl-k">catch</span> <span class="pl-kos">(</span><span class="pl-s1">e</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-k">return</span> <span class="pl-s1">element</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>
    <span class="pl-s1">element</span> <span class="pl-c1">=</span> <span class="pl-en">getActiveElement</span><span class="pl-kos">(</span><span class="pl-s1">win</span><span class="pl-kos">.</span><span class="pl-c1">document</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>
  <span class="pl-k">return</span> <span class="pl-s1">element</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">This seems to work fine in most of the major browsers except on <code class="notranslate">iOS 11.2.1</code>.<br>
By changing the code bellow to use <code class="notranslate">contentWindow</code> instead fixed the issue:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content=" // This results in 'Blocked a frame with origin' on iOS 
 // and the post messages are not being sent
 win = element.contentDocument.defaultView;

 // fix the issue
 win = element.contentWindow;"><pre class="notranslate"> <span class="pl-c">// This results in 'Blocked a frame with origin' on iOS </span>
 <span class="pl-c">// and the post messages are not being sent</span>
 <span class="pl-s1">win</span> <span class="pl-c1">=</span> <span class="pl-s1">element</span><span class="pl-kos">.</span><span class="pl-c1">contentDocument</span><span class="pl-kos">.</span><span class="pl-c1">defaultView</span><span class="pl-kos">;</span>

 <span class="pl-c">// fix the issue</span>
 <span class="pl-s1">win</span> <span class="pl-c1">=</span> <span class="pl-s1">element</span><span class="pl-kos">.</span><span class="pl-c1">contentWindow</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">Steps to reproduce:<br>
1 - Connect your phone to Safari's developer tools<br>
2 - Visit the code sandbox sample at <a href="https://codesandbox.io/s/vv8w1zwm90" rel="nofollow">https://codesandbox.io/s/vv8w1zwm90</a><br>
3 - Tap on the <code class="notranslate">input field</code> hosted on codepen<br>
4 - Tap on the <code class="notranslate">console</code> tab on code sandbox<br>
5 - It should log <code class="notranslate">Blocked a frame with origin "https://codesandbox.io" from accessing a frame with origin "https://vv8w1zwm90.codesandbox.io". Protocols, domains, and ports must match</code></p>
<p dir="auto"><strong>What is the expected behavior?</strong><br>
Accessing an iframe should not result into cross origin security error.</p>
<p dir="auto"><strong>Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?</strong></p>
<p dir="auto">React 16.8.4<br>
iOS 11.2.1</p>
<p dir="auto">hey folks, looks like <a href="https://github.com/facebook/react/commit/b565f495319750d98628425d120312997bee410b">this code</a> added small issue with safari and it could flood devtools console output with messages like this:<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/778908/47569863-0e3a5c80-d935-11e8-8e59-8d95d35ba131.png"><img width="875" alt="screenshot 2018-10-26 at 15 25 33" src="https://user-images.githubusercontent.com/778908/47569863-0e3a5c80-d935-11e8-8e59-8d95d35ba131.png" style="max-width: 100%;"></a><br>
As I understand it happens <a href="https://github.com/facebook/react/commit/b565f495319750d98628425d120312997bee410b#diff-a654f37b01573fc8006b426d56ad53ceR50">here</a> and I see you catch the error, but safari still adds the error message if you have iframes with different origin</p>