SharePoint Pals
 | Sign In
“The Content cannot be displayed in a frame” - Display another SharePoint WebApplication inside an iFrame of our SharePoint Site
by Sathish Nadarajan 27 Oct 2014
Author
SharePoint MVP
Visits   
Today  :   12     Total  :    35756

We faced an issue with the Authentication while working with the Cross Site Publishing. The problem statement is something like the below.

1. 2 Web Applications. Authoring and Publishing.

2. On the Publishing Site, render some of the Contents from the Authoring

3. The Publishing Site is authenticated while the user logged in.

4. But the Authoring Site was not authenticated at that time.

5. Hence, the contents will not be rendered properly on the Publishing Site.

Resolution:

To overcome this, we thought of having a hidden iFrame in the master page of our Publishing portal, and inside the iFrame, let us load the Authoring Web Application silently. We were on the process of this. But in that also, I faced some problem.

Let me explain that with the help of a sample page itself.

Let us have a Page and add a Content Editor WebPart on it. On the Content Area, I am rendering the iFrame as below.

 <iframe id="test" src="http://c4968397007:1001/sites/assets/Pages/default.aspx" style="width: 1260px; height: 150px;"></iframe>

Then the screen renders like below.

clip_image002

The error message, we will be getting is like

“The Content cannot be displayed in a frame”

As part of fixing this, issue, I was tracing this response on the Fiddler and on the fiddler report, there is an attribute called X-FRAME-OPTIONS and by default it was like SAME ORIGIN.

clip_image004

Then, we identified that, because of this only, the page is not rendering inside an IFrame.

Now, there nothing to do with the Publishing portal. We need to make the Content Site to render inside an IFrame. Hence, the following change needs to be done on the Master page of the Content Site Portal.

 <WebPartPages:AllowFraming runat="server"  />

Just Add the above mentioned tag above the head Tag of the Master Page. The best way is, download the Seatle.Master page file. Rename it as Seatle_Custom.Master. Add this line. Upload back to the Master page gallery. Map this new Seatle_Custom.Master file to the Content Authoring Site Collection.

Now, coming back to our publishing site and do a refresh. Now, the site loads inside the iFrame.

clip_image006

Though it is very simple, it took some long hours to identify and fix this.

Hope this will be helpful.

Find the modified Master Page Here.

Happy Coding.

Sathish Nadarajan.

blog comments powered by Disqus

SharePoint Pals

Pals
SharePoint Pals, a community portal for SharePoint developers, Administrators and End Users. Let's join hands and share the point together.
Read this on mobile

Training

Angular Js Training In Chennai
Advanced Angular Js training with real world developer scenarios
Angular Js, Web Api and Ionic for .Net Developers
All in one client side application development for .Net developers
Angular Js For SharePoint Developers
Get ready for the future. Its no more just C#

Get Connected

SharePoint Resources

SharePoint 2013 and 2010 Web Parts
Free Web Parts with Source Code for SharePoint Community




SharePoint 2013 Books and Tutorials
Collection of free SharePoint 2013 books and tutorials (eBooks, pdfs)

Supported By

Contribute your article and be eligible for a one month Free Subscription for Plural Sight. The Author of the most popular New Article (published in the previous month) will be awarded with a Free One month Plural Sight Subscription. Article can be sent to articles@sharepointpals.com in a word document.

Related Resources

Recent Tweets

Twitter January 15, 00:25
How To Enable Target Value And Actual Value In #D3 Gauge Chart https://t.co/VxSi4QnNrC

Twitter January 15, 00:24
How To Open #SharePoint List Hyperlink Column In Modal #Popup Window https://t.co/EQ7HkoZDkX

Twitter January 15, 00:24
Quick Introduction To #Asp.NetCore And It’s Features https://t.co/zAXObHCFpH

Twitter January 15, 00:22
How To Configure #PerformancePoint Services To Use Secure Store In #SharePoint 2013 https://t.co/LEwnUoI7EY

Twitter January 15, 00:21
How To Block Or Disable #Office365 Services https://t.co/Yvp2VPFIRP

Follow us @SharePointPals
Note: For Customization and Configuration, CheckOutRecent Tweets Documentation