Performance Optimization

Performance Optimization

CSP can impact performance if not implemented carefully. Here's how to optimize CSP for WordPress sites:

// CSP Performance Optimizer
class WP_CSP_Performance {
    private $cache_key = 'wp_csp_compiled_policy';
    private $cache_duration = 3600; // 1 hour
    
    public function __construct() {
        add_filter('wp_csp_policy', [$this, 'get_cached_policy'], 1);
        add_action('wp_csp_policy_updated', [$this, 'clear_cache']);
    }
    
    public function get_cached_policy($policy) {
        // Check if we have a cached policy
        $cached = wp_cache_get($this->cache_key);
        
        if ($cached !== false) {
            return $cached;
        }
        
        // Generate and cache the policy
        $compiled_policy = $this->compile_policy($policy);
        wp_cache_set($this->cache_key, $compiled_policy, '', $this->cache_duration);
        
        return $compiled_policy;
    }
    
    private function compile_policy($policy) {
        // Optimize policy by removing duplicates and sorting
        foreach ($policy as $directive => &$sources) {
            $sources = array_unique($sources);
            sort($sources);
        }
        
        return $policy;
    }
    
    public function clear_cache() {
        wp_cache_delete($this->cache_key);
    }
}

// Lazy loading for CSP resources
class WP_CSP_Lazy_Loader {
    public function __construct() {
        add_action('wp_footer', [$this, 'inject_lazy_loader']);
    }
    
    public function inject_lazy_loader() {
        ?>
        <script nonce="<?php echo wp_create_nonce('csp_lazy'); ?>">
        // Lazy load external resources with CSP compliance
        (function() {
            const lazyCSPLoader = {
                loadScript: function(src, nonce) {
                    const script = document.createElement('script');
                    script.src = src;
                    if (nonce) script.nonce = nonce;
                    script.async = true;
                    document.body.appendChild(script);
                },
                
                loadStyle: function(href, nonce) {
                    const link = document.createElement('link');
                    link.rel = 'stylesheet';
                    link.href = href;
                    if (nonce) link.nonce = nonce;
                    document.head.appendChild(link);
                }
            };
            
            window.wpCSPLoader = lazyCSPLoader;
        })();
        </script>
        <?php
    }
}

Implementing CSP on WordPress requires careful consideration of the platform's unique characteristics and ecosystem. By following this guide and using the provided code examples, you can create a robust CSP implementation that enhances security while maintaining the flexibility that makes WordPress popular. Remember to test thoroughly, monitor violations, and adjust your policy based on real-world usage patterns. With patience and systematic implementation, CSP can significantly improve your WordPress site's security posture against XSS and other injection attacks.## Content Security Policy for React Applications

React applications present unique challenges and opportunities for Content Security Policy implementation. The framework's component-based architecture, virtual DOM manipulation, and build tooling require specific CSP considerations that differ from traditional server-rendered applications. This comprehensive guide addresses React-specific CSP implementation strategies, providing solutions for common issues while maintaining the security benefits that CSP provides.