[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: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;

 }}}

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