在 iframe 中加载 React 应用程序时删除功能策略

Question

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.

Answer 1

So apparently React (or my version) doesn't know about or process some attributes in iframe, allow being one of them. However, I managed to resolve it by passing the iframe element into dangerouslySetInnerHTML attribute of the parent .