我不生产代码
我只是代码的搬运工

多说社会评论组件支持https

在最新的chrome中,如果打开的网页不是使用的https,则会地址拦左侧提示不安全,由于有强迫症,所以开启了https。当开启https后发现,有的网页不会显示那个绿色的小锁的安全图标。通过查看资料,发现是因为网页中使用了多说社会评论组件,评论组件中使用的用户头像和表情都是使用的http而不是https,通过查看多说的开发文档,并没有看到关于这个问题的解决办法,所以感觉多说对这个支持的不是特别好。

由于没看到官方的解决办法,所以只有自己解决了。通过查看页面中加载的头像,确实是使用的http:

QQ截图20170304211819.png

由于头像本身支持https,所以只需将头像地址改为https即可,可以通过下面步骤修改:

1、将引用多说服务器上的js文件 embed.js下载到本地并通过如下方式引入:

<script type="text/javascript" src="js/embed.js"></script>

2、由于下载的js文件是压缩的,所以需要转成可读格式的文件以后于修改,可经过第三方网站进行格式化,如:http://tool.oschina.net/codeformat/js/

3、在embed.js文件中找到如下内容:

avatarUrl: function(e) {
    return e.avatar_url || rt.data.default_avatar_url
},

将其修改为:

avatarUrl: function(e) {
    if (e.avatar_url) {
        e.avatar_url = e.avatar_url.replace(/^http:\/\//, 'https://');
    } else if (rt.data.default_avatar_url) {
        rt.data.default_avatar_url = rt.data.default_avatar_url.replace(/^http:\/\//, 'https://');
    }
    return e.avatar_url || rt.data.default_avatar_url
},

修改完成以后,再次刷新页面,发现原来的头像地址由http变成了https

a.png

以为修改到这样就修改完了,其实还没有。当试图去评论框进行评论的时候,当页面加载表情时,突然现地址拦中绿色的锁消失了。通过查看加载表情的请求发现,原来表情使用的链接的协议都是http:

aaa.png

所以为了支持表情,还需要将表情中的链接转为https。

要修改表情中的链接,同样需要修改embed.js文件。打开文件,找到如下内容:

function t(t, s) {
    var i = 0 === e.indexOf("微博") ? "http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/" + s.replace("_org", "_thumb") : S.STATIC_URL + "/images/smilies/" + s;
    "WordPress" === e && (t = " " + t + " "),
        a += '<li><img src="' + i + '" title="' + _(t) + '" /></li>'
}

将其修改为:

function t(t, s) {
    var i = 0 === e.indexOf("微博") ? "https://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/" + s.replace("_org", "_thumb") : S.STATIC_URL + "/images/smilies/" + s;
    "WordPress" === e && (t = " " + t + " "),
        a += '<li><img src="' + i + '" title="' + _(t) + '" /></li>'
}

此时,重新刷新一下页面,再次触发评论框中的表情,发现表情的链接已转为https:ccccccccccccccc0.png

本以为这次真的修改完了,当去试图用表情评论一下,当评论后一刷新页面,发由那个小锁又没有。又经过仔细查找,发现原来是加载的评论里面的表情还是使用http协议:dfsdfsdfsdf.png

通过查看embed.js源代码,找到了加载评论内容的地址,将下面内容

if (t += "<p>", s.parents.length >= i.max_depth && (!i.show_context || i.max_depth > 1) && s.parent_id && lt[s.parent_id] && (t += '<a class="ds-comment-context" data-post-id="' + s.post_id + '" data-parent-id="' + s.parent_id + '">' + z.reply_to + u(lt[s.parent_id].toJSON().author.name) + ": </a>"), t += s.message + '</p><div class="ds-comment-footer ds-comment-actions', s.vote > 0 && (t += " ds-post-liked"), t += '">', t += s.url ? et.timeAnchor(s.created_at, s.url) : et.timeText(s.created_at), "duoshuo" == s.source ? (t += '<a class="ds-post-reply" href="javascript:void(0);"><span class="ds-icon ds-icon-reply"></span>' + z.reply + "</a>" + et.likePost(s) + '<a class="ds-post-repost" href="javascript:void(0);"><span class="ds-icon ds-icon-share"></span>' + z.repost + '</a><a class="ds-post-report" href="javascript:void(0);"><span class="ds-icon ds-icon-report"></span>' + z.report + "</a>", s.privileges["delete"] && (t += '<a class="ds-post-delete" href="javascript:void(0);"><span class="ds-icon ds-icon-delete"></span>' + z["delete"] + "</a>")) : ("qqt" == s.source || "weibo" == s.source) && (t += '<a class="ds-weibo-comments" href="javascript:void(0);">' + z.comments, s.type.match(/\-comment$/) || (t += '(<span class="ds-count">' + s.comments + "</span>)"), t += '</a><a class="ds-weibo-reposts" href="javascript:void(0);">' + z.reposts, s.type.match(/\-comment$/) || (t += '(<span class="ds-count">' + s.reposts + "</span>)"), t += "</a>"), t += "</div></div></div>", i.max_depth > 1 && (s.childrenArray || s.children) && "weibo" != s.source && "qqt" != s.source) {
    t += '<ul class="ds-children">';
    var c = lt.getJSON(s.childrenArray || s.children);
    if (c) for (var s, d = -1,
                    p = c.length - 1; p > d;) s = c[d += 1],
        console.log(s)
        t += et.post({
            post: s,
            options: i
        });
    t += "</ul>"
}

修改为

if (t += "<p>", s.parents.length >= i.max_depth && (!i.show_context || i.max_depth > 1) && s.parent_id && lt[s.parent_id] && (t += '<a class="ds-comment-context" data-post-id="' + s.post_id + '" data-parent-id="' + s.parent_id + '">' + z.reply_to + u(lt[s.parent_id].toJSON().author.name) + ": </a>"), t += s.message.replace(/http:\/\/img.t.sinajs.cn/, 'https://img.t.sinajs.cn') + '</p><div class="ds-comment-footer ds-comment-actions', s.vote > 0 && (t += " ds-post-liked"), t += '">', t += s.url ? et.timeAnchor(s.created_at, s.url) : et.timeText(s.created_at), "duoshuo" == s.source ? (t += '<a class="ds-post-reply" href="javascript:void(0);"><span class="ds-icon ds-icon-reply"></span>' + z.reply + "</a>" + et.likePost(s) + '<a class="ds-post-repost" href="javascript:void(0);"><span class="ds-icon ds-icon-share"></span>' + z.repost + '</a><a class="ds-post-report" href="javascript:void(0);"><span class="ds-icon ds-icon-report"></span>' + z.report + "</a>", s.privileges["delete"] && (t += '<a class="ds-post-delete" href="javascript:void(0);"><span class="ds-icon ds-icon-delete"></span>' + z["delete"] + "</a>")) : ("qqt" == s.source || "weibo" == s.source) && (t += '<a class="ds-weibo-comments" href="javascript:void(0);">' + z.comments, s.type.match(/\-comment$/) || (t += '(<span class="ds-count">' + s.comments + "</span>)"), t += '</a><a class="ds-weibo-reposts" href="javascript:void(0);">' + z.reposts, s.type.match(/\-comment$/) || (t += '(<span class="ds-count">' + s.reposts + "</span>)"), t += "</a>"), t += "</div></div></div>", i.max_depth > 1 && (s.childrenArray || s.children) && "weibo" != s.source && "qqt" != s.source) {
    t += '<ul class="ds-children">';
    var c = lt.getJSON(s.childrenArray || s.children);
    if (c) for (var s, d = -1,
                    p = c.length - 1; p > d;) s = c[d += 1],
        console.log(s)
        t += et.post({
            post: s,
            options: i
        });
    t += "</ul>"
}

这样,在加载评论内容的时候,如果评论中有表情,则加载表情的时候会将表情链接中的http替换成https。至此,多说社会评论框组件支持https的修改已完成,这次是真的完成了!!!!!!!!!!!!!!!!!

本文章为本站原创,如转载请注明文章出处:https://www.sviping.com/archives/27

分享到:
上一篇: php aes加密算法 下一篇: linux中强大且常用命令:find、grep
12