Iframe in white

0

I need an Iframe on my site. My site has HTTPS protocol, and the Iframe source as well. So why does not my site display it? Both sites are certified.

<!DOCTYPE html>
<html class="no-js" lang="pt-br">
    <head>
        <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="robots" content="index,follow" />
<meta name="googlebot" content="index,follow" />
<link rel="icon" href="/site/img/layout/favicon.png" />
<style>.se-pre-con { position: fixed; left: 0px; top: 0px; width:100%; height: 100%; z-index: 9999; background: url(/site/img/layout/preloader.svg) center no-repeat #3177fa; }</style>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/site/css/script/jquery-ui-delta/jquery-ui.css">        
        <title>Teste</title>
    </head>
    <body id="home">
        <h1>Teste</h1>
        <iframe src="https://sandbox-app.vindi.com.br/customer/bills/6740?token=1fd4b0cc-2f66-4b3e-9bac-7c9988e64646"width="100%" height="50%"></iframe>

    </body>
</html>
    
asked by anonymous 30.11.2017 / 13:25

1 answer

1

This problem has nothing to do with SSL / HTTPS, the error message is:

  

Refused to display 'https://sandbox-app.vindi.com.br/customer/bills/6740?token=1fd4b0cc-2f66-4b3e-9bac-7c9988e64646' in a frame because it set 'X-Frame-Options' to 'sameorigin'

In other words, the https://sandbox-app.vindi.com.br/customer/bills/6740?token=1fd4b0cc-2f66-4b3e-9bac-7c9988e64646 site contains the following HTTP header / header:

X-Frame-Options: sameorigin

What does it mean that it only allows to use as a frame if it is in the same domain, so if you do not have control over the sandbox-app.vindi.com.br domain it will be impossible to directly inject it into your site via Iframe.

Workaround (webproxy)

An example of a workaround is to use a language that runs on your server, so I saw you use PHP (with the time I add examples in other languages) so I made this example in another question with same problem link :

webproxy.php

<?php
set_time_limit(0);

if (empty($_GET['url']) || preg_match('#^(http|https)://[a-z0-9]#i', $_GET['url']) === 0) {
    echo 'URL inválida';
    exit;
}

$url = $_GET['url'];

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_HEADER, false);

//Envia o user agente do navegador atual
curl_setopt($ch, CURLOPT_USERAGENT, $_SERVER['HTTP_USER_AGENT']);

curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

//Pega os dados
$data = curl_exec($ch);

//Fecha o curl
curl_close($ch);

$ch = NULL;

$httpcode = curl_getinfo($ch, CURLINFO_HTTP_CODE);

if($data === false) {
    http_response_code(404);
    echo 'Curl error: ' . curl_error($ch);
} elseif ($httpcode !== 200) {
    http_response_code($httpcode);
} else {
    $finfo = new finfo(FILEINFO_MIME_TYPE);
    header('Content-Type: ' . $finfo->buffer($data));
    echo $data;
}

And order from the iframe by:

<?php
//Codifica a url para passar via GET
$url = urlencode('https://sandbox-app.vindi.com.br/customer/bills/6740?token=1fd4b0cc-2f66-4b3e-9bac-7c9988e64646');
?>

<iframe src="webproxy.php?url=<?php echo $url; ?>"></iframe>
    
30.11.2017 / 13:37