I have an application developed in Asp.NET MVC-5 and published in IIS normally. When accessing the application by the same link works correctly, all links.
However, I need to put this page inside iframe on the official website.
When I put the link in iframe I access the application normally, however ONE method does not work, only this one. By clicking on it, nothing happens. Checking in the Chrome console I get the following error:
Refused to display 'Link here' in a frame because it is 'X-Frame-Options' to 'SAMEORIGIN'.
The rest of my application works normally, but only this method returns this error.
The page that the link is calling has this code:
@using PortalRH.DomainModel.Entities
@model PortalRH.DomainModel.Entities.Usuario
<!DOCTYPE html>
<html>
<head>
@{
Layout = null;
ViewBag.Title = "Dados Cadastrais";
}
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jquerymask")
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
<script src="~/Scripts/jquery.dataTables.min.js"></script>
<script src="~/Scripts/jquery.dataTables.editable.js"></script>
<script src="~/Scripts/jquery-ui-1.11.2.min.js"></script>
<link href="~/Content/themes/start/jquery-ui.css" rel="stylesheet" />
<link href="~/Content/jquery.dataTables.css" rel="stylesheet" />
<link href="~/Content/jquery.dataTables_themeroller.css" rel="stylesheet" />
<script src="~/Scripts/select2.min.js"></script>
<link href="~/Content/select2/css/select2-bootstrap.css" rel="stylesheet" />
<link href="~/Content/select2/css/select2.css" rel="stylesheet" />
<script src="~/Scripts/prettify.js"></script>
<script src="~/Scripts/jquery.maskedinput.js"></script>
<script type="text/javascript" src="http://cidades-estados-js.googlecode.com/files/cidades-estados-v0.2.js"></script><title>CETIL-AtendimentoaoServidor</title><linkhref="~/Content/default.css" rel="stylesheet" type="text/css">
<link href="@Url.Content("~/Content/Inicial.css")" rel="stylesheet" type="text/css" />
<style type="text/css">
.imageA {
position: absolute;
left: 500px;
top: 0px;
}
.mapLocal {
position: absolute;
left: 115px;
top: 60px;
font-size:13px;
font-family: Verdana;
}
.Nome {
position: absolute;
left: 860px;
top: 220px;
}
.faq-cat-tabs li a {
padding: 15px 10px 15px 10px;
background-color: #ffffff;
border: 1px solid #dddddd;
color: #777777;
}
</style>
</head>
<body>
<a><img src="~/Content/img/img_top.png" width="361" height="54" class="imageA"></a>
<br/><br/><br/>
@Html.Partial("_MenuCompleto")
<div class="Nome">
<p><strong><font face="Arial" size="2"> @ViewBag.Matricula / @ViewBag.Contrato - @ViewBag.Nome</font></strong></p>
</div>
<div class="mapLocal">
<img src="~/Content/img/sitemap.ico" width="19" height="19" /> Você está em: <i>@ViewBag.Title</i>
</div>
<div>
<p>
<div id="message">
@{
if (TempData["MensagemError"] != null)
{
<div>
<div class="alert alert-danger" role="alert">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span class="sr-only">Error: </span>@TempData["MensagemError"]
</div>
</div>
}
if (TempData["Mensagem"] != null)
{
<div>
<div class="alert alert-success" role="alert">
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
<span class="sr-only">Error: </span>@TempData["Mensagem"]
</div>
</div>
}
if (TempData["MensagemCPF"] != null)
{
<div>
<div class="alert alert-danger" role="alert">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span class="sr-only">Error: </span>@TempData["MensagemCPF"]
</div>
</div>
}
if (TempData["MensagemPIS"] != null)
{
<div>
<div class="alert alert-danger" role="alert">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span class="sr-only">Error: </span>@TempData["MensagemPIS"]
</div>
</div>
}
}
</div>
</p>
</div>
<!--ABAS-->
<div class="container">
<div class="col-lg-12">
<ul class="nav nav-pills faq-cat-tabs">
<li class="active"><a data-toggle="tab" href="#sectionE">Pessoal</a></li>
<li><a data-toggle="tab" href="#sectionH">Documentos</a></li>
<li><a data-toggle="tab" href="#sectionF">Endereço</a></li>
<li><a data-toggle="tab" href="#sectionG">Dados Profissionais</a></li>
</ul>
</div>
<div class="col-lg-12">
<div class="tab-content">
<div id="sectionE" class="tab-pane fade in active">
<br /><br />
@Html.Partial("_DadosPessoais")
</div>
<div id="sectionF" class="tab-pane fade">
<br /><br />
@Html.Partial("_Endereco")
</div>
<div id="sectionG" class="tab-pane fade">
<br /><br />
@Html.Partial("_DadosProfissionais")
</div>
<div id="sectionH" class="tab-pane fade">
<br /><br />
@Html.Partial("_Documentos")
</div>
</div>
</div>
</div>
<div class="container body-content">
<hr />
<div align="center">
<footer>
<p>© @DateTime.Now.Year - Portal RH - <a href="http://www.vilavelha.es.gov.br" target="_blank">Prefeitura Municipal de Vila Velha</a></p>
</footer>
</div>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
</body>
</html>
<script type="text/javascript">
$(document).ready(function () {
$('#message').delay(4000).fadeOut();
});
</script>
And I'm using iframe in this code:
<div id="sp-component-area" class="span12"><section id="sp-component-wrapper"><div id="sp-component"><script type="text/javascript">
function iFrameHeight() {
var h = 0;
if (!document.all) {
h = document.getElementById('blockrandom').contentDocument.height;
document.getElementById('blockrandom').style.height = h + 60 + 'px';
} else if (document.all) {
h = document.frames('blockrandom').document.body.scrollHeight;
document.all.blockrandom.style.height = h + 20 + 'px';
}
$response->headers->set('X-Frame-Options', 'SAMEORIGIN', false);
}
</script>
<div class="contentpane">
<iframe id="blockrandom"
name="iframe"
src="SiteAQUI"
width="100%"
height="500"
scrolling="auto"
frameborder="1"
class="wrapper">
Esta opção não irá funcionar corretamente. Infelizmente, seu navegador não suporta frames.</iframe>
</div>