No unsafe-inline vs Smush – Image Optimization, Compression, Lazy Load, WebP & CDN

Content Security Policy (CSP) is a computer security standard introduced to prevent cross-site scripting (XSS), clickjacking and other code injection attacks resulting from execution of malicious content in the trusted web page context. Cross-site scripting (XSS) is a type of security vulnerability that can be found in some web applications. XSS attacks enable attackers to inject client-side scripts into web pages viewed by other users. A cross-site scripting vulnerability may be used by attackers to bypass access controls like the same-origin policy. Looking at National Vulnerability Database run by US NIST, more than 1100 (November 2025) vulnerabilities are reported as XSS for WordPress’ plugins and themes. Keeping your site up-to-date with the latest versions of plugins and themes is the first line of defense to ensure your site’s security. The second thing to do, is to deploy a strict Content Security Policy. The main problem The main problem with Content Security Policies implemented in the real world is that they are too weak to really protect your site and that many of them can be trivially bypassed by an attacker. The proposed solution Google researchers recommend, instead of whole host whitelisting, to activate individual scripts via a CSP nonces approach. In addition, in order to facilitate the adoption of nonce-based CSP, they proposed the ’strict-dynamic’ keyword. The problem(s) with CSP in WordPress Manual creation of a policy Usually, a WordPress project is a mix of code written by different authors who contributed to the Core and or wrote plugins and themes. If it is possible to whitelist every external script loaded from a , the real truth is that in a WordPress project you can have dozens of those scripts included with your plugins and calculate a cryptographic hash for each of them to be included in your CSP header can be a frustrating job. However, there are many browser extensions and WordPress’ plugins that can help you in this job. Inline scripts WordPress core, and plugins, use inline scripts. For these scripts, you can compute hashes to be inserted manually into your policy, only if these scripts do not change at any page load. Unfortunately, this is not very common, as it is frequent to include variable values calculated server side in inline scripts. And it means that your inline scripts change too frequently to manually add their hashes to your policy. This commonly happens when scripts are “localized”. WordPress has no API to implement nonces for CSP Even if it is easy to generate a nonce for each page view, this nonce has to be inserted in every script tag used to embed inline scripts in your page as doWhatever(); and in your script-src directive: script-src 'nonce-rAnd0m'; And, of course, a nonce must be unique for each HTTP response. Unsafe hashes / Inline styles Sometimes, HTML elements as images or buttons use HTML Event Attributes (onclick, onsubmit…) to let events trigger actions in a browser. You cannot use hashes or nonces for script included in event attributes and, adopting a strict CSP, requires refactoring those patterns into safer alternatives or to use ‘unsafe-hashes’. You got a similar problem when inline styles are used in HTML tags: This is a heading This is a paragraph. CSP Level 2 browsers may be ok with just putting the hash in your style-src directive. However, to allow hashes in the style attribute on inline CSS on browsers that support CSP Level 3, you may get an error like this Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'sha256-nMxMqdZhkHxz5vAuW/PAoLvECzzsmeAxD/BNwG15HuA='". Either the 'unsafe-inline' keyword, a hash ('sha256-nMxMqdZhkHxz5vAuW/PAoLvECzzsmeAxD/BNwG15HuA='), or a nonce ('nonce-...') is required to enable inline execution. To allow inline styles you need to use ‘unsafe-hashes’ in your style-src directive (that is, in facts, unsafe). ^ This plugin approach This plugin affords those problems in this way: During a capture phase, it detects the scripts, styles and other embedded content present in the pages of your site and stores them in the database. Then you have to whitelist these contents from plugin admin. The plugin uses machine learning to cluster inline scripts trying to aggregate scripts generated by the same server side (PHP) code. So, you can authorize one script example to authorize all scripts that the classifier predicts to label as whitelisted clusters. You can choose to use hashes to authorize external scripts (and the plugin will allow you to include Subresource Integrity in your and ) You can use hashes or nonces to authorize inline scripts. You can ask the plugin to refactor your page to not use event attributes (converted in a inline script) and inline styles (converted in an internal CSS). You can set one or more violations’ report endpoints. The plugin supports multisite installations and has (too) many options documented in inline help. Creating a Content Security Policy After plugin activation, go to Settings menu and search for CSP Settings submenu. The steps you are supposed to do are the following. From the Tools tab, activate the capture of the tags and use your site by visiting all the pages or having your users visit them for a long time long period based on the use of your site (hours or days). From the Tools tab, perform the data clustering in the database (it can use many server resources). Go to the Base rules tab and include in the CSP directives the desired values ​​(help you with the table at the bottom of the page). Go to the external scripts tab, inline scripts tab and scripts invoked by event handlers tab and authorize the execution of all the legitimate scripts present on the pages of your site. Leaving the tag capture active, activate the policy test (at this stage the plugin will generate some violations of the temporary policy used to record additional values to be included in the directives of your “content security policy”). After visiting again your site pages, disable the capture of the tags and repeat the previous steps 2, 3 and 4. Enable site protection. N.B. When you update plugins or themes, if something doesn’t work properly on your site pages, temporarily deactivate the protection and repeat steps 1 to 7. Plugin hooks Filters nunil_output_csp_headers_header_csp nunil_output_csp_headers_header_csp is available since version 1.2.3 and can be used to modify the Content-Security-Policy header before it is sent to browser no_unsafe_inline_not_sri_sources no_unsafe_inline_not_sri_sources can be used to modify the list of external resources that do not support SRI (Subresource Integrity) no_unsafe_inline_final_output no_unsafe_inline_final_output is an internal filter used to manipulate the output of the WordPress process just before the output is sent to the browser. no_unsafe_inline_meta_injector no_unsafe_inline_meta_injector is an internal filter hook used to inject meta http-equiv=”Content-Security-Policy” if variable is set Actions nunil_upgrade Functions hooked on nunil_upgrade will run when the plugin is upgraded nunil_output_csp_headers Functions hooked to nunil_output_csp_headers will run when the plugin output the CSP HTTP response header Code and libraries This version of the plugin uses: * to parse HTML: * ivopetkov/HTML5DOMDocument on PHP 2.13.09 * \Dom\HTMLDocument: The new ext-dom features with HTML5 support on PHP>8.4 * RubixML for machine learning from version 1.1.0 – PHP-ML was used in versions 1.0.x; * opctim/php-nilsimsa to calculate and compare Nilsimsa digests. The log functions have been taken from * perfectyorg/perfecty-push-wp, something you should really try if you want to implement web Push notifications in your site. The complete list of dependencies used in this plugin can be seen in dependency graph on GitHub. Contributions, Issues, Bugs Plugin code is hosted on a public repository on GitHub. Reach me over there to help and suggest.

Compress images, optimize images, and enable image lazy load automatically with the powerful Smush image optimizer to keep your WordPress site fast, without losing quality. Smush makes it easy to optimize images, compress images, and deliver images faster across your entire WordPress site. This all-in-one image optimizer automatically reduces image file sizes, enables image lazy load, and serves modern formats like WebP and AVIF, all without breaking image quality or adding extra work. Whether you’re running a blog, store, or portfolio, Smush helps you optimize images at scale and keep your site fast with a trusted WordPress image optimizer. Trusted by 1+ Million Sites | 4.8/5 Star Rating Get everything you need to optimize images and speed up your site. Smush works out of the box with no complicated setup – just install and let it handle the rest. Compress images without losing quality Reduce image file size automatically while keeping your images sharp and clear. Smush is an easy-to-use image optimizer which let’s you compress images using both lossless and lossy compression, giving you the best balance of quality and performance without extra work. You can also compress images outside the media library using Directory Smush, making it easy to optimize images stored in theme folders, plugins, or other directories on your server. Lazy load images for faster pages Enable image lazy load across your site so images load only when needed. This image optimizer improves initial page speed and creates a smoother experience for visitors without extra configuration. Serve WebP and AVIF images automatically (PRO) Convert images to WebP and AVIF and serve them automatically to supported browsers. Smush helps you optimize images using next-gen formats to reduce file size and improve load times across your WordPress site. Deliver images faster with an Image CDN (PRO) Serve images through a global image CDN to reduce latency and improve load times for visitors around the world. 119 global CDN servers Up to 500 GB of bandwidth Faster image delivery based on visitor location Improved performance for image-heavy and high-traffic sites Automatically resize and fix image dimensions (PRO) Eliminate common PageSpeed warnings and improve layout stability with automatic image sizing. Smush dynamically resizes images to perfectly fit their containers, regardless of original size, helping fix the “Properly size images” warning in Google PageSpeed Insights. It also automatically adds missing width and height attributes to your images, improving rendering speed and reducing layout shifts. This helps you meet the “Ensure images have explicit width and height” recommendation without any manual work. Optimize your entire site, automatically Smush works across your whole site as a powerful image optimizer to optimize images as you upload them and maintain performance over time without manual work. Optimize images automatically on upload Compress images in bulk or individually Works with your existing media library No need to re-upload images Enable image lazy load across your site Convert images to WebP and AVIF Deliver images with an integrated image CDN Automatically resize and serve correctly sized images Optimize images outside the media library with Directory Smush Built for performance Smush improves page speed and overall performance by reducing image weight and improving how images are delivered. Reduce page load times Improve user experience Better performance for image-heavy pages Supports image lazy load and preload images (PRO) for faster perceived performance Works with your existing setup Smush is built to work with your current WordPress setup, including popular themes, page builders, and plugins. Compatible with Gutenberg, Elementor, WPBakery, and more Works with WooCommerce stores No need to change your workflow Easy to enable and configure Designed to be simple You don’t need to be a performance expert to optimize images with Smush image optimizer. Works out of the box Simple settings when you need them No technical knowledge required Safe to use on any site Why choose Smush? There are plenty of image optimization plugins, but Smush focuses on making it easy to optimize images, compress images, and improve performance without complexity. As a leading WordPress image optimizer, Smush gives you powerful optimization tools without the technical hassle. Trusted by over 1 million WordPress users Built specifically for WordPress Regular updates and improvements Backed by the WPMU DEV team Get started in minutes Install Smush, activate it, and start to compress images, optimize images, and enable image lazy load right away. This easy-to-use image optimizer helps most sites see improvements immediately without changing how they upload or manage images. About Us WPMU DEV is a premium supplier of quality WordPress plugins, services and support. Learn more here: https://wpmudev.com/ Don’t forget to stay up to date on everything WordPress from the Internet’s number one resource: WPMU DEV Blog Hey, one more thing… we hope you enjoy our free offerings as much as we’ve loved making them for you! Contact and Credits Originally written by Alex Dunae at Dialect (dialect.ca, e-mail ‘alex’ at ‘dialect dot ca’), 2008-11.