I am developing a WordPress website for an IT school that is controlled by me.
I use external IDE iframe on my website. I would like to extract the student's code from iframe IDE and save it in my WP database.
Next time when a student wants to return to a page, I would like to extract his code from my database, and then replace the skeleton code with his code.
function extractIframeContent() {
var iframe = document.getElementById('myIframe');
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
var content = iframeDoc.documentElement.innerHTML;
console.log("content:" + content);
}<!DOCTYPE html>
<html>
<head>
<title>Extract Content from Iframe</title>
</head>
<body>
<iframe id="myIframe" src="https://trinket.io/embed/python3/4e8cf39550" width="100%" height="356" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen allow="cross-origin-isolated"></iframe>
<button onclick="extractIframeContent()">Extract Content</button>
</body>
</html>As a result, I take:
Blocked a frame with origin "http://localhost:63343" from accessing a cross-origin frame.
It occurs when I try to access the content of an iframe from a different origin (domain) using JavaScript. This error is a result of the Same-Origin Policy security restriction.
A moderator marked this question as a duplicate.
I don't agree because answers on that post assume only if you have control for both sites. In my case, I control only a website, not iframe src.
I found out that an iframe sends a request to its server. How can I read and replace the payload of it? Maybe you can suggest another workaround for it?
I don't understand why I can't extract the data that I have inserted?! Help me!
