Problem with embedding Atriculate360 content in an iframe- http request with header

Hello,

I'm trying to display content of an iframe with some Storyline360 embed in my React app. To get the content of the iframe in my app I have to make an API request to my backend. The request has to be done with an http header, so writing just <iframe src="https://url-of-my-app/ID-of-my-item/story.html"></iframe> will not work in my case.
I make a request to my api https://url-of-my-app/api/ID-of-my-item/story.html. I create a new iframe and set it's contents to what I get in response:

api.get('https://url-of-my-app/api/ID-of-my-item/story.html')
 .then((response) => {
 const iframe = this.iframeRef.current;
 iframe.contentWindow.contents = response.data;
 iframe.src = 'javascript:window["contents"]';
}

This solution doesn't work for the links to stylesheets and scripts inside the story.html. They use relative paths and in the resulting iframe their links look like for example:
<script src='https://url-of-my-app/story_content/user.js' type=text/javascript></script>
instead of
<script src=''https://url-of-my-app/api/ID-of-my-item/story_content/user.js" type=text/javascript></script>
They need to link to where the element is in the api ('/api/ID-of-my-item').
I tried using a <base> tag and inserting it inside the iframe programatically, but it doesn't seem to work correctly- I think there are javascript files imported by other js files within the content generated by articulate 360. In attachment I've added the Articulate 360 story I'm uploading in my app.
Please advise if contents of iframe can be set with Storyline360 embed instead of setting the src of the iframe directly.
If needed I will also provide the code where I insert the base tag into my iframe.

Maybe there is an alternative to using an iframe here?