javascriptiosajaxpdfchrome-ios

How can I use iOS Chrome's "Open in" feature on iOS with PDF behind secured website or with a large data URL?


I'm working on a website which serves PDF files (generated on the fly) for viewing and downloading by the user. The user needs to save these, sign them (using any 3rd party PDF app), then upload them. For this particular question we are focused on the handing off of the PDF from Chrome on iOS to a 3rd party PDF application.

On an unsecured, public website viewing a PDF from a public link such as this IRS form works fine. You can view it, then press "Open in..." in the bottom right and choose another application. The other application will receive the URL of the PDF and open it fine.

However, on a secured website, the hand-off does not happen correctly. After pressing "Open in..." in the bottom right on the PDF and choosing the 3rd party PDF app, the other app will receive the URL but not the cookies required to maintain session state. Therefore when it downloads the PDF it gets the login page of the website. Different applications handle this different but for instance, Google Drive will save the login page as a corrupt PDF file. Note that this works fine in Safari, the issue is with iOS Chrome.

What I've tried to do instead is to have the Chrome browser on iOS load the PDF as a blob, then create a data url and display the PDF using that:

<a id="myLink">Click here to test PDF data url</a>
<script>
    $('#myLink').click(function() {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', '/f1099msc.pdf');
        xhr.responseType = 'arraybuffer';
        xhr.onload = function(e) {
            if (this.status == 200) {
                var blob = new Blob([this.response], { type: 'application/pdf' });
                var reader = new FileReader();
                reader.onloadend = function() {
                    window.open(reader.result);
                };
                reader.readAsDataURL(blob);
            }
        };
        xhr.send();
        return false;
    });
</script>

This approach works fine and displays the PDF successfully. However, pressing "Open in..." in the bottom right to hand-off the PDF to another app does not work. Pressing it is unresponsive. I assume this is because of the large size of the data url, and that not being supported for hand-off to another app.

Any thoughts? How can I use iOS Chrome's "Open in" feature on iOS with PDF behind secured website or with a large data URL?

Here is an example page that will load a PDF as a data url. It works to display a PDF on Chrome iOS only. Other browsers aren't a fan of this method.


Solution

  • Source of the issue seems to be the implemented behavior in Chrome for iOS. There's an issue filed at https://bugs.chromium.org/p/chromium/issues/detail?id=831678 addressing the missing cookies.

    As an alternative approach one could generate a temporary URL that contains all necessary authentication details and does not rely on cookies to be send along with the request.

    Use these temporary URLs to open the PDF in Chrome. Pressing the "Open in..." button passes that temporary URL on to the third party application. For security reasons you should deactivate the temporary URLs based on time or number of calls. One could also implemented restrictions that the temporary URL is only valid for that exact IP address.