Jean Paul's Blog

There are 2 types of People in the World, One who Likes SharePoint and..

  • Microsoft MVP

  • MindCracker MVP

  • CodeProject MVP

  • eBook on SharePoint 2010

  • eBook on Design Patterns

  • eBook on Windows Azure

  • NLayers Framework @ CodePlex

  • MSDN Forums

  • .Net vs. Java

    Due to Public Demand

JavaScript Cross Domain Issue in App Part

Posted by Jean Paul on March 17, 2015

In this article we can explore the JavaScript cross domain issue while using App Parts.


Following is the scenario:

1. You have a page with a JavaScript method

2. The page have an App Part too which displays from a PHA application

3. App Part need to invoke the JavaScript method in page

4. Due to cross-domain issue the App Part cannot invoke the parent page’s method

App Parts are rendered in IFrames. The scenario is depicted below:


Security Aspects

By default SharePoint prevents cross-domain script calls to avoid following security vulnerabilities:

1. An IFRAME code can manipulate the parent page’s HTML DOM objects

2. An IFRAME code can unwantedly invoke parent page’s script methods


Please note that the cross-domain issue won’t occur if the page & IFRAME page happens to be in the same SharePoint library. In our case the IFRAME content is an App Part which is coming from an externally hosted PHA application.


Following are the solutions possible here:

1. Use Allow Framing control in the page

2. Use SP.RequestExecutor wiring

3. Use JavaScript Post Message functionality

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.


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 & insert the following code into it. (See parent.html)

function parentmethod()


alert(“Parent Method Invoked!”);


window.onmessage = function(e)


if ( == ‘ok’)






The code above performs the following:

1. Create a method named parentmethod() which displays an alert message

2. Create a message listener method for any incoming messages

3. Create an IFRAME displaying the child page

Now you need to upload the following content to the Site Assets library. Name it as frame.html. (See frame.html)

<input type=”button” value=”Click Me to invoke Parent Method”

onclick=”parent.postMessage(‘ok’, ‘*’);”>


Save changes & your page looks like below now.


Click on the button & you should be able to see the message box shown below.


Following is the functionality summary depiction.


This resolves the cross-domain script call issue.



In this article we have explored cross-domain issue of App Part and a Solution for it. The scripts are added to the article.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s