Let's say I have access to an index.html and within this page, I'm loading a contact.html as iframe.
I can manipulate this iframe and here's my code:
const myIframe = document.getElementById("myIframe");
const iframeDocument = myIframe.contentDocument;
iframeDocument.body.style.backgroundColor = "#ff0000";
I can change background color within this iframe, but what I need to do is to append JavaScript code to the <body> of this iframe document. I tried with innerHTML but it's not working.
The code that I need to append looks like this:
<script>
iframe(function (event) {
const frameTest = true;
if (!iframe) {
test(event);
} else {
testo(event);
}
</script>
It's important to add this code with tags and execute it later on.
Do you have any idea how to do it?
First, I created an empty page called bar.html
<html>
<head>
</head>
<body>
</body>
</html>
then created a foo.html page as well:
<html>
<head>
<script>
function load() {
const myIframe = document.getElementById("myIframe");
const iframeDocument = myIframe.contentWindow;
var script = document.createElement("script");
script.innerText = "alert(1)";
iframeDocument.document.body.appendChild(script);
}
</script>
</head>
<body onload="load()">
<iframe id="myIframe" src="/bar.html">
</body>
</html>
Please test this as a proof-of-concept