How to use a custom fetch function in an iframe

Build a Solid App Solid App Development FAQs
1

Is it possible to pass a custom fetch function to an HTML iframe?

I would like to retrieve a private HTML document from a Pod and render it in an iframe. Retrieving the documents with the Solid API and putting it in an iframe is not the problem. But, the HTML could contain all kind of links, images, stylesheets that reference other private content on the Solid server. It seems a hassle to parse the whole HTML, trying to find all those references and replace them with javascript into authenticated versions (is there a tool that can do that easily?).

My naive idea was to provide the iframe with the custom Solid fetch function and it will use that one to retrieve more content.

This didn’t work:

document.getElementById('myFrame').contentWindow.fetch = mySolidAuthFetch;

Are there other javascript solutions/projects that provide a “browser-in-a-browser” experience with a custom fetch api? I tried MashLib but also there I could view all the individual private files that make up a HTML page, but not a rendering of the private HTML page (plus all private resources) itself.

This is a bit related to How to add inline content in an authenticated Solid App?

2

Could this be of help Window.postMessage() - Web APIs | MDN

1 Like
3

To be honest, passing the parent document authenticated fetch down to an untrusted iframe would likely pose a security risk, if you don’t trust the html, then why would you trust any scripts it contains to be safe to run in an authenticated context against your pod? It could potentially do anything

Though, your code snippet should work, it actually won’t for now due to a bug in cross-fetch, if you’re using @inrupt/solid-client-authn-browser, as cross-fetch quietly, and accidentally (I think), started to use an XMLHttpRequest polyfill for all fetch calls, even if the fetch API exists.

We’re working on Node.js 18 support, and part of that work is replacing cross-fetch with a better fetch polyfill / shim which will prefer the built-in fetch global if it exists. That would then, in theory, make the code above work, but I really wouldn’t recommend it, and you’ll likely face Content-Security-Policy issues too.

1 Like