WordPress 4.4 – Régler le problème de mixed content en HTTPS sur l’attribut SRCSET
vendredi 18 décembre 2015 à 18:25J'ai rencontré un souci avec WordPress suite à la dernière mise à jour en 4.4. Lorsqu'on consulte le site en HTTPS, les images sont cassées... Après recherche, cela est dû à la nouvelle balise SRCSET mise en place par WordPress pour gérer les images en responsives.
Mes images étaient correctement appelées en HTTPS dans <img src="https://"> mais un peu plus loin, l'attribut srcset contenait que des liens en HTTP.
<img src="./media/5cfd3573.monimage.png" data-original-source="https://korben.info/monimage.png" srcset="http://korben.info/monimage.png 650w...">
Cela avait donc la fâcheuse tendance à provoquer des erreurs de contenu mixé, visible dans la console de mon navigateur.
This request has been blocked; the content must be served over HTTPS.
En grattant un peu, j'ai donc trouvé une fonction qui permet de régler le souci. Il vous suffit d'ajouter ceci dans le fichier functions.php de votre thème.
function ssl_srcset( $sources ) {
foreach ( $sources as &$source ) {
$source['url'] = set_url_scheme( $source['url'] );
}
return $sources;
}
add_filter( 'wp_calculate_image_srcset', 'ssl_srcset' );
Et voilà ! Cela utilise tout simplement l'URL de la page comme référent pour srcset. Si vous êtes en HTTPS, le contenu de srcset sera en HTTPS. Et si vous êtes en HTTP, le contenu de srcset sera en HTTP.
Apparemment, pour ceux qui ont le plugin Cloudflare installé, la fonction diffère un peu. Rassurez-vous, Cloudflare a été informé du souci et intégrera ce correctif dans la prochaine version de son plugin. Donc vous pouvez simplement attendre la mise à jour. Néanmoins, pour les plus pressés, ajoutez ceci dans votre fichier functions.php :
function cloudflare_ssl_srcset( $sources ) {$cloudflare_protocol_rewrite = load_protocol_rewrite();
if ($cloudflare_protocol_rewrite == 1) {
foreach ( $sources as &$source ) { $source['url'] = set_url_scheme( $source['url'] );
}return $sources;
} else {
foreach ( $sources as &$source ) { $sources;
}return $sources;
} }
add_filter( 'wp_calculate_image_srcset', 'cloudflare_ssl_srcset' );
