Authentication refused to display Inside iframe with MVC app - asp.net-mvc

Question

I have created an MVC application and in the Home page, I have a Power BI Dashboard Report, so I have configured the Power BI and Azure AD configuration in Index action, once Index action is called, it will verify the Authentication and Redirect to Redirect Action Method. In the method, Authentication has been verified and calls the Power BI action method and shows the report.
The report is working fine in the page, but when set it to Iframe, it is not working and shows the below error.
Home Page Index Action:
public ActionResult Index()
{
var #params = new NameValueCollection
{
//Azure AD will return an authorization code.
//See the Redirect class to see how "code" is used to AcquireTokenByAuthorizationCode
{"response_type", "code"},
//Client ID is used by the application to identify themselves to the users that they are requesting permissions from.
//You get the client id when you register your Azure app.
{"resource", "https://analysis.windows.net/powerbi/api"},
{"redirect_uri", "xxxx/home/Redirect."}
};
//Create sign-in query string
var queryString = HttpUtility.ParseQueryString(string.Empty);
queryString.Add(#params);
string authorityUri = "https://login.windows.net/common/oauth2/authorize/";
var authUri = String.Format("{0}?{1}", authorityUri, queryString);
ViewBag.authUri = authUri;
return View();
}
Redirect Action Method:
public async Task<ActionResult> Redirect()
{
string code = Request.Params["code"];
if (code != null)
{
AuthenticationContext AC = new AuthenticationContext("https://login.windows.net/common/oauth2/authorize", TC);
ClientCredential cc = new ClientCredential("xxxxx", "xxxxxxx");
AuthenticationResult AR = await AC.AcquireTokenByAuthorizationCodeAsync(code, new Uri("http://localhost:43333/home/redirect"), cc);
//Set Session "authResult" index string to the AuthenticationResult
Session["authResult"] = AR;
} else {
//Remove Session "authResult"
Session["authResult"] = null;
}
return RedirectToAction("POWERBI", "Home");
}
Power BI action:
public async Task<ActionResult> POWERBI()
{
AuthenticationResult authResult;
authResult = (AuthenticationResult)Session["authResult"];
var token = authResult.AccessToken;
ViewBag.Token = token;
var tokenCredentials = new TokenCredentials(token, "Bearer");
// Create a Power BI Client object. It will be used to call Power BI APIs.
using (var client = new PowerBIClient(new Uri(ApiUrl), tokenCredentials))
{
// Get a list of dashboards.
var dashboards = await client.Dashboards.GetDashboardsInGroupAsync(GroupId);
// Get the first report in the group.
var dashboard = dashboards.Value.FirstOrDefault();
//var dashboard = dashboards.Value.Where(w => w.Id == "DashboardId");
if (dashboard == null)
{
return View(new EmbedConfig()
{
ErrorMessage = ""
});
}
// Generate Embed Token.
var generateTokenRequestParameters = new GenerateTokenRequest(accessLevel: "view");
var tokenResponse = await client.Dashboards.GenerateTokenInGroupAsync(GroupId, dashboard.Id, generateTokenRequestParameters);
if (tokenResponse == null)
{
return View(new EmbedConfig()
{
ErrorMessage = "."
});
}
// Generate Embed Configuration.
var embedConfig = new EmbedConfig()
{
EmbedToken = tokenResponse,
EmbedUrl = dashboard.EmbedUrl,
Id = dashboard.Id
};
return View(embedConfig);
}
}
In home page view inside iframe:
<iframe src="#Url.Action("Index", "Home")" class="col-lg-12 col-md-12 col-sm-12" height="450"> </iframe>
NOTE :
- Feature is working fine without Iframe.
- problem while show the report in Iframe.
Error:
Refused to display url in a Iframe because it sets X-frame-options-to deny

Answer 1

The error message means the <iframe src> you are trying to pull into your site doesn't allow it to be hosted within a iframe. It is sending down the response header:
X-Frame-Options: DENY
And the browser is blocking the framing. The host page is doing this to prevent cross-frame scripting attacks.