I'm adding a feature to a react app (app A) which loads microservices in different tabs. This is a legacy system and achieves this by using <iframe src="..."> returned as a component and consumed with <Route>.

Now the source in question loaded in the iframe also happens to be a react app (app B). When I run App B standalone and log document.featurePolicy.allowedFeatures() I see 46 items, 'microphone' included. The result of the same log after being loaded in App A's iframe is 6 items: ['picture-in-picture', 'document-domain', 'sync-xhr', 'ch-ua-platform', 'ch-ua-mobile', 'ch-ua']. I have tried logging the allowed features in App A (before it loads the iframe) and it results in 46 items. So somewhere between App A calling the iframe and App B loading itself, we are losing features.

I have searched for solutions for a while now, I have tried this on chrome and firefox and I have tried using allow='microphone' in the iframe with * and the src url but no luck. For context, here is a highlighted screenshot of the properties structure of the iframe: resulting iframe prop structure

Any ideas what might be dropping the policies or how I might be able to enforce them in App B, seeing as I can't seem to apply them via App A's iframe.

Update: I have tried explicitly adding Feature-Policy and Permissions-Policy response headers to App A (tried multiple sources for validation) but I still get the same result of them being dropped in transit to App B

Update: I have also tried other iframe properties (allowFullscreen, tabIndex, etc) and can confirm they work, but anything under allow seems to leave an empty string in the rendered properties and pushes it into reactInternalInstance.currentElement.props as shown in the screenshot. When I use allowFullscreen this also adds 1 extra item to the allowedFeatures() array in App B so that means the iframe's feature policies can be modified from App A.