I am new to writing UI and React code, I started on a bug in our product, where feature policies (see Using_Feature_Policy) do not work when I replace iFrame.contentWindow.location with my iFrame URL, which supports that feature.

For example, if I want to use the wake lock API, which is supported by my other service, running on say http://localhost:3000, this is what I have in my React component:

function App() {
  useEffect(() => {
    let iframeRef = document.getElementById('iframe');
    iframeRef.contentWindow.location.replace('http://localhost:3000');
  });
  return (
    <div>
      <iframe id = 'iframe' allow='screen-wake-lock'/>
    </div>
  );
}

When I do the above, I get this error:

Screen Wake Lock Error: NotAllowedError: Failed to execute 'request' on 'WakeLock': Access to Screen Wake Lock features is disallowed by permissions policy

Clearly, it seems that the iframe doesn't get the required permission 'screen-wake-lock' I enabled in the iframe, in my code, in the allow attribute.

However, when I inspect the iframe in the dev console, I see that the allow list has this feature:

<iframe id="iframe" allow="screen-wake-lock"></iframe>

Now, if I change the code to the following:

    function App() {
      useEffect(() => {
        let iframeRef = document.getElementById('iframe');
        iframeRef.src = 'http://localhost:3000';
      });
      return (
        <div>
          <iframe id = 'iframe' allow='screen-wake-lock'/>
        </div>
      );
    }

It just works. I was wondering what is the difference, and how do I get my feature working in the iframe, when I use contentWindow.location.replace.