在 WordPress 上迁移到 HTTPS

我最近将 CSS-Tricks 迁移到了“全面 HTTPS”。也就是说，此网站上的每个 URL 都强制使用 HTTPS（SSL）协议。不安全的 HTTP 请求将重定向到 HTTPS。以下是一些关于此旅程的笔记。

为什么要这么做？

• 通用安全。当您强制执行 HTTPS 时，您保证了在服务器和客户端之间传递的任何信息都不会被拦截和窃取或以任何方式被篡改。对于像这样的拥有登录系统并在某些地方接受信用卡等的网站来说，这非常棒。
• 按预期显示网站。我听说过一些例子，比如酒店 WiFi 系统甚至 ISP 会干扰 HTTP 流量，并执行诸如插入自己的广告代码等操作。在 HTTPS 上无法做到这一点。
• 搜索引擎优化。谷歌表示您的排名会更高。 马嘴上的话。
• 先决条件。我似乎找不到任何关于此方面的好的链接，但我假设 HTTPS 是 SPDY/HTTP/2 的某些/所有内容所必需的——每个人都认为它很棒并且 超级快。我想确保我已做好准备，以便可以开始推进此项工作。
• 极客信誉。当然。

1. 获取 SSL 证书

不是可选的。这就是它的工作原理。我一生中做过很多次了，而且从来都不太舒服。您只需要仔细遵循说明即可。我过去曾从折扣提供商那里购买过它们，并且实际运行效果很好，但这是一个更手动流程。

CSS-Tricks 很高兴地使用 Media Temple，他们 提供 SSL 作为一项服务，我非常乐意为此付费，以便由专业人员轻松安装。

正确安装 SSL 证书后，您应该能够在HTTP 或HTTPS 上访问您的网站（任何 URL）并使其正常显示。但是，HTTPS 上可能会出现错误，我们将在后面介绍。

2. 从管理区域开始

在 WordPress 世界中，您不妨首先在管理区域启用 HTTPS。它 已设置为处理它，并且可能不会出现任何错误。（我一直说“错误”，我主要指的是“混合内容警告”，我保证我们会讲到。）

要在管理区域强制使用 HTTPS，请将此行添加到 WordPress 安装根目录下的 wp-config.php 文件中

define('FORCE_SSL_ADMIN', true);

请务必先测试 HTTPS 是否正常工作！转到 https://yoursite.com/wp-admin/ 进行检查。否则，您将强制使用无法正常工作的 URL，这很糟糕。如果遇到问题，请立即删除该行。

一切顺利，您将获得安全连接

3. 尝试使前端的一个页面正常工作

下一步是使您的前端使用 HTTPS。立即强制执行所有内容可能会很困难，因此只需从一个目标页面开始。对我来说，它是 The Lodge 的注册页面。该页面可以接受信用卡，因此实际上，它必须是 HTTPS。这是我早期设置此功能的动力。

有一个插件可以帮助您解决此问题：WordPress HTTPS（SSL）。使用此插件，您可以在帖子/页面上获得一个复选框以强制其使用 SSL。

4. 清理混合内容警告

您真正要避免的是

就像：“嘿，尝试使用 HTTPS 很不错，但您还没有完全做到，所以您没有绿色锁！”

如果您打开控制台，您可能会收到类似这样的消息

在这种情况下，是在 CodePen 嵌入中使用了一些带有 HTTP src 的图像。

但它可能是任何东西。HTTP <script>、HTTP CSS <link>、HTTP <iframe>。任何最终发出非 HTTPS 的 HTTP 请求都会触发错误。

您只需要修复它们。全部。

5. 协议相对 URL！（或仅相对 URL）

您知道，那些以 // 开头的 URL，例如

<img src="//example.com/image.jpg" alt="image">

它们是您的朋友。它们将使用当前页面的任何协议加载该资源。并且以相对方式开始的链接将没问题，例如

<img src="/images/image.jpg" alt="image">

我最终在各处都发现了它们。我甚至需要修复自定义字段

6. 更难的问题：旧内容中的图像

此网站上有数千页内容，以及这些页面中的大量图像。就在内容本身中。您正在查看的此页面上就有很多。问题是这些图像在其上具有完全限定的 HTTP 链接。

我不喜欢使用 WordPress 内容上的某些过滤器来对这些 URL 进行某种热交换的想法——我只是想解决这个问题。我聘请了 Jason Witt 来帮助我解决此问题。我们首先做的是在数据库上运行一些 SQL 来修复 URL。本质上是将图像的src修复为协议相对的。

备份数据库并在本地测试后，这非常有效

UPDATE wp_posts 
SET    post_content = ( Replace (post_content, 'src="http://', 'src="//') )
WHERE  Instr(post_content, 'jpeg') > 0 
        OR Instr(post_content, 'jpg') > 0 
        OR Instr(post_content, 'gif') > 0 
        OR Instr(post_content, 'png') > 0;

以及另一个用于捕获单引号，以防万一

UPDATE wp_posts 
SET   post_content = ( Replace (post_content, "src='http://", "src='//") )
WHERE  Instr(post_content, 'jpeg') > 0 
        OR Instr(post_content, 'jpg') > 0 
        OR Instr(post_content, 'gif') > 0 
        OR Instr(post_content, 'png') > 0;

我们甚至以几乎相同的方式修复了自定义字段

UPDATE wp_postmeta 
SET meta_value=(REPLACE (meta_value, 'iframe src="http://','iframe src="//'));

7. 确保新图像为协议相对的

清理旧内容后，我们需要确保新内容保持正常。这意味着修复媒体上传/插入工具，以便它使用协议相对 URL 插入图像。幸运的是，我已经自定义了它以使用<figure>标签插入，因此这只是一个调整。Jason 最终帮助我将许多自定义 functions.php 代码移到了一个插件中，因此这有点脱离上下文，但我认为您会明白并看到相关的过滤器和内容

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='$url' alt='$title' />";
    if ($caption) {
        $html5 .= "<figcaption>$caption</figcaption>";
    }
    $html5 .= "</figure>";
    return $html5;
  }
}

8. 您的 CDN 也需要 SSL

如果您设置了 CDN（我通过 W3 Total Cache 使用 MaxCDN），这意味着 CDN 是完全不同的服务器和 URL 以及所有这些，它也需要能够通过 HTTPS 提供服务。幸运的是，MaxCDN 处理它。

9. 开始强制使用 HTTPS

这是我在根目录下的 .htaccess 文件中所做的操作

# Force HTTPS
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

一旦设置完成，就可以关闭插件并从 wp-config.php 文件中删除相关部分，因为现在它们已经冗余了。

您还需要将“常规设置”中的 URL 设置更改为 https:// - 这样 WordPress 中的所有链接都将被正确构建，并且不需要进行重定向。

10. 持续清理

不可避免地，在所有内容都转向 HTTPS 后，您会发现一些页面会出现混合内容警告。您只需要持续调查并修复这些问题。

祝您好运！（如果我弄错了什么，请告诉我）

---

更新！说到清理……内容安全策略 (CSP) 可能是非常有帮助的技术。它有一个指令，upgrade-insecure-requests，可以强制浏览器对发现的任何 HTTP 资源使用 HTTPS。这有点像一锤定音，但可能非常有用。