In this article we can explore the JavaScript cross domain issue when using App Parts.
Scenario
the following is the scenario:
App Parts are rendered in IFrames. The scenario is depicted below:
Security Aspects
By default SharePoint prevents cross-domain script calls to avoid the following security vulnerabilities:
Note
Please note that the cross-domain issue won't occur if the page and IFRAME page happens to be in the same SharePoint library. In our case the IFRAME content is an App Part that is coming from an externally hosted PHA application.
Solutions
The following are the solutions possible here:
Here I would like to show the JavaScript Post Message functionality.
JavaScript Post Message
The window.PostMessage() method allows safe communication across cross-boundary pages. Here the invoker is passing a message string to the target. The target may choose to process or ignore the message.
Implementation
For simplicity I am avoiding creating the PHA application. I would like to show the core functionality. Create a new page in SharePoint.
Add a content web part and insert the following code into it. (See parent.html)
The code above does the following:
Now you need to upload the following content to the Site Assets library. Name it frame.html. (See frame.html)
Save the changes and your page looks as in the following now.
Click on the button and you should be able to see the message box shown below.
The following is the functionality summary depiction.
This resolves the cross-domain script call issue.
References : MSDN
Summary
In this article we explored cross-domain issues of the App Part and a solution for it. The scripts are added to the article.
Voice of a Developer: JavaScript From Scratch