If you are grappling with issues in your WordPress site, particularly after a recent update, you’re not alone. Many WordPress users encounter unexpected problems after updating their CMS. In this blog, we’ll delve into a specific issue that arises post-update and explore how to resolve it effectively.

My own encounter with this issue happened right after I updated my WordPress to version 6.3.1. It was a perplexing situation: the “Create New Post” feature was malfunctioning, displaying an error message without any visible content. Determined to find a solution, I embarked on a journey of investigation.

Through meticulous inspection of network logs and the browser console, and after some thorough research, the root cause of the problem became clear: Content Security Policy (CSP). In this article, we will unravel the mysteries surrounding CSP and, most importantly, how to address and overcome CSP-related issues in WordPress. So, let’s dive in and demystify Content Security Policy.

What is Content Security Policy (CSP)

Think of the internet as a big, bustling city with lots of people and places. Now, imagine you’re the owner of a shop in this city, and you want to make sure that only safe and trusted customers can come inside. You don’t want any troublemakers or thieves getting in.

Content Security Policy is like the set of rules you create for your shop. These rules specify who is allowed to enter and what they can do once they’re inside. For example:

1. You might have a rule that says, “Only people with an ID card issued by the city government can enter.” This ensures that everyone who comes in is verified and safe.
2. You might also have a rule that says, “No one is allowed to bring big bags inside.” This prevents people from hiding things they shouldn’t have.
3. Another rule could be, “Customers can look at the items on the shelves and buy them, but they can’t go into the storage area.” This limits what people can do inside your shop.

On the internet, websites and web applications use Content Security Policy to set similar rules. They specify who can interact with their site and what actions are allowed. This helps keep the website safe from malicious activities, like hacking or stealing information.

So, in simple terms, Content Security Policy is like the security rules for a website, making sure that only trusted and safe things happen when you visit it, just like the rules that keep your shop safe in a big city.

The Issue

By default, CSP permits the loading of scripts, images, and HTML using protocols like HTTP and HTTPS, which helps protect websites from various security threats.

With WordPress 6.3.1, a noteworthy change comes into play. The editor, responsible for creating and editing posts, utilizes the blob protocol. This protocol allows for dynamic, client-side generation of files and objects, enhancing user experience. However, the challenge arises because many server configurations disable the blob protocol by default. As a result, the editor may not function as expected.

Enabling Blob Protocol – Server Configuration

Enabling the blob protocol depends on your server configuration, which can vary from one hosting environment to another. In general, the solution involves configuring the server to include specific information in the CSP header. Here are the general steps:

1. Access Server Configuration: Depending on your hosting environment, you may need to access server settings. This often involves using a control panel or directly editing server configuration files.

For me this was a nginx server, so I have to edit the nginx/site-conf/default.conf file

add_header Content-Security-Policy "default-src * data: 'unsafe-eval' 'unsafe-inline'" always; // Before


add_header Content-Security-Policy "default-src * data: 'unsafe-eval' 'unsafe-inline'; frame-src 'self' blob:" always; //after

Modify CSP Header: Locate the Content Security Policy (CSP) settings in your server configuration. You’ll need to add or modify directives to allow the blob protocol. The exact directives can vary, but they typically involve specifying ‘blob:’ as an allowed source.

Save Changes: After making the necessary modifications, save your server configuration settings. This might require a server restart or configuration reload, depending on your hosting environment.

Testing: Once you’ve enabled the blob protocol in CSP, test the WordPress editor to ensure that it now functions smoothly. Create and edit posts to confirm that the issue has been resolved

Conclusion:

WordPress 6.3.1 brings exciting improvements, but the introduction of the blob protocol for the editor can pose challenges related to Content Security Policy. By understanding CSP and making the necessary adjustments to your server configuration, you can enable the blob protocol and ensure that your WordPress editing experience remains seamless. Remember that the exact steps may vary, so consult your hosting provider or server documentation for precise guidance on CSP configuration.