I want to take a snapshot of a page using headless chrome which will return a file to me, so I am creating an mht file as it will contain more information about the web page. So, now I want to render this snapshot inside an iframe but I am unable to do so.
<iframe src="file:///home/user/untitled1.mht"></iframe>
This is returning an error after it is rendered.
Attempted to load a multipart archive into an subframe
The loading of the content of an MHTML file inside an iframe is technically not possible for security reasons. Instead of re-hashing, here is the answer directly from a developer working on the Chromium project.
The alternative way is to dynamically load the HTML's content inside an iframe. This will NOT create any CORS issue as this is not technically linking directly to a third-party website URL.
Main HTML file:
<!DOCTYPE html>
<html lang="en">
<body>
<div>an iframe</div>
<iframe id="f1" width="100%" height="800px"></iframe>
<script src="test.js"></script>
</body>
</html>
JS file(test.js):
const htmlContent = `
<!DOCTYPE html>
<html lang="en">
<body>
<strong>Hello World</strong>
</body>
</html>
`
const htmlblob = new Blob([htmlContent], {
type: "text/html"
});
const frame = document.querySelector("#f1");
frame.src = URL.createObjectURL(htmlblob);
Alternatively, here's a JSfiddle.
