Search code examples
angularsame-origin-policyx-frame-options

Enable CORS at Reporting server side


I am rendering the SSRS report in angular using https://www.npmjs.com/package/ngx-ssrs-reportviewer

But it doesn't allow me to do so and gives me an error:

 Refused to display 'http://SSRSServerName/Reports' In a frame, because it set `X-Frame-Options` to `SAMEORIGIN`.

I have bypassed this error by installing the chrome extension https://chrome.google.com/webstore/detail/ignore-x-frame-headers/gleekbfjekiniecknbkamfmkohkpodhe locally. But obviously, I cannot force users to install this add on to load the reports.

I know Response headers is set server side in the response. Angular runs in the client and has nothing to to with that. But what could be the possible way to resolve this issue.

Updated

I tried to allow the CORS at ssrs side in Global.asax file

 <%@ Application Inherits="Microsoft.ReportingServices.WebServer.Global" %>
<%@ Import namespace="System.Web" %>
<%@ Import namespace="System.Security" %>
<script runat="server">
protected void Application_BeginRequest()
  {
string origin = Request.Headers.Get("Origin");
if (Request.HttpMethod == "OPTIONS")
{
    Response.AddHeader("Access-Control-Allow-Origin", origin);
    Response.AddHeader("Access-Control-Allow-Headers", "*");
    Response.AddHeader("Access-Control-Allow-Methods", "GET,POST,PUT,OPTIONS,DELETE");
    Response.StatusCode = 200;
    Response.End();
}
else
{
    Response.AddHeader("Access-Control-Allow-Origin", origin);
    Response.AddHeader("Access-Control-Allow-Headers", "*");
    Response.AddHeader("Access-Control-Allow-Methods", "GET,POST,PUT,OPTIONS,DELETE");
}  }  </script>

But it gives me error

Refused to display in a frame because it set 'X-Frame-Options' to 'sameorigin'


Solution

  • Looks like you're missing the header from your code. Add the following.

    response.AddHeader("X-Frame-Options", "ALLOW-FROM example.com");
    

    Replace example.com with wherever you're hosting the Iframe. This should allow specifically from your domain. See this for more info https://dotnetcoretutorials.com/2017/01/08/set-x-frame-options-asp-net-core/

    Looks like Chrome is stopping support for this (its unclear when as this date is continually being pushed back). I think you can add the following to get around that.

    response.Headers.Add( "X-Content-Security-Policy", "default-src *;");
    

    See this answer for more info on CSP Asp net core Content Security Policy implementation

    It looks like the library you're using suggests the following. So it looks like you need to run your server and your front end from the same domain or the library doesn't support it.

    Preventing Mixed Content The report viewer uses iframes so if your reportserver is HTTP and you are trying to render it in an HTTPS application you will run into issues.