Enable CORS at Reporting server side

Question

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'

As you said, response headers are set server side so your client cannot (and shouldn't try to) get around them. Check out this question which is similar. https://stackoverflow.com/questions/25098021/securityerror-blocked-a-frame-with-origin-from-accessing-a-cross-origin-frame?rq=1 — James, Nov 30 '20 at 10:41
I was trying to set it from reporting server since I have the access but it still not working. Giving me error Invalid 'X-Frame-Options' header encountered when loading is not a recognized directive. The header will be ignored. I am following this answer https://stackoverflow.com/a/38712051/5729812 — Virender Thakur, Dec 02 '20 at 05:48

James · Accepted Answer · 2020-12-02T15:04:27.463

0

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.

edited Dec 02 '20 at 15:04

answered Dec 02 '20 at 10:33

James

1,335
1
10
19

I have added the response.Headers.Add( "X-Content-Security-Policy", "default-src *;"); line in my code but still getting same error "Refused to display in a frame because it set 'X-Frame-Options' to 'sameorigin'. – Virender Thakur Dec 02 '20 at 13:51
Did you try the x-frame-options suggestion above? https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options gives you more info on x-frame deprecations. I have also updated my answer with more info. – James Dec 02 '20 at 15:03
No I not rendering report on HTTPS. Currenlty my angular app has url http://localhost:12345/ and report server also on http://serverName/ReportServer. – Virender Thakur Dec 02 '20 at 15:21

Enable CORS at Reporting server side

1 Answers1