WP customizer + gulp + browsersync = refused to display in iframe?

by

I’m using gulp & browserSync for server in WP development: 

gulp.task('browser-sync', function () {
    browserSync.init({
        proxy: projectURL
    });
});

WordPress runs on localhost:3000/mysite

There is also a watch task that detects changes in php and reloads browser.

For some reason though WP customizer doesn’t load site in iframe with the following error: 

Refused to display 'http://localhost:3000/mysite/2012/01/07/template-sticky/?customize_changese…10a90359901&customize_theme=mysite&customize_messenger_channel=preview-0' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors http://localhost".

It works fine http://localhost/mysite without the port though, but won’t reload automatically.

Is there a way to fix this somehow?

3 Answers
3

Found a work around by adding ‘ localhost:3000’ to the ‘Content-Security-Policy’ header:

function edit_customizer_headers () {
  function edit_csp_header ($headers) {
    $headers['Content-Security-Policy'] .= ' localhost:3000';
    return $headers;
  }
  add_filter('wp_headers', 'edit_csp_header');
}
add_action('customize_preview_init', 'edit_customizer_headers');

Leave a Comment