I am trying to display a web page into an iFrame using fetch() API, where I get the url from the user and then display the page into an iFrame as if it is locally hosted, so that I can use javascript to work on the page from the iFrame without cross-origin issues.

What I am looking for is to get the response redirected into the iframe using srdoc.

Code for html page is below:

    <form method="POST">
                        <iframe id="frame" style="resize: both;width: 350px; height:500px;"></iframe>
                        <button type="button" onClick="retrieve()">Retrieve</button>  
                        </form>
                    </div>  
                     <div id="textarea">
                        <textarea id="` + tab_id + `" class="form-control" placeholder="Enter your source text here..." rows="20" onchange="change_textarea('` + tab_id + `')" onfocus="set_focus(this)" style="resize: vertical; min-height:35px;" readonly></textarea>
                    </div>  
                </div> 
            </form>

This is the javascript function:

function retrieve(){
    
    let headers = new Headers();

  headers.append('Content-Type', 'application/json');
  headers.append('Accept', 'application/json');
  headers.append('Origin', 'http://localhost:8080');
  headers.append('Access-Control-Allow-Origin', 'http://localhost:8080');
  headers.append('Access-Control-Allow-Credentials', 'true');
    console.log(headers);

    url = document.getElementById("tt").value;
    fetch(url, {
        mode: 'no-cors',
        credentials: 'include',
        method: 'POST',
        headers: headers
    })
    .then((response) => {
        document.getElementById("frame").srcdoc = response;  
    }) 
}

Obviously, with parsing response I don't get the result but just "[Object Response]"; Any suggestions on how to parse the response from fetch API() to the iFrame?