Add custom auth headers to html reportviewer

[John]

I am using the HTML5 report viewer and the reporting REST API, with a ReportController that I have subclassed.
I need to add some custom HTTP headers to the outgoing AJAX requests from the report viewer to the report controller.
How would I go about doing that?

[Stef]

Hi John,

You can use standard Javascript approach to add custom headers to any or specific requests. For example:

add this script in the view:
---------------------------
$.ajaxPrefilter(function (options, originalOptions, jqXHR) {
                jqXHR.setRequestHeader("header", "value");
            });

For more details check jQuery.ajaxPrefilter().

Regards,
Stef
Telerik

 

 

[durz]

Some actions initiated by the Report Viewer such as Export to File and Print are not sent by AJAX requests, but by redirecting the browser or appending iframes on to the page. How does Telerik suggest sending custom headers for these actions?

[Stef]

Hi durz,

If you need to control the requests for export and printing, we can suggest you to remove the default options from the viewer and add your own custom UI. Thus you can export programmatically in your controllers and return the file result to the client. In the case of printing, you can export into PDF and inject Javascript to force the PDF reader Print dialog to be raised on opening the document.

Regards,
Stef
Telerik

 

 

[John]

I am using custom Auth headers which is working fine for the most part, except one scenario. If I render a report, and then choose Export to PDF, the call made does not get the custom headers included, and thus fails. Why does this one call behave differently, and what is the workaround?
We are using Angular, but set the headers like this

requestHeaders = apiConstants.api.requestHeaders;
requestHeaders['Authorization'] = publicClientBase.getSessionAuthKey();
$.ajaxSetup({
    headers: requestHeaders
});

[durz]

This is because requests from these actions are not sent through jQuery's AJAX, but by redirecting the browser or appending iframes to the page with a specific src attribute.

I didn't want to modify the ReportViewer's source code so I worked around this by wrapping the window.open and document.body.appendChild method that the ReportViewer's export and print functionalities use. I have an AngularJS service which does this. You can see the code here: https://github.com/durz/telerik-reports-in-angularjs

[Itiel]

The link to the workaround isn't available anymore.

Can anyone provide here a code example to solve this problem in window.open, or share a working link?

Thanks.

[Dimitar]

Indeed the link seems to be down, please try the approaches from the How to Pass Custom Headers Along with Report Viewer REST API Calls KB article instead.

[John]

Thanks Durz, very helpful!

[John]

Durz, using this approach kind of works...but it looks like we are getting back blank PDF reports. Did you run into that?

[durz]

I was getting that until I set the response type on the http request to 'blob'. Don't forget that. If it's still the same, do you get different results in different browsers?

[Shawn]

durz,

I asked the same question on your GitHub, but do you have any insight into the URL that needs to be called with an XMLHttpRequest to export the report like you do in your project? I tried a URL like this:

http://localhost:1139/api/reports/clients/125609-2d03/instances/125609-aca4/documents/125617-fa08

And I get a null response back. Any help would be awesome, thanks!

[durz]

That URL looks fine. I don't manipulate or change the URL generated by Telerik's ReportViewer in any way. If you copy that URL, paste it into a new browser window and get the report, you know it's fine. Are you using the native XMLHttpRequest object directly? What does your code for creating and sending the XHR look like? Is your response actually null inside the `load` event handler?

Before I converted to Angular, my code for creating the XHR object and sending it looked like this:

01.function windowOpenWithXhr (url) {
02.    var xhr = new XMLHttpRequest();
03.
04.    xhr.open('GET', url);
05.
06.    xhr.addEventListener('load', function () {
07.        // handle the response here
08.        // inspect the 'this' object to view the response
09.    }, false);
10.
11.    xhr.setRequestHeader('myCustomHeader', 'myCustomHeaderValue');
12.    xhr.responseType = 'blob';
13.    xhr.overrideMimeType('application/octet-stream; charset=x-user-defined;');
14.    xhr.send(null);
15.}

[Ruud]

Hi,

Are there any plans to modify the Html5 ReportViewer so we can use it in Hybrid Apps as well without these nasty work arounds? I suggest to clearly state in the report viewers documentation that embedding in a hybrid app will cause issues with exporting and printing. That would have saved me a lot of time.

Regards,

Ruud

[Stef]

Hello Ruud,

I can suggest you the following approaches, where each depends on how the HTML5 Viewer is used in the application:

1. Use the ReportProcessor to export reports on the server, and deliver the rendered document at the client. The print operation can be done via export in PDF with injected Adobe Javascript forcing the PDF reader to open its Print dialog.
2. On export and print reports are processed and rendered on the server, and the ready documents are returned to the client. The document is loaded in a hidden window. Please check if changing the settings for this window (to open it in the same or blank container) allows you to export successfully - the settings are in the viewer's JS template file (telerikReportViewer-9.2.15.1216.js).

I hope the provided information is helpful.

Regards,
Stef
Telerik

[Ruud]

Hi Stef,

Thanks for your reply. I tried all possible combinations with the windows.open; it just doesn't download the actual pdf in the window itself. Do you think it is possible to use a work around like your github project: https://github.com/durz/telerik-reports-in-angularjs, but then tailored for plain js with the html5 kendo reportviewer?

Sorry to bother you with this, but it is just hard to convince my client that I have to spend so much time for delivering something which works without any problem in a mobile web site (as opposed to a hybrid app).

Regards,

Ruud

[Stef]

Hi Ruud,

The described approach applies when you need to have authorization in the application and it is implemented by passing the user's information along with each request. In such cases, requests for images would not be caught as they are sent by elements in the rendered HTML. Also the rendered on the server documents like PDF. Excel files are loaded in a hidden iframe element in order to be downloaded at the client, and the iframe src attribute's request will not be caught.

If this is the case, test the approach from https://github.com/durz/telerik-reports-in-angularjs.
You can also test the approach where report's are exported programmatically, which gives you full control over the request for rendering the report and how the response will be handled - ReportProcessor.


If it is not an authorization issue, please specify what platform is used for creating the hybrid application and what device is tested. Include details about the tested Telerik Reporting version, and any error logs from the client and the server.

Regards,
Stef
Telerik

[Ruud]

Hi Stef,

Thanks for the feedback. That information was already clear to me. But this means I or have to hack into the window.open, or create my own solution by creating a pdf on the server and download it on the client. Either way, quite some work which I did expect to work oob. So I guess I need to revise the planning.

I already managed to modify my web api odata controller to generate the pdf as a file stream; I just need to figure something out how to dowload and open this filestream in a hybrid app. I know how to do this in regular web sites, but seems hybrid apps handle it differently. Any hints welcome :).

All the best and happy new year!

Ruud

[Jaison]

I am using the MVC implementation for my reporting. I also need to update the http header information with authorization info for the API call to get the data for the report. Does the initial discussion solve my problem? Are there any server-side code overrides I can do?

Thanks.

[Adam]

Is there any way to up-vote this issue so that a future build of the report viewer can have a built-in way to handle authentication?  Thanks Druz for your Angular integration. I'll probably have to use that.  It just sounds like there are multiple ajax pathways being used here and without a handful of hacks authenticated report access doesn't work.  This seems like a pretty common expectation from controls that they can handle being secure. I would hope some sort of OOB functionality for this will be added soon.

 

I would also like to up-vote for an expanded solution file for example use cases for the html viewer.  It seems like the one-and-done example use case project doesn't fit into every scenario.  A couple use cases like jQuery (current), Angular, custom parameter field integration, authentication are all pretty commonly requested things, but the implementation is scattered and incomplete across many posts.

 

Some of these posts at least regarding the authentication were from raised back in early 2014. It is now late 2016 and the report viewer is still lacking some of this functionality OOB.

[Stef]

Hello Adam,

Thank you for this feedback.

There is no unique approach for securing the HTML5 Viewer and Reporting REST service. The service's methods can be overridden, and you can add attributes and code. We consider providing a mean to pass tokens from the viewer, but we will appreciate you feedback about the expected functionality on our feedback portal. Switching to HTTPS does hnot require special settings for the HTML5 Viewer and the Reporting REST service.

We logged a feature request for having an AngularJS viewer, where we also want to see you votes.

Regards,
Stef
Telerik by Progress

[PrimePay]

We are running into the same problems as everyone in this thread. I was able to modify durz's code to work with our (non-Angular) app. The only problem I have left is that when making a call for a resource (an image on our report) at this route

GET api/Reports/clients/{clientID}/instances/{instanceID}/documents/{documentID}/resources/{resourceID}

the headers are not being added. Is it intention that is call is not going through jQuery (as the headers would be added properly if it were)? If so, I can take a look into overriding this specific route as well, but it would be preferable if everything went through jQuery.

Thanks.

[Stef]

Hi,

Reports are rendered in HTML for the web preview. Ifthere are images, they will be IMG elements with SRC attributes. The SRC of the IMG element is not requested via AJAX call, but the request will be handled by the corresponding GetResource method of the ReportsControllerBase (Reporting REST service).
You can add authorization logic in the service's GetResource method. Otherwise, images can be loaded without authorization.


Feel free to add a feature request for having an option to load images in the HTML via AJAX calls.

Regards,
Stef
Telerik by Progress