CORS problems upload.aspx dialog

Question

I'm trying to upload a file and to show the Upload.aspx dialog from an external web site. I have this code:

function openUploadNewDocumentDialog(passingID)
{
    var dialogOptions = SP.UI.$create_DialogOptions();
    dialogOptions.url = appWebUrl + "/_layouts/15/Upload.aspx?List=%7B" + documentLibraryId + "%7D&IsDlg=1";
    dialogOptions.width = 700;
    dialogOptions.height = 310;
    dialogOptions.title = "Upload Document";
    SP.UI.ModalDialog.showModalDialog(dialogOptions);
}

I have this HTML code:

<input id="openSpDialogButton" type="button" value="Open SP dialog" onclick="openUploadNewDocumentDialog()" />

I also have alot of script includes from SharePoint, such as: sp.js, sp.core.js, sp.ui.dialog.js, sp.runtime.js, init.js, core.js, MicrosoftAjax.js etc. These seems to be necessary in order to display the modal dialog.

The URL works fine when I use it in a new browser tab but when I try to call the above function from an button I get this CORS error: Refused to display

'https://example.sharepoint.com/sites/Testsite/_layouts/15/Upload.aspx?List=%7B3b62f560-1244-4e6d-14f4-fe7b97238a0d%7D&IsDlg=1&IsDlg=1' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

I'm targeting SharePoint Online and probably SharePoint 2016 and maybe SharePoint 2013 but not SharePoint 2010. I'm no stranger to really new features in SharePoint but I still can't get this to work.

I read about the SP.RequestExecutor.js that was added in SP2013 that should solve CORS issues but I'm not really sure how to use it when displaying the Upload.aspx dialog? For REST calls sure but how do I use it for showModalDialog()?

I found these two articles related to this problem but I don't think they offer me a solution:

• https://blogs.msdn.microsoft.com/officeapps/2012/12/12/iframing-sharepoint-hosted-pages-in-apps/
• https://blogs.msdn.microsoft.com/officeapps/2012/11/29/solving-cross-domain-problems-in-apps-for-sharepoint/

Any help is appreciated, thanks!

Answer 1

I've done something similar using the AllowFraming web part on SharePoint pages I can modify (https://dev.office.com/sharepoint/docs/sp-add-ins/create-add-in-parts-to-install-with-your-sharepoint-add-in).

To solve your problem technically you should be able use remote provisioning patterns to push a Site Scoped Custom Action that lazy loads a script from your "external website" onto the SP upload page and then use that script to grant mutual trust / postMessages between the browser frames EX// request an action. (https://blogs.msdn.microsoft.com/officeapps/2012/11/29/solving-cross-domain-problems-in-apps-for-sharepoint/).

Here is an example where I use the technique to traverse a SharePoint Hosted App & SharePoint Web to call a traditional sharepoint web service: Call SharePoint Web Service from SharePoint Hosted App (JavaScript)

It works great in every browser except IE. In your case the external site wouldn't be in the users trusted sites in IE & IE fails when navigating across security zones (assuming the SharePoint portal was in users Trusted sites & the external site was not). Here is basic summary: http://crmbook.powerobjects.com/system-administration/sharepoint-document-management/beyond-basic-integration/displaying-an-office-365-sharepoint-page-in-iframe/

Now obviously you could ask a user to add your site to the trusted sites list in IE & you could write an Add-In to provision your script file as a Custom Action however:
a) You can't guarantee the user will trust your site, enable mixed content, or even have a clue how to navigate into Internet Settings.
b) You can't guarantee the tenant admin will allow your JavaScript on their server.

Seems like a waste of time to me. Although technically there are additional options for onprem at the server level that's way outta scope. O365 will always have these security restrictions so you're SOL when it comes to iframes.

After all that the best solution to uploading files from an Add-In (external website) is using the REST interface. The only gotcha is when uploading very large files you're going to have to upload in slices. See example here: https://msdn.microsoft.com/en-us/pnp_articles/upload-large-files-sample-app-for-sharepoint

After you've uploaded the file using REST (can be done in JavaScript too) you can use a CAML query for the ID and send the user to the appropriate list item form in a new tab, new window, etc..:
Classic: https://tenant.sharepoint.com/Documents/Forms/EditForm.aspx?ID=1
Modern: https://tenant.sharepoint.com/Documents/Forms/DispForm.aspx?ID=1