Jean Paul's Blog

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

    Advertisements
  • 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
  • Advertisements

Posts Tagged ‘cross domain’

JavaScript Cross Domain Issue in App Part

Posted by Paul on March 17, 2015

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

Scenario

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:

image

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

image

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.

Solutions

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.

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

function parentmethod()

{

alert(“Parent Method Invoked!”);

}

window.onmessage = function(e)

{

if (e.data == ‘ok’)

{

parentmethod();

}

};

/SiteAssets/frame.html

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’, ‘*’);”>

</input>

Save changes & your page looks like below now.

image

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

image

Following is the functionality summary depiction.

image

This resolves the cross-domain script call issue.

References

https://msdn.microsoft.com/en-us/library/office/fp179921.aspx

Summary

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

Advertisements

Posted in SharePoint, SharePoint 2013 | Tagged: , , , | Leave a Comment »