WordPress : WP customizer + gulp + browsersync = refusé d’afficher dans iframe ?

J’utilise gulp & browserSync pour le serveur dans le développement WP :

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

WordPress fonctionne surlocalhost:3000/mysite

Il existe également une tâche de surveillance qui détecte les changements dans php et recharge le navigateur.

Pour une raison quelconque, le personnalisateur WP ne charge pas le site dans l’iframe avec l’erreur suivante :

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".

Cela fonctionne bien http://localhost/mysitesans le port, mais ne se rechargera pas automatiquement.

Existe-t-il un moyen de résoudre ce problème d’une manière ou d’une autre?

Solution n°1 trouvée

Peut-être qu’il est peut-être tard, mais j’ai récemment trouvé une solution avec un filtre :

function theme_set_url_scheme($url, $path, $blog_id){
    if(isset($_GET["wp_port"])){
      $parsed_url = parse_url($url);
      $parsed_url["port"] = intval($_GET['wp_port']);
      $scheme   = isset($parsed_url['scheme']) ? $parsed_url['scheme'] . '://' : '';
      $host     = isset($parsed_url['host']) ? $parsed_url['host'] : '';
      $port     = isset($parsed_url['port']) ? ':' . $parsed_url['port'] : '';
      $user     = isset($parsed_url['user']) ? $parsed_url['user'] : '';
      $pass     = isset($parsed_url['pass']) ? ':' . $parsed_url['pass']  : '';
      $pass     = ($user || $pass) ? "$pass@" : '';
      $path     = isset($parsed_url['path']) ? $parsed_url['path'] : '';
      $query    = isset($parsed_url['query']) ? '?' . $parsed_url['query'] : '';
      $fragment = isset($parsed_url['fragment']) ? '#' . $parsed_url['fragment'] : '';
      $url = "$scheme$user$pass$host$port$path$query$fragment";
    }
    return $url;
}
add_filter("admin_url", "theme_set_url_scheme', null, 3);

Et puis ouvrez le personnalisateur en ajoutant cette variable de chaîne de requête à la fin :

&wp_port=3000

J’ai essayé de le faire sans ajouter le paramètre querystring, mais je suppose que browsersync redirige les appels vers le port 80 du serveur, de sorte que le port personnalisé 3000 n’est visible que via le navigateur et la synchronisation du navigateur.

Meilleure option :

Ajoutez le paramètre querystring à la configuration de browsersync comme ceci :

options: {
    proxy: 'wordpress.dev?wp_port=3000',
}

Vous n’avez donc rien à faire manuellement. Cela fonctionne hors de la boîte.

Solution n°2 trouvée

Trouvé une solution en ajoutant ‘ localhost:3000’ à l’en-tête ‘Content-Security-Policy’ :

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');

Solution n°3 trouvée

Il serait peut-être préférable de modifier votre script gulp dans une variante de l’astuce de ce rapport de bogue https://github.com/BrowserSync/browser-sync/issues/1241

Pirater les fichiers php source sur lesquels vous travaillez pour que cela fonctionne semble … moins bon.