Add custom auth headers to html reportviewer

21 posts, 1 answers
  1. John
    John avatar
    41 posts
    Member since:
    Jun 2013

    Posted 08 May 2014 Link to this post

    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?
  2. Stef
    Admin
    Stef avatar
    3036 posts

    Posted 12 May 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. DevCraft banner
  4. durz
    durz avatar
    4 posts
    Member since:
    May 2014

    Posted 30 Jun 2014 in reply to Stef Link to this post

    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?
  5. Stef
    Admin
    Stef avatar
    3036 posts

    Posted 02 Jul 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  6. John
    John avatar
    41 posts
    Member since:
    Jun 2013

    Posted 13 Aug 2014 in reply to Stef Link to this post

    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
    });
  7. Answer
    durz
    durz avatar
    4 posts
    Member since:
    May 2014

    Posted 13 Aug 2014 in reply to John Link to this post

    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
  8. John
    John avatar
    41 posts
    Member since:
    Jun 2013

    Posted 13 Aug 2014 in reply to durz Link to this post

    Thanks Durz, very helpful!
  9. John
    John avatar
    41 posts
    Member since:
    Jun 2013

    Posted 14 Aug 2014 in reply to durz Link to this post

    Durz, using this approach kind of works...but it looks like we are getting back blank PDF reports. Did you run into that?
  10. durz
    durz avatar
    4 posts
    Member since:
    May 2014

    Posted 14 Aug 2014 in reply to John Link to this post

    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?
  11. Shawn
    Shawn avatar
    7 posts
    Member since:
    Oct 2013

    Posted 21 Aug 2014 in reply to durz Link to this post

    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!
  12. durz
    durz avatar
    4 posts
    Member since:
    May 2014

    Posted 21 Aug 2014 in reply to Shawn Link to this post

    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.}
  13. Ruud
    Ruud avatar
    51 posts
    Member since:
    Oct 2012

    Posted 18 Dec 2015 Link to this post

    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

  14. Stef
    Admin
    Stef avatar
    3036 posts

    Posted 18 Dec 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  15. Ruud
    Ruud avatar
    51 posts
    Member since:
    Oct 2012

    Posted 28 Dec 2015 in reply to Stef Link to this post

    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

  16. Stef
    Admin
    Stef avatar
    3036 posts

    Posted 30 Dec 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  17. Ruud
    Ruud avatar
    51 posts
    Member since:
    Oct 2012

    Posted 31 Dec 2015 in reply to Stef Link to this post

    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

  18. Jaison
    Jaison avatar
    2 posts
    Member since:
    May 2015

    Posted 01 Jul Link to this post

    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.

  19. Adam
    Adam avatar
    2 posts
    Member since:
    Mar 2013

    Posted 14 Oct Link to this post

    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.

  20. Stef
    Admin
    Stef avatar
    3036 posts

    Posted 18 Oct Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  21. PrimePay
    PrimePay avatar
    20 posts
    Member since:
    Feb 2015

    Posted 19 Oct in reply to Stef Link to this post

    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.

  22. Stef
    Admin
    Stef avatar
    3036 posts

    Posted 24 Oct Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
DevCraft banner