there is an api response in a website which can't be accessed outside this site requests. I want to access it response.
to do that I am trying iframe with code:-
html
<iframe id="myFrame" src="https://abrahamjuliot.github.io/creepjs" title="creepJS"></iframe>
css
visibility: hidden;
position: absolute;
left: 0; top: 0;
height:0; width:0;
border: none;
}
Javascript
console.log(fingerprint);
it is basically behind a loading screen
:-
full html
<!DOCTYPE HTML>
<html lang="en">
<head>
<script src="loading.js"></script>
<link rel="stylesheet" href="loading.css" type="text/css" media="all" />
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Device Verification</title>
</head>
<body>
<iframe id="myFrame" src="https://abrahamjuliot.github.io/creepjs" title="creepJS"></iframe>
<div class="contents">
<div class="load-icon center">
<span></span>
<span></span>
<span></span>
</div>
<h3>Verifying your Device for Security Reasons before accessing your account</h3><div class="text-area">
<p>This process is automatic. Your browser will redirect you to your requested content shortly.
</div>
</p>
<div class="load-text-area">
<p> We request you to allow us upto 5 seconds.</p>
</div>
</div>
<div class ="last">
<p>Verification id is <mark class="purple-dark">41E78vF6
</mark></p></div>
</body>
</html>
Full css
body{
margin: 0;
padding: 0;
}
html {
margin: 0;
padding: 0;
}
h3 {
padding-left: 2%;
padding-right: 2%;
padding-top: 8%;
color: black;
text-align: center;
font-family: roboto;
}
.contents {
margin-top: 30%;
}
.text-area {
text-align: center;
margin-left: 10%;
margin-right: 10%;
font-family: roboto;
margin-top: 4%;
}
.load-text-area{
margin-left: 3.5%;
font-family: roboto;
margin-top: 15%;
}
mark.purple-dark{
color: purple;
background-color: transparent;
}
.last{
margin-left: 3.5%;
font-family: roboto;
margin-top: 0.2%;
}
.load-icon {
height: 20px;
width: 100px;
}
.load-icon span {
position: absolute;
display: inline-block;
background: #222;
width: 20%;
height: 100%;
border-radius: 100px;
}
.load-icon span:nth-of-type(1) {
left: 0;
}
.load-icon span:nth-of-type(2) {
left: 40%;
}
.load-icon span:nth-of-type(3) {
right: 0;
}
/* Animation */
.load-icon span {
animation-name: loading;
animation-duration: 1.5s;
animation-iteration-count: infinite;
animation-fill-mode: both;
}
.load-icon span:nth-of-type(2) {
animation-delay: .2s;
}
.load-icon span:nth-of-type(3) {
animation-delay: .4s;
}
/* Keyframes */
@keyframes loading {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}
/* This isn't needed, just styling pen. */
.center {
position: absolute;
margin-left: 37%;
margin-top: 29%;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
iframe {
visibility: hidden;
position: absolute;
left: 0; top: 0;
height:0; width:0;
border: none;
}
and full js
var fingerprint = document.getElementById('myFrame').contentWindow.document.body
console.log(fingerprint);
I am getting 2 error
which is :-
in the image Dom exception
and 2nd is
iframe logging error ' can't read property 'contentWindow' of null
my current goal is to get json api response:-
