A Practical Approach to SharePoint Customizations After Custom Script Restrictions

[SaritaMishra]

Introduction

Microsoft's recent security updates in SharePoint Online have changed how custom scripts are handled, preventing inline JavaScript and CSS from executing through the Script Editor and Content Editor web parts in Classic and Modern pages. While these changes strengthen platform security, they also impact many existing SharePoint customizations. In multiple SharePoint projects, this challenge was addressed by implementing a practical workaround that externalized JavaScript and CSS files while preserving the required functionality.

Business Need

The SharePoint solution required was a custom client-side functionality to improve the user experience beyond the out-of-the-box capabilities. The requirements included:

1. Implementing custom JavaScript for business logic and user interactions.
2. Applying custom CSS to align the SharePoint pages with the organization's branding.
3. Keeping the solution lightweight without introducing unnecessary complexity.
4. Making future maintenance and enhancements simple for the development team.

Ideally, these requirements could be achieved by adding JavaScript and CSS directly into the Script Editor or Content Editor web part. However, Microsoft's recent security updates changed this behaviour.

Challenges in the Existing Process Before Restriction

After Microsoft's security enhancements, several issues were observed during implementation:

1. The Script Editor web part no longer executed inline JavaScript.
2. JavaScript entered directly into the editor was ignored.
3. Inline CSS and styling were restricted, preventing page customization.
4. Existing customizations became difficult to maintain using the previous approach.
5. Rebuilding the entire solution using SPFx was not feasible for the project's timeline and scope.

These limitations required an alternative solution that could preserve the required functionality while working within SharePoint's current security model.

Solution Implemented

To overcome these restrictions, the custom code was separated from the SharePoint page instead of embedding it directly in the web part.

The implementation consisted of the following steps:

1. Created a dedicated JavaScript file containing all business logic as per the context.
2. Created a separate CSS file containing all custom styles also as per the requirement.
3. Uploaded both files to the SharePoint Site Assets library or create a document library inside Site Assets as per the project name and upload there.
4. Referenced these external files from the SharePoint page instead of writing JavaScript and CSS directly inside the Script Editor web part as shown below:
5.  Organized the code into reusable modules so that multiple pages could use the same resources.

This approach kept the SharePoint pages clean while allowing the custom functionality and styling to load from centrally managed files.

Key Benefits

After implementing this solution, few advantages seen are as follows.

Centralized Maintenance - All JavaScript and CSS are maintained in dedicated files, making updates much easier.

Reusability - The same files can be reused across multiple SharePoint pages without duplicating code.

Cleaner Page Design - SharePoint pages contain minimal embedded code, making them easier to manage.

Faster Enhancements - Future changes require updating only the external JavaScript or CSS file rather than modifying every page individually.

Better Code Organization - Separating business logic and styling follows standard web development practices and improves readability.

This approach enabled team to continue delivering the required SharePoint customizations despite the platform's security restrictions, without requiring a complete redesign of the existing solution.

Wrap Up

Certainly, Microsoft's restrictions on custom scripts gives us more secure development practices, they can create challenges for projects that rely on lightweight client-side customizations. By moving JavaScript and CSS into external files and referencing them from SharePoint, it was easier to successfully maintain the required functionality in the project without a complete redesign. If you are facing similar limitations, this approach can serve as a practical and maintainable solution until a full migration to SharePoint Framework (SPFx) is required.