x-frame-options: SAMEORIGIN issue using HTML component

Ask the community
, ,
1

I’m using the bottom code inside HTML component.
I’m changing dynamically the iframe URL and it works well when I’m using “https://www.icqmail.com/” URL but when I using this URL “[Data Studio Community Connector Showcase] Aggregate information across multiple sources” data studio embedded I got 404.
When I changed the iframe src to be equal to URL like this src=“https://www.icqmail.com/” both sites are working well.
Please advice

Button code

export function button5_click(event) {
$w("#myHtmlComponent").postMessage(encodeURI("https://datastudio.google.com/embed/reporting/1se-9ZRSukdgQUiRqYTSjT8nFLTV0v8Uq/page/y5MR&output=embed"))
 
}

HTML component code

<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8"><link rel="mask-icon" href="https://assets-cdn.github.com/pinned-octocat.svg" color="#000000"><link rel="icon" type="image/x-icon" href="https://assets-cdn.github.com/favicon.ico"><link rel="shortcut icon" type="image/x-icon" href="https://assets-cdn.github.com/favicon.ico"><style>body { background: #232323; width: 95%; margin: 0 auto; }
        
        /* Responsive Container for iFrame */.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } 
        .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
    </style><title>Tech Ops PH | your &lt; IT / design &lt; partner </title><script type="text/javascript">window.onmessage = (event) => {
    if (event.data) {
      
     document.getElementById("myIframe").src=decodeURI(event.data)

console.log(decodeURI(event.data));
      
    }
  
 }

</script></head><body><div class='embed-container embed-responsive embed-responsive-4by3'><iframe  id="myIframe" width="600" height="9000"  frameborder="0" style="border:0" allowfullscreen></iframe></div></body></html>