In classic SharePoint, the Content Editor Web Part (CEWP) was that magical tool that would turn a regular user into a Citizen Developer. SharePoint pages are collections of components, and the CEWP was the universal plug that could bring any widget to our page.
Its sibling, the Script Editor Web Part (SEWP), had a similar role. For the record, I have never come across a situation where the SEWP was more valuable to me than the CEWP. Their cousin, the Page Viewer Web Part, also offered similar capabilities, but that’s a slightly different story.
Modern SharePoint doesn’t offer a CEWP or SEWP out of the box, but they can be re-created using the SharePoint Framework (SPFx). A web search for “modern Content Editor Web Part” will bring a few options. Let me just highlight two of them: the PnP React Script Editor Web Part, by Mikael Swanson, and my own Dangerous Content Web Part I published in 2020.
Why “Dangerous”? Because those SPFx solutions take us back to square one, where any script can run in the page. I wanted to make that clear, hence the name (inspired by the React method dangerouslySetInnerHTML).
How can we improve the situation?
My initial thought was to use a sanitizer. Interestingly, this idea is also making its way in the web specs, currently at an experimental stage. The research I did when I worked on a “Safe Content Web Part” led me to a number of sanitizing solutions, but also to the conclusion that there was no foolproof one, because client-side scripting offers so many possible angles of attack.
Fast forward to 2022, I was browsing the PnP issues and came across an idea submitted by mikezimm: restrict code to only approved snippets, stored in approved repositories. A governance approach instead of a technical approach. That sounded great to me, and I took that direction. That’s how the Cherry-Picked Content Web Part was born, as a spin-off of the Dangerous Content Web Part.
The Cherry-Picked Content Web Part is a rich sample. Not only does it provide the web part, it also includes 16 “sub-samples”, from video widget to charting and inclusion of the powerful Microsoft Graph Toolkit. I actually took the CEWP concept a step further, enabling the snippet to leverage the context of the web part.
Give it a try, and if you have other snippet suggestions feel free to post them here! A snippet can be embedded in two ways:
- Isolated: the code snippet is executed in an iframe, to avoid interferences between the page and the snippet. Note that the snippet can still interact with the page.
- Inline: the code snippet runs directly in the page.
In both configurations, malicious code could still be executed on the page. It is the responsibility of the publishers – users who are granted edit access to the approved libraries – to ensure that the code is safe.
Not interested in a CEWP replacement? The sample still offers some interesting concepts:
- Cascading dropdown and conditional display in the Property Pane
- Use of
SPHttpClientand the SharePoint REST API
- React function component with
- React Portal in combination with an
- Various examples of client-side code in the samples: Microsoft Graph (teams), Microsoft Graph Toolkit (people, email, agenda), charts (Chart.js, Chartist), widgets (map, stock, countdown, clock, video, game), SharePoint SOAP and REST APIs.