# How to use a custom fetch function in an iframe

**URL:** <https://forum.solidproject.org/t/how-to-use-a-custom-fetch-function-in-an-iframe/5881>\
**Category:** Solid App Development FAQs\
**Created:** [November 26, 2022, 7:54am UTC](https://forum.solidproject.org/t/how-to-use-a-custom-fetch-function-in-an-iframe/5881 "2022-11-26T07:54:58Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![hochstenbach](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.solidproject.org/hochstenbach/32/2308_2.png) [@hochstenbach](https://forum.solidproject.org/u/hochstenbach)\
**Post date:** [November 26, 2022, 7:54am UTC](https://forum.solidproject.org/t/how-to-use-a-custom-fetch-function-in-an-iframe/5881/1 "2022-11-26T07:54:59Z")

</div>

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:

```auto
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?](https://forum.solidproject.org/t/how-to-add-inline-content-in-an-authenticated-solid-app/4929)

---

<div class="post-metadata">

**Author:** ![bourgeoa](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.solidproject.org/bourgeoa/32/291_2.png) [@bourgeoa](https://forum.solidproject.org/u/bourgeoa)\
**Post date:** [November 26, 2022, 9:41am UTC](https://forum.solidproject.org/t/how-to-use-a-custom-fetch-function-in-an-iframe/5881/2 "2022-11-26T09:41:15Z")

</div>

Could this be of help [Window.postMessage() - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage)

---

<div class="post-metadata">

**Author:** ![ThisIsMissEm](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.solidproject.org/thisismissem/32/3166_2.png) [@ThisIsMissEm](https://forum.solidproject.org/u/ThisIsMissEm)\
**Post date:** [November 26, 2022, 10:31am UTC](https://forum.solidproject.org/t/how-to-use-a-custom-fetch-function-in-an-iframe/5881/3 "2022-11-26T10:31:28Z")

</div>

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.