Microsoft 365 Community Community Demos, 4 Jul 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Building a safer custom Content Editor Web Part with SPFx

Description

In this 17-minute developer-focused demo, the question - what happened to the CEWP/SEWP’s in the move from classic to modern? Thanks to SPFx and presenter, the content web part is back. Built with a Governance, not a technical approach to address security and governance issues. Meet the Cherry-Picked Content web part. Uses only snippets (ships with 16) from approved libraries hardcoded in web part focusing user’s selections. Inject code directly into page or into an iFRame. Code uses a ContextualFragment. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on June 16, 2022.

Demo Presenter
• Christophe Humbert | @Path2SharePoint

Supporting materials
• Sample - Cherry picked content | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-cherry-picked-content
• Article - Aiming for a safer Content Editor Web Part | https://blog.pathtosharepoint.com/2022/04/19/aiming-for-a-safer-content-editor-web-part/
• Sample - dangerous-content-web-part | https://github.com/PathToSharePoint/dangerous-content-web-part
• Issue - Make React-Script-Editor more secure #2228 | https://github.com/pnp/sp-dev-fx-webparts/issues/2228
• Tool – MGT | mgt.dev
• Sample - Script editor web part for modern pages built in React | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-script-editor

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

A

My topic today is to talk about uh an old friend, the content editor web part and its evolution into the sharepoint framework. A few of my published recently published solutions. So today we're going to talk about the cherry-picked content web part, which is my flavor, so the cherry flavor of the content editor web part in spfx.

A

I also circled here the property payment portal, which was the topic I talked about a couple of months ago, if you're interested.

A

Okay, so um let's start with a little bit of history, it started with a classic sharepoint and there we have some those uh wonderful web parts that we could use to bring any kind of external content and scripts into our pages.

A

So um today, when I look at microsoft, 365 there's a lot of those connectors that allow us to enhance the different parts of uh of the platform. So we have connectors for power, automate power bi for microsoft graph as well, and this is kind of how I see uh the content into the web bar the script editor web part and also the page url web part these. These were my connectors that allowed me to bring more to the sharepoint pages at the time.

A

So uh really I have used and abused that content editor web part. It started more than 10 years ago, and I created some uh what I would say from my view: a very nice functionality like the html calculated column and these tabs at the time now moving into uh modern sharepoint.

A

Well, unfortunately, uh I would say for me the content editor web part and the script editor webpart didn't make it so now we've lost those two web parts. uh Something new we have is the embed web part which is kind of a mix between the page, your web part and- uh and I don't know what uh what else the content or web part.

A

Maybe it has more restricted capabilities and, for example, scripts are not allowed and but fortunately we have the shotgun framework, and this is what allows us to bring back the content web part in a custom form. So there are a few solutions that are available around the web. I mentioned here the the script editor web part, which already really was uh created by us, I'm not sure if I pronounce it right, mikhail or michael.

A

uh So I just learned today that there's a fresh update to that web part, so very, uh very nice to hear that this is still alive and kicking. I also had my own flavor, which I call the dangerous content web part and I'll explain in the next slide. What I mean by that and if you search the web again, you'll find a few others.

A

So this you can, uh if you're missing the content digital web part, you can have it back with those custom, spfx solutions.

A

Why did we lose the content digital web parts? So I'm not sure I have all the explanations, but uh what I'm hearing from microsoft there's a few issues with it. First there's a security issue.

A

Imagine you get a someone who just copy-pasted uh code from found on the web and there's a risk of script injection here as a security breach.

A

There's also the risk that uh the the script, maybe the the script, might be broken, and uh in this case it might completely break the full web page.

A

So you lose complete access to the web page and then you have to go to a back door to to get it back, and so there's a government's concern here that uh when you make the contradictory web part available, then all everybody within the company can have those scripts that are stored anywhere and you don't really have control on what's going on how to govern it and how to maintain it and somebody leaves and then you don't know where the script was okay.

A

So all those issues with the classic web part it's exactly the same, because uh the sharepoint framework solutions uh are trying to replicate the behavior, but at the same time it's also bringing back the exact same issues. So, let's think a little bit. uh What are the solutions we might bring to uh to address this and get a better content? Editor web part.

A

My first idea was to bring a sanitizer and uh to the web part. So we remove the unsafe part or what we don't know. The the parts we don't know are safe or not uh so that's available, you find some some sanitizer libraries uh are available.

A

It's also something that html the standards are bringing now it's more in an experimental stage, but it's going to be uh hopefully at some point part of the html standards. So for me what it meant, I told you about the dangerous content, dangerous content web part, which was my equivalent of this content later web part. So now we're moving to the save content web part, which is the dangerous content web part with the synergizer, some issues, uh the sanitizer first- uh and maybe that's why it's still experimental.

A

We are not sure that it captures all the unsafe parts. So definitely you can remove the scripts. You can remove the events from your code, but then there are some trickier parts that are really difficult to identify these kind of script injections cross cross site, scripting that I was talking about. So it's not. I would imagine at this point not 100 reliable.

A

It might be also, even if it works, it might become useless because well you had some nice clip that did something and you remove the script. Then you're left with nothing. So uh not a big gain here and you still have the governance question because we haven't changed anything in the way we manage the the scripts themselves, the snippets okay. So that's uh what I was thinking about and then a couple months ago I I captured on on github on github pnp. I came across that issue that was opened by magazines.

A

I don't know, I don't know my theme, but that's the nice part about being a part of this community. Is you can look at what others are doing?

A

You can learn from others ideas and my theme came up with another idea that I uh I'm going to talk about, because this is the one I implemented I used for my new solution, okay, so um the the simple I would say the simple idea here is that, instead of working on the technical part of the web part and the code itself, we simply introduce some governance to the web part and instead of having those snippets all around the place or even in external places, you decide some repositories that you're going to use where you're going to store and maintain these snippets and you force users into those repositories.

A

So that's the whole idea. It's a governance approach instead of a technical approach, so I would say: uh well I I love the idea. I'd say it's a common approach when you do content management. I have a few examples on the on this slide. uh It's also kind of what the current embed web part is doing. Where you can choose the locations of different sites. You can pull the web pages from and I I put here the issue so number 2228 on pnp as a reference.

A

Okay, so now we're moving to demo time. So let me show you- and so I I built that web part based on that id and I called it the cherry-picked web box, meaning that you only go to those snippets you've been allowed to pick.

A

So uh I I have already uh built the the web part uh I'm going to uh to show a little bit of the code um very soon, but uh that's what it looks like. So uh I'm going to edit more because uh this mode is not really uh useful here uh going to edit mode, and this is uh the property pane of that web part.

A

And you can see here that I, when I pick my file, I can only choose from a set of approved libraries and then, when I pick one library, I have that cascading selection, so I'll also show that code, a cascading selection that allows me to pick the uh the code snippet.

A

So the web part is cherry, picked, content web part. It comes with 16 samples, so they are self-sufficient. It means that you can just upload them to a library of your choice and then you can run them with the sample, so I'm not going to uh to show the 16 of them. I'm just going to to cherry pick a few here uh right here. You have the google map as an example.

A

What would I choose here? So let me show you uh html html fragments, so that's something I I don't know the exact stage right now of the markdown web part, but something I struggled a little bit with uh in the beginning of modern sharepoint was that uh the markdown web party gives you a lot of layout flexibility. So that's one way to address it. It's to use this new content- editor webpart other example the countdown here.

A

Okay, so I know we already have a countdown, but this would be a custom one that you can implement.

A

One thing I haven't mentioned yet is that there are two options with the contents: editor webpart: either you can inject the code directly in the page or you could inject it in an iframe. So that's what I mean and I I try to reuse the um hopefully uh the right way, the sharpened framework vocabulary.

A

So when it says isolated content here it means that the content is uh injected in an iframe. If it's not isolated, then it's going to be directly injected on the page, so you can have you have the option here to uncheck it and have it on the page.

A

What you can see here immediately is that uh the text font, the font and the font color change and uh from black to white. So that's kind of the point of the iframe. This isolated content is that it allows you to avoid any conflict if, if needed, it allows you to avoid any conflict between the page itself, the scripts and the css of the page and the scripts and the css of your own snippets.

A

Let me pull here a few more or so here, for example, I have a banner most of my examples. I would say in most of my examples. The iframe is the preferred way. This is kind of an exception. You said you see if I want to insert a banner in my page here. uh Banner is really at the wrong place because it's at the top of the iframe.

A

So what I'm going to do is uncheck that box and then I get the banner exactly what I where I want it here at the top of the page, so I I definitely need to to move to the code, but I'm going to show you one more example, because it shows something very interesting here. So one of the little uh additions I made to that webpart was to pull what it does it.

A

It passes the context the web part context over to the snippet, which means that within the snippet you can leverage that context, and in this example you see that I used the microsoft graph toolkit. So I have a lot uh well, there are lots of capabilities with the toolkit. I I love it and what this uh web part allows you uh to do is take those snippets.

A

So you you just go to the snipper to mgt explorer and you can take those snippets and you can display them here directly in the page, because it's going to pull the context from from the web part.

A

Okay, uh so I'm going to uh to move to the code so the way it works uh to to make sure that those uh users are going to stick to the libraries, the libraries in that sample the libraries are hard coded in the code itself. In my case, it's just a static list. You can see for the demo. I just added here. uh Cherry picked samples library.

A

You could do it in a more dynamic way, but the fundamental idea here is that the users cannot reach it. It's embedded in the web part itself and uh the code checks this list uh in edit mode. So when you pick the uh when you pick the snippet, uh it's uh it relies on this list and also in rendering time at relative time. It also makes sure that the code comes from that specific list.

A

So the code itself is uh is very simple: I'm not going to go back to my slides, but basically what we're doing here is a one-liner.

A

uh I, I guess most of you are familiar with the inner html property in uh in javascript, so it's kind of the evolution of inner html that we're using it, which is called so. The method is called, create, contextual fragment, and this is the magical method that allows you to transform that text fragment into html elements and scripts. So just really a one-liner here, a few more a few more things about the code.

A

To conclude the presentation, I'm using react memo here to limit the number of refreshes, so you can imagine that, because we are parsing that code, we might have quite a few elements inside here. So react memo allows me to only refresh the code when the fragment changes when we pull a new fragment.

A

I was also talking about the uh the property pane so uh in in my previous presentation a couple of months ago, I showed you how you could kind of bypass those built-in functions that you have available within the sharpened framework. Here I did the opposite. I reused the built-in function, so I have a property pane drop down here and I use this to create a drop down menu and a cascading. It's actually cascading drop down menu. So if you're interested in building cascading drop down menus from those built-in functions, you can check here.

A

My code, what's important here, is that it's using the on property, pane field change method, which is a built-in method of the sharepoint framework. So I'm just going to to stop here on that image and uh stop sharing. So uh this is the iframe script injection all right. Thank you, christoph really, really cool stuff, absolutely brilliant stuff.