Recientemente tomé Programar Plus”HTTPS en todas partes”. Es decir, cada URL de este sitio aplica el protocolo HTTPS (SSL). Las solicitudes HTTP no seguras se redirigen a HTTPS. Aquí hay algunas notas sobre ese viaje.
¿Por que hacerlo?
- Seguridad general. Cuando aplica HTTPS, está garantizando que ninguna información transmitida entre el servidor y el cliente pueda ser interceptada, robada o manipulada de ninguna manera. Eso es genial para un sitio como este que tiene un sistema de inicio de sesión y acepta tarjetas de crédito en algunos lugares y cosas así.
- El sitio como está previsto. He oído hablar de ejemplos como el sistema WiFi de hoteles e incluso los ISP que se meten con el tráfico HTTP y hacen cosas como insertar su propio código publicitario. No se puede hacer eso a través de HTTPS.
- SEO. Google dice que obtendrás una clasificación más alta. Boca de caballo.
- Prereq. Parece que no puedo encontrar ningún enlace bueno en esto, pero supongo que se requiere HTTPS para algunas / todas las cosas para SPDY / HTTP / 2, que todos están de acuerdo en que es increíble y súper rápido. Quiero asegurarme de estar listo para poder comenzar a avanzar en eso.
- Credito friki. Duh.
1. Obtenga un certificado SSL
No es opcional. Así es como funciona. He hecho esto muchas veces en mi vida y nunca es demasiado cómodo. Solo necesita seguir las instrucciones de cerca. Los compré en el pasado a proveedores de descuento y de hecho funcionó bien, pero es un proceso más manual.
Programar Plusestá felizmente en Media Temple, y brindan SSL como servicio, y estoy más que feliz de pagar por eso para que los profesionales lo instalen sin problemas.
Cuando el certificado SSL esté instalado correctamente, debería poder visitar su sitio (cualquier URL) en HTTP o HTTPS y hacer que funcione correctamente. Sin embargo, puede haber errores en HTTPS y llegaremos a eso.
2. Comience con el administrador
En WordPress-land, es mejor que primero ponga HTTPS en el área de administración. Está configurado para manejarlo y probablemente no habrá ningún error. (Sigo diciendo “errores”, me refiero principalmente a “advertencias de contenido mixto”, a las que prometo que llegaremos).
Para forzar HTTPS en el área de administración, coloque esta línea en su archivo wp-config.php en la raíz de su instalación de WordPress:
define('FORCE_SSL_ADMIN', true);¡Primero asegúrese de probar que HTTPS funciona correctamente! Vaya a https://yoursite.com/wp-admin/ para comprobarlo. De lo contrario, forzará URL que no funcionan y eso es malo. Si tiene problemas, elimine esa línea de inmediato.
Todo va bien, obtendrás una conexión segura:
3. Intente que una página funcione en la interfaz
El siguiente paso es obtener su interfaz en HTTPS. Forzarlo todo de inmediato probablemente será difícil, así que comience con una página de destino. Para mí, fue la página de registro de The Lodge. Esa página puede aceptar tarjetas de crédito, así que realmente tenía que ser HTTPS. Este fue el motivador para mí desde el principio para configurar esta configuración.
Hay un complemento que puede ayudar con esto: WordPress HTTPS (SSL). Con ese complemento, obtienes una casilla de verificación en Publicaciones / Páginas para forzar que sea SSL.
4. Elimine las advertencias de contenido mixto
Lo que realmente estás tratando de evitar es esto:
Advertencia de contenido mixto
Eso es como: “¡Oye, qué bueno intentar ser HTTPS pero no lo eres del todo, así que NO HAY BLOQUEO VERDE PARA TI!”
Si abre la consola, es probable que reciba mensajes como este:
En este caso, se trataba de algunas imágenes que se estaban utilizando en una incrustación de CodePen con un src HTTP.
Pero podría ser cualquier cosa. HTTP <script>s, HTTP CSS <link>s, HTTP <iframe>s. Cualquier cosa que termine haciendo una solicitud HTTP que no sea HTTPS activará el error.
Solo necesitas arreglarlos. Todo.
5. ¡URL relativas al protocolo! (o solo URL relativas)
Ya sabes, esos que comienzan con //, así:
<img src="https://example.com/image.jpg" alt="image">Esos son tus amigos. Cargarán ese recurso con cualquier protocolo que sea la página actual. Y los enlaces que son solo relativos al principio estarán bien, como:
<img src="https://css-tricks.com/images/image.jpg" alt="image">Terminé encontrándolos por todos lados. Incluso tuve campos personalizados para corregir:
6. Problema más difícil: imágenes dentro de contenido heredado
Hay miles y miles de páginas en este sitio, y muchas, muchas imágenes dentro de esas páginas. Justo en el contenido mismo. Hay un montón en esta misma página que estás viendo. El problema es que esas imágenes tenían enlaces HTTP totalmente calificados en ellos.
No me gustó la idea de usar algún filtro de WordPress en el contenido para intercambiar un poco esas URL; solo quería solucionar el problema. Contraté a Jason Witt para que me ayudara con esto. Lo primero que hicimos fue ejecutar algo de SQL en la base de datos para arreglar las URL. Esencialmente arreglando el src de imágenes para que sean relativas al protocolo.
Después de hacer una copia de seguridad de la base de datos y probarla localmente, esto funcionó muy bien:
UPDATE wp_posts
SET post_content = ( Replace (post_content, 'src="http://', 'src="https://') )
WHERE Instr(post_content, 'jpeg') > 0
OR Instr(post_content, 'jpg') > 0
OR Instr(post_content, 'gif') > 0
OR Instr(post_content, 'png') > 0;Y otro para atrapar los de comillas simples, por si acaso:
UPDATE wp_posts
SET post_content = ( Replace (post_content, "src="http://", "src="https://") )
WHERE Instr(post_content, 'jpeg') > 0
OR Instr(post_content, 'jpg') > 0
OR Instr(post_content, 'gif') > 0
OR Instr(post_content, 'png') > 0;Incluso arreglamos los campos personalizados de la misma manera:
UPDATE wp_postmeta
SET meta_value=(REPLACE (meta_value, 'iframe src="http://','iframe src="https://'));7.Asegúrate de que las nuevas imágenes sean relativas al protocolo.
Con el contenido heredado eliminado, debemos asegurarnos de que el contenido nuevo se mantenga en buen estado. Eso significa arreglar la cosa del cargador / insertador de medios para que inserte imágenes con URL relativas al protocolo. Afortunadamente ya lo personalizo para insertarlo con <figure> etiquetas, por lo que fue solo un ajuste de eso. Jason finalmente me ayudó a mover una gran cantidad de mi código functions.php personalizado a un complemento, así que esto está un poco fuera de contexto, pero creo que obtendrás la imagen y verás los filtros relevantes y esas cosas:
class CTF_Insert_Figure {
/**
* Initialize the class
*/
public function __construct() {
add_filter( 'image_send_to_editor', array( $this, 'insert_figure' ), 10, 9 );
}
/**
* Insert the figure tag to attched images in posts
*
* @since 1.0.0
* @access public
* @return string return custom output for inserted images in posts
*/
public function insert_figure($html, $id, $caption, $title, $align, $url) {
// remove protocol
$url = str_replace(array('http://','https://'), '//', $url);
$html5 = "<figure id='post-$id' class="align-$align media-$id">";
$html5 .= "<img src="https://css-tricks.com/moving-to-https-on-wordpress/$url" alt="$title" />";
if ($caption) {
$html5 .= "<figcaption>$caption</figcaption>";
}
$html5 .= "</figure>";
return $html5;
}
}8. Su CDN también necesita SSL
Si tiene una CDN configurada (yo uso MaxCDN a través de W3 Total Cache), eso significa que la CDN es un servidor y una URL totalmente diferentes y todo eso, y también debe poder servir a través de HTTPS. Afortunadamente MaxCDN lo maneja.
9. Empiece a forzar HTTPS en todas partes
Esto es lo que hago en el archivo .htaccess en la raíz:
# Force HTTPS
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]Una vez que esté en su lugar, puede desactivar el complemento y eliminar el bit del archivo wp-config.php, ya que ahora son redundantes.
También querrá cambiar la configuración de URL en Configuración general para que sea https: //, por lo que todos los enlaces en WordPress se construyen correctamente y no es necesario que los redireccionamientos entren en juego:
10. Sigue limpiando
Inevitablemente, después de usar HTTPS en todas partes, encontrará páginas con advertencias de contenido mixto. Solo necesitas seguir investigando y arreglando.
¡Buena suerte! (y avísame si me he equivocado en algo)
¡Actualizar! Hablando de limpiar… La Política de seguridad de contenido (CSP) es una tecnología que podría ser increíblemente útil para usted aquí. Existe una directiva para ello, solicitudes de actualización inseguras, que pueden obligar al navegador a usar HTTPS para cualquier recurso HTTP que encuentre. Un poco como un mazo, pero podría ser muy útil.