When a same-origin frame is serialized, all of its content becomes relative to the frame parent.

In the example below, localhost:8080/bar/styles.css would be proper location of the stylesheet.

<!-- localhost:8080/foo -->
<iframe src="/bar"></iframe>

<!-- localhost:8080/bar -->
<link href="styles.css" rel="stylesheet"/>

After serializing, the resulting DOM would look like:

<!-- localhost:8080/foo -->
<iframe srcdoc="<link href=\"styles.css\" rel=\"stylesheet\"/>"></iframe>

And with that DOM, the stylesheet request will be interpreted as localhost:8080/foo/style.css. Which is incorrect. This issue might also be present if the embedded iframe is not same-origin but allows cross-origin resource sharing instead.

We can likely fix this, albeit a little heavy handed, by prepending all nested relative URLs with the iframe's src.

Open to other solutions as well