7

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:

Any help is appreciated, thanks!

  • I wish I could help you. Have you seen this page before? lionadi.wordpress.com/2016/03/22/sharepoint-cors-fix – newbie Jul 5 '17 at 8:57
  • Thanks for the link and maybe I was unclear. I do not have any SharePoint application. My application is external and I'm integrating with "pure SharePoint" (no specific SharePoint application). Both on premises (SharePoint 2013, 2016) and SharePoint Online. So I can't really change the web.config values on the SharePoint side since that would be a central change for the entire SharePoint environment. Or maybe CORS allowed domains can be configured centrally from SharePoint (including SharePoint Online)? Without manually changing web.config. – mikeesouth Jul 5 '17 at 9:32
  • This link is related but it only addresses AJAX calls, not iframes/modals/aspx pages: social.msdn.microsoft.com/Forums/security/en-US/… – mikeesouth Jul 5 '17 at 9:34
  • Now your problem is more clear on me :) I don't know whether this is possible when you do not have SharePoint farm on your side. I would love to hear solution if you solve or anybody solves your problem. – newbie Jul 5 '17 at 11:59
  • CORS cannot be changed on SharePoint 2016, either. Access-Control-Allow-Origin is hard coded to "*" regardless of your web.config setting. – Trevor Seward Jul 5 '17 at 19:57
1
+50

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

  • Thanks for this thorough explanation. I can assure that the end users set my external site is in the trusted zone and whatever extra IE security settings that is necessary, ensuring this is not a problem. Would that enable me to display forms in iframes, modals or other form of embedded content (Display.aspx, EditForm.aspx, DispForm.aspx)? The problem with your suggested approach using REST is that it still redirects the user to the item "in a new tab". It's the "new tab" that is my main problem. I'll still grant the bounty though! – mikeesouth Jul 13 '17 at 6:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.