[wp-trac] [WordPress Trac] #46301: Customizer iframe warning

[WordPress Trac]

#46301: Customizer iframe warning
-------------------------------+------------------------------
 Reporter:  mensmaximus        |       Owner:  (none)
     Type:  defect (bug)       |      Status:  new
 Priority:  normal             |   Milestone:  Awaiting Review
Component:  Customize          |     Version:  5.1
 Severity:  minor              |  Resolution:
 Keywords:  reporter-feedback  |     Focuses:
-------------------------------+------------------------------

Comment (by ermiuyo):

 Replying to [comment:5 ermiuyo]:
 > Replying to [comment:4 ermiuyo]:
 > > Replying to [comment:3 ermiuyo]:
 > > > Replying to [comment:2 ermiuyo]:
 > > > > The warning in the browser console is triggered because the
 preview iframe inside the WordPress Customizer (customize.php) is being
 loaded with both allow-scripts and allow-same-origin in its sandbox
 attribute. This combination allows scripts within the iframe to break out
 of the sandbox, which is a security concern. Additionally, the Content
 Security Policy (CSP) message indicates that x-frame-options is being
 ignored due to the presence of frame-ancestors.
 > > > >
 > > >
 > > > To confirm the issue, inspect the iframe element inside
 customize.php by using Developer Tools (right-click → Inspect). Look for
 the sandbox attribute inside the iframe. If it includes allow-scripts and
 allow-same-origin, that is the reason for the warning.
 > > >
 > > > Additionally, check the response headers of the previewed site using
 the Network tab to verify CSP and X-Frame-Options settings.
 > >
 > > Since WordPress controls the sandbox settings for security purposes,
 you may need to override or modify how the iframe loads. Try adding the
 following snippet to your theme’s functions.php to modify the Customizer
 behavior:
 > >
 > >
 > > {{{
 > > function remove_customizer_sandbox() {
 > >     add_filter('wp_customize_controls_print_scripts', function () {
 > >         echo '<script>
 > >             document.addEventListener("DOMContentLoaded", function() {
 > >                 let previewFrame = document.getElementById("customize-
 preview");
 > >                 if (previewFrame) {
 > >                     previewFrame.removeAttribute("sandbox");
 > >                 }
 > >             });
 > >         </script>';
 > >     });
 > > }
 > > add_action('customize_register', 'remove_customizer_sandbox');
 > > }}}
 > >
 >
 > If the issue persists, check the site's CSP settings. If frame-ancestors
 is defined, it overrides X-Frame-Options. Update the site's CSP headers to
 properly allow the WordPress Customizer:
 > If using .htaccess, add:
 >
 > {{{
 > Header set Content-Security-Policy "frame-ancestors 'self'
 https://yourwebsite.com;"
 >
 > }}}
 >
 > If using Nginx, modify the configuration:
 >
 > {{{
 > add_header Content-Security-Policy "frame-ancestors 'self'
 https://yourwebsite.com;" always;
 >
 > }}}
 >
 >

 After implementing the changes:

 1. Clear cache in WordPress and the browser.
 2. Reload the Customizer and check the browser console for warnings.
 3. Inspect the iframe again to ensure the sandboxing issue is resolved.
 4. If the issue persists, try debugging with a minimal theme or disabling
 conflicting plugins.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/46301#comment:6>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform