How to Safely Embed Custom Web Parts in SharePoint Pages without Issues?

Embedding custom web parts allows you to add unique components to SharePoint pages.

However, improper implementation can cause problems. This guide teaches you to embed custom web parts safely.

Keep Custom Web Parts from Crashing SharePoint

Have you ever wanted to customize a SharePoint embed web part page by embedding a web part you or someone else built?

Adding unique web parts is great, but doing it the wrong way can wreck performance or break things.

We’ll explain how to embed custom web parts without accidentally taking down SharePoint.

You’ll learn concepts like sandbox solutions and web part isolation to help avoid issues.

Why Embed Custom Web Parts?

Out-of-the-box SharePoint doesn’t have every feature under the sun. Sometimes you need to add specialized web parts to do new things:

• Display data from external sources
• Build tailored interfaces like calendars or slideshows
• Add interactivity with forms, surveys, filters, etc.

The SharePoint Framework (SPFx) lets developers create reusable web parts using modern languages like TypeScript.

These custom web parts can then be embedded into SharePoint pages.

But this requires care to avoid problems. Let’s see why.

The Risks of Deploying Custom Web Parts

Dropping a random web part onto a SharePoint page is playing with fire. Things can go wrong:

What do all these stem from? Lack of isolation.

SharePoint sites run custom code within the context of the primary server process. So if there’s an infinite loop or vulnerability in your web part’s code, it can bring down the whole server or compromise other data!

Additionally, Since everything shares resources like memory, an inefficient web part drags down performance for all other web parts running simultaneously.

Isolate Custom Code with Sandbox Solutions

To avoid taking down a production SharePoint environment, custom code must run inside a sandboxed solution:

“A sandbox solution is a way for developers to upload custom executable code to a SharePoint site that isolates the code from the rest of the farm” – Randy Drisgill, Microsoft

Think of it as a protective barrier that stops badly-written custom code from damaging the broader SharePoint infrastructure.

The SharePoint Framework packages code as sandboxed solutions automatically. So all modern web parts enjoy a baseline level of isolation.

But Sandboxed Solutions Have Restrictions!

The trade-off is that sandboxed code can’t access many OS-level functions for security reasons. This blocks potentially dangerous things like writing files, modifying the registry etc. from custom code.

Many handy SharePoint features are also off-limits. Sandboxed code can’t directly manipulate search, user profiles, taxonomy and more.

This can frustrate developers trying to build advanced web parts that do complex integrations with the SharePoint platform itself.

Microsoft struck a balance – better some functionality than no custom code at all! Over time, more APIs will likely open up to sandboxed code as SPFx matures.

Fine-Grain Isolation with Web Part Isolation

Sandbox solutions protect the overall SharePoint platform. But what about isolation between web parts on the same page?

A single slow or buggy custom component could still ruin performance for others sharing the page.

Web part isolation takes things further by allocating dedicated resources to each custom web part instance:

This prevents:

• Memory leaks spreading from one web part to others
• Long running JavaScript bringing down the entire page
• Excess API calls starving other web parts

In short, even badly-coded parts can’t disturb neighbors on that page. The isolation cuts both ways too – a broken web part won’t crash its well-behaved peers either!

Web part isolation became available in SharePoint 2019. So how does it work?

Implementing Isolation in SPFx Web Parts

The SharePoint Framework handles most isolation tasks under the hood once enabled:

1. Opt-in to Isolation

Signal that a web part needs an isolated runtime by setting supports Isolation: true in its manifest:

“supportsIsolation”: true

This property informs SharePoint to give that web part its own isolated domain when loaded instead of sharing the page’s domain.

2. Load Isolated Frame

At runtime SharePoint injects an isolatedDomain property into the web part’s context. This provides a secure domain to load the web part into:

const isolatedFrame = document.createElement(‘iframe’);

isolatedFrame.src = this.context.isolatedDomain;

3. Pass Context Across Domains

Since the iframe resides in a separate domain from the host page, context needs to be explicitly passed:

isolatedFrame.contentWindow.postMessage(JSON.stringify(context), isolatedDomain);

The isolated web part running inside the frame can then receive this context to render itself.

And that’s it! The isolated iframe sandbox’s that custom web part’s rendering, data calls and functionality away from everything else.

Other Ways to Avoid Embedding Issues

• Use dedicated site collections for production portal pages with embedded web parts
• Develop and test new web parts on staging sites before enabling in production
• Set granular permissions on custom web parts to limit visibility
• Check for browser compatibility issues with multiple clients
• Monitor performance of isolated web parts to catch leaks early
• Log usage statistics like frequency of use, failures etc. for debugging

Let Users Safely Customize SharePoint

Embedding web parts from external teams or public sources is a risk. But locking down SharePoint removes its extensibility – a key advantage!

With the tactics we’ve covered, empower users to customize SharePoint without endangering it. Promote collaboration while preventing catastrophe – that’s the goal.

The responsibility ultimately lies with web part developers themselves. But as a SharePoint owner you set the stage for their success… or failure by handling customization wisely.

Lilian Hessel