Blank iframe

Question

Blank iframe

Asked 7 years ago

Viewed 1,565 times

0

I need an Iframe on my site. My site has HTTPS protocol, and the source of Iframe also. So why doesn’t my site display it? Both sites have certificate.

<!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>

Possible duplicate of iframe does not work with external websites

– Guilherme Nascimento

2017/11/30 at 12:50

1 answer

Browser other questions tagged html iframe ssl

You are not signed in. Login or sign up in order to post.

by Guilherme Nascimento • **98,651** points · Answer 1 · 2017-11-30T12:37:22+00:00

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'

That is to say the site https://sandbox-app.vindi.com.br/customer/bills/6740?token=1fd4b0cc-2f66-4b3e-9bac-7c9988e64646 contains in the HTTP header/header the following configuration:

X-Frame-Options: sameorigin

This means that you can only use it as a frame if it is in the same domain, so if you have no control over the domain sandbox-app.vindi.com.br it will be impossible to inject it directly into your site via Iframe.

Alternative solution (webproxy)

An example of alternative solution is to use a language that runs on your server, so I saw you use PHP (with time add examples in other languages) so I did this example in another question with same problem /a/226854/3635:

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 request in 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>