My problem is my iframe blocks my Javascript access, when I try to access to the content inside the <iframe>
of my subdomain(test.example.com:xx), xx is the line number of my code, look below the error.
Error:
Uncaught DOMException: Blocked a frame with origin "https://example.com" from accessing a cross-origin frame. at window.onload (https://example.com)
Here the code of https://example.com/index.html:
<!DOCTYPE html>
<html>
<body>
<iframe id="frames" src="https://test.example.com">
</iframe>
<script>
var x = document.getElementById("frames");
console.log(x);
window.onload = function() {
console.log(window.frames[0].document.body.innerHTML);
}
</script>
</body>
</html>
Here the code of my https://test.example.com/index.html:
<!DOCTYPE html>
<html>
<body>
<p>This is my test subdomain...<p>
</body>
</html>
And here the code of my .htaccess file, of both domains, my https://example.com and https://test.example.com:
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
Header always set x-frame-options "ALLOWALL"
Header always set Access-Control-Allow-Origin: "*"
Header always set Access-Control-Allow-Credentials: "true"
Header always set Access-Control-Allow-Methods: "POST, GET, OPTIONS"
Header always set Access-Control-Allow-Headers: "Content-Type"
Header always set Origin: "*"
What went wrong and how can I fix it?
Note: I'm using Chrome, Firefox and Safari, to test my sites, The error is produced in this line:
console.log(window.frames[0].document.body.innerHTML);