Forum Discussion
Solved
Unable to render SharePoint lists as iFrame in ReactJS
I am developing a ReactJS application and trying to embed a SharePoint page using an iframe. However, I encounter the error '*****-my.sharepoint.com refused to connect.' It seems that SharePoint is blocking the embedding due to security restrictions.
below is the code for it
import React from "react";
function App() {
return (
<div className="App">
<iframe
src={"https://*********my.sharepoint.com/personal/*****/Lists/Test/AllItems.aspx?IsDlg=1"}
width="100%"
height="900px"
frameBorder="0"
allowFullScreen
/>
</div>
);
}
export default App;
Is it possible to render a SharePoint page (List) as an iframe in a ReactJS application?
Please help me with that
you need to enable the Site Collection Feature "Publishing Infrastructure" first.
But again: You configure some Features of SharePoint back to an old version and you might disable some newer features by doing so... (This possibility could also be disabled by Microsoft at some time).
Best Regards,
Sven
3 Replies
Hi DhanushKumarSivaji ,
the easy answer is that this is not possible.
It has nothing to do with SharePoint and React. The SharePoint server is just sending a header that tells the Iframe to not display the content if your site is not hosted on SharePoint itself.
You could do two things:
1) Host your React application as an SPFX Webpart in SharePoint.
(https://learn.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part)
That way the page with the iframe and the page being "iframed" are on the same domain and the header won't be an issue.
2) Activate "Publishing Feature" on your site in SharePoint, create a custom masterpage and add the "AllowFraming" element.<WebPartPages:AllowFraming runat="server" />But this change is huge and many things in SharePoint you know from the modern UI might simply get broken. (If this still works in SharePoint Online, I have not done this in a while)
I think that the second solution is bad and that you need to re-think your React application.
You should rebuild it either as an SPFX Webpart (to keep the Iframe) or integrate and render the list data in your React application itself (getting the data from the microsoft graph) with no need for an iframe.
Best Regards,
SvenHi SvenSieverding ,
For to make the POC work, I am trying your 2nd solution. But somehow I am getting this error while trying to activate the "Publishing Feature".
Error:Site The feature being activated is a Site scoped feature which has a dependency on a Site Collection scoped feature which has not been activated. Please activate the following feature before trying again: SharePoint Server Publishing Infrastructure f6924d36-2fa8-4f0b-b16d-06b7250180fa Web The Site scoped feature being activated has a dependency on hidden Site scoped feature 'FeatureDefinition/15/22a9ef51-737b-4ff2-9346-694633fe4416' (ID: '22a9ef51-737b-4ff2-9346-694633fe4416'). Hidden features cannot be auto-activated across scopes. There may be one or more visible Site scoped features that auto-activate the dependent hidden feature. Web The Site scoped feature being activated has a dependency on hidden Site scoped feature 'FeatureDefinition/15/dffaae84-60ee-413a-9600-1cf431cf0560' (ID: 'dffaae84-60ee-413a-9600-1cf431cf0560'). Hidden features cannot be auto-activated across scopes. There may be one or more visible Site scoped features that auto-activate the dependent hidden feature.Also, you suggested this change is huge.
May I know whether this will work or not in ReactJS ?
And If we do this, we are kind of bypassing the security right?you need to enable the Site Collection Feature "Publishing Infrastructure" first.
But again: You configure some Features of SharePoint back to an old version and you might disable some newer features by doing so... (This possibility could also be disabled by Microsoft at some time).
Best Regards,
Sven
