提醒：本文最後更新於 1185 天前，文中所描述的資訊可能已發生改變，請謹慎使用。

我的部落格之前一直部署在 Linode，使用 Disqus 提供的評論服務。Disqus 作為第三方社會化評論的鼻祖，無論功能還是體驗，都堪稱完美。雖然之前 Disqus 經常載入失敗，我也一直在堅守。最近我的 Linode 持續無法訪問，幾番折騰之後還是換到國內雲主機並備案了。藉著這次機會，我也把評論從 Disqus 遷移到了國內的多說。多說官方對 HTTPS 的支援並不完美，本文記錄我對它的幾處改造。

Disqus 和多說都是根據指定 ID 進行評論聚合的第三方系統，將頁面上 Disqus 的引用程式碼換成多說的程式碼，再按照文件改改引數，評論功能就遷移完成了。資料遷移可以使用前人造好的輪子，例如 Github 上的

我的網站配置了 CSP 策略，需要把多說用到的域名配置到白名單之中。以下是本站 CSP 全部規則：

content-security-policy: default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' blob: https://*.duoshuo.com; img-src 'self' data: https://*.duoshuo.com; style-src 'self' 'unsafe-inline' https://*.duoshuo.com; connect-src wss://*.duoshuo.com:* https://*.duoshuo.com
 

多說的種子檔案支援 HTTPS，直接把官方地址替換為 HTTPS 即可。但多說有幾個地方沒考慮周到，需要額外處理：1）使用者頭像，多說支援多種第三方登入方式，使用者頭像也支援使用了第三方地址，而這些地址基本都是 HTTP；2）表情，在多說選擇表情的浮層中，只有 wordpress 分組中的表情放在多說伺服器上並支援 HTTPS，其餘分組全部直接使用了 Sina 微博的 HTTP 地址。另外多說評論正文中的表情，也需要替換為 HTTPS 地址。

要解決使用者頭像問題，可以借用本站 HTTPS 做一個反向代理。我在 Nginx 配置增加了以下內容：

proxy_cache_path    /home/xxx/proxy_cache_path levels=1:2 keys_zone=pnc:300m inactive=30d max_size=10g;
proxy_temp_path     /home/xxx/proxy_temp_path;
proxy_cache_key     $host$uri$is_args$args;

server {
    ... ...

    location ~ ^/proxy/(\w+\.)(bdimg\.com|cdncache\.org|douban\.com|gravatar\.com|qlogo\.cn|sinaimg\.cn|xnimg\.cn)(\/.*)$ {
        valid_referers blocked server_names;
        if ($invalid_referer) {
            return 403;
        }

        proxy_connect_timeout    10s;
        proxy_read_timeout       10s;

        proxy_pass               http://$1$2$3;

        proxy_cache              pnc;
        proxy_cache_valid        200 30d;
        proxy_cache_lock         on;
        proxy_cache_lock_timeout 5s;
        proxy_cache_use_stale    updating error timeout invalid_header http_500 http_502;

        add_header               X-Cache "$upstream_cache_status from cache.ququ";

        expires                  max;
    }

    location ~ ^/proxy/(.*)$ {
        valid_referers blocked server_names;
        if ($invalid_referer) {
            return 403;
        }

        rewrite       ^.*$ /static/img/blog/default_avatar.png last;
    }

    ... ...
}
 

以上配置做了幾件事情：1）針對白名單中的 URL 做了反向代理，針對白名單之外的 URL 輸出預設頭像；2）通過 Nginx 的 proxy_cache 以及 HTTP 的快取機制，增加訪問速度；3）針對這個 proxy 服務啟用了嚴格的 referer 限制（空 referer 都不允許）。

有了反向代理之後，可以對多說的 embed.js 動手術了。我沒有找到無侵入的補丁方式，只能粗暴地將官方 embed.js 託管在本站進行修改。一共修改了以下幾處（為了看得更清楚，我加入的程式碼放在註釋裡）：

avatarUrl: function(e) {
    /*
    if (e.avatar_url) {
        e.avatar_url = e.avatar_url.replace(/^http\:\/\//, "https://imququ.com/proxy/");
    } else {
        nt.data.default_avatar_url = '/static/img/blog/default_avatar.png';
    }
    */

    return e.avatar_url || nt.data.default_avatar_url
}

這處修改，是讓多說使用者頭像走前面配置的 proxy 服務。對於無頭像使用者，我直接返回了預設頭像地址，減少一次 proxy。

addSmilies = function(e, t) {
    /*
    if(e !== 'WordPress') return;
    */

    var s = j.smiliesTooltip;
    s && s.el.find("ul.ds-smilies-tabs").append("<li><a>" + e + "</a></li>"), j.smilies[e] = t
}

這處修改，是讓多說不載入 Wordpress 之外的分組表情。由於只剩下一個分組，所以表情浮層樣式我也微調了一下，具體效果請看本文評論（實際上，多說評論的樣式我改了好多處）。將 Sina 微博表情替換為 proxy 地址，或者是傳到支援 HTTPS 的 CDN 也可以，但我覺得沒有必要。如果圖省事，也可以直接在多說後臺關閉評論表情功能。

var t = "",
    s = e.post,
    i = e.options,
    r = s.author;

/*
s.message = s.message.replace(/http:\/\/static\.duoshuo\.com\//g, 'https://static.duoshuo.com/');
*/

if (t += '<li class="ds-post" data-post-id="' + s.post_id + '">...'){
    ...
}

這處修改，是將評論內容中的表情地址由 HTTP 替換為 HTTPS。

經過以上處理，多說評論所需資源全部會走 HTTPS 了。由於多說程式碼會更新，本文具有一定的時效性，大家可以參考我的做法自行修改，不要照搬程式碼。

最後，我在遷移 Disqus 到多說的過程中，參考了以下兩篇文章，在此表示感謝：

注：一番折騰之後，我還是迴歸了 Disqus，詳情請見 »

--EOF--

發表於 2015-09-27 12:46:09 ，並被新增「 QuQuBlog 」標籤 ，最後修改於 2015-10-14 01:28:24 。檢視本文 Markdown 版本 »

提醒：本文最後更新於 1185 天前，文中所描述的資訊可能已發生改變，請謹慎使用。