cordova iframe to docs.google.com/gview throwing errors and crashing app

Question

In my Cordova app, on certain pages I load a modal that has an iFrame to load/view external docs. It works but it has some issues that I am trying to resolve. The iFrame is ultimately loading a document that is sourced from my server via docs.google.com/gview=

 $scope.filePath = "https://docs.google.com/gview?url=" +$scope.serverFileURL+ "&embedded=true" ;

 <iframe id="pdfFrame" ng-src="{{filePath}}" style="width:100%;height:100%;" frameborder="0"></iframe>

Issue 1: The modal opens, the iframe loads the document into view. All seems good. But in the back ground I am getting the following errors:

1. I am getting this twice: Refused to execute script, violates Content Security Policy directive: "script-src 'report-sample' 'nonce-TPaUqBVHnxjjfUe0rTe09g' 'unsafe-inline' 'strict-dynamic' https: http: 'unsafe-eval'". Note that 'unsafe-inline' is ignored if either a hash or nonce value is present in the source list." - how can I resolve this?

2. I then get two 404 errors: POST https://docs.google.com/cspreport 404 In my app I have added docs.google.com to my WhiteList (I can't get the following to format properly in SO):

   config(function($sceDelegateProvider) { $sceDelegateProvider.resourceUrlWhitelist([ 'https://docs.google.com/**', 'https://content.googleapis.com/**', ... ]) ; })

It appears that everything is working, I can close and reopen the modal with the iFrame and my app seems to continue working without issue. Is it possible to resolve these errors - they might be contributing to Issue #2?

Issue 2

After the file is viewable in the iFrame there is a little "pop-out" button that gviewer embeds in the upper right corner of the displayed document. If you click on that it successfully opens into a bigger breakout window, seemingly outside of the iFrame and the containing modal. However, this triggers another set of errors:

a. GET https://content.googleapis.com/drive/v2internal/about?fields=importFormats,kind&key=AIzaSyDVQw45DwoYh632gvsP5vPDqEKvb-Ywnb8 401

b. GET https://content.googleapis.com/drive/v2internal/apps?fields=items(authorized,chromeExtensionIds,createInFolderTemplate,createUrl,icons(iconUrl,size,category),id,installed,kind,longDescription,name,objectType,openUrlTemplate,origins,primaryFileExtensions,primaryMimeTypes,productId,productUrl,rankingInfo,removable,requiresAuthorizationBeforeOpenWith,secondaryFileExtensions,secondaryMimeTypes,shortDescription,supportsCreate,supportsImport,supportsMultiOpen,supportsTeamDrives,type,useByDefault),kind&languageCode=en-US&key=AIzaSyDVQw45DwoYh632gvsP5vPDqEKvb-Ywnb8 403

c. An Uncaught error with message: "Did not receive drive#about kind when fetching import map:undefined"

d. A second Uncaught error where it appears its trying to access: www-authenticate: "Bearer realm=\"https://accounts.google.com/\"" with error message: API keys are not supported by this API. Expected OAuth2 access token or other authentication credentials`

However, after these errors, everything sort of breaks. This breakout window is running IN my app, because if I close the window it is also closing my app. If I click the device back button, I get a blank screen, and in Chrome Developer tools it looks like my app is improperly restarting thus causing it to crash.

How can I deal with all of these issues?

Answer 1

For anyone that comes across this, if the user clicks the gvewier pop-out button in the upper right corner of the viewing document (in the iFrame), there is no clean "exit the breakout window" feature...the only way to close the breakout window and back into your app is to tap the device back button. This will go back to your app, but at least in a Cordova app, this will improperly reload the app causing it to crash.

The only way I found to get around this is disable the pop out button from the iFrame itself...and then use hide the button with some clever HTML.

I was hoping to remove the pop out button altogether, but I wasn't able to access the iFrame.contentWindow() due to cross origin domain issues. If someone knows a way around that then please let me know - because I think removing the button completely is the cleaner way to go.

To disable the button and prevent it from showing:

<div style="position: relative;"> 
   <iframe sandbox="allow-scripts allow-same-origin" src="http://docs.google.com/viewer?url=https://example.com/file.pdf &embedded=true"></iframe>
   <div style="width:40px; height:40px; position:absolute; background:white; right:12px; top: 12px;">&nbsp;</div>
</div>

The sandbox prevents the breakout window from opening. The second div hides the popout button.