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.