程门立学.www.iappi.cn.添加MySSL安全认证签章

在网上闲逛查apache开启HTTP/2的教程,发现网上太多的资料都是驴唇不对马嘴,或者直接是机翻过来,还不如网易有道的翻译。然后突然看到了myssl.com上的一篇文章:为您的网站添加MySSL安全认证签章 ,想起之前也在这个亚洲诚信上做了一次HTTPS网站的检测,当时是认证通过,评级为A级的,详见:https://myssl.com/seal/detail?domain=www.iappi.cn。那么就可以加一个安全认证签章了。之所以不是A+,是因为没有启用HSTS的缘故,这又是另外一个折腾了。

简介一下myssl.com:

MySSL.com 是亚洲诚信(TrustAsia®)应用于HTTPS最佳安全实践的SSL安全评估系统和在线证书工具集。

亚洲诚信(TrustAsia®)是亚数信息科技(上海)有限公司应用于信息安全领域的品牌。这其中包括国际第一大品牌赛门铁克(Symantec™)SSL数字证书、代码签名证书,技术支持与售后服务等, 还拥有世界领先的亚洲诚信(TrustAsia®)自主知识产权的 SSL安全评估系统、SSL证书MPKI™管理平台、SSL证书云安全(SSLCloud™)监控检测平台。

图1.myssl.com对www.iappi.cn的检测

引言:

在这个充满敌意的互联网,我们对您的网站进行动态安全评估,若您精心部署的HTTPS符合最佳安全实践,我们将会为您的客户展示MySSL检测通过的安全签章和高评分的评级报告,提高客户对您网站的信任和支付信心,进而增加订单量,提升品牌价值。

所以就按照页面的提示,在站点上添加相应的安全认证签章了。

网站上提供了4个样式,分别是:

图2.myssl.com提供认证签章图片样式一
图3.myssl.com提供认证签章图片样式二
图4.myssl.com提供认证签章图片样式三
图5.myssl.com提供认证签章图片样式四

四个样式里面,只有一个绿色的,所以只能选择样式二了。毕竟安全=绿色,第一时间就有这样的印象的。

添加的代码:

<div id="cc-myssl-id" style="position: fixed;right: 0;bottom: 0;width: 65px;height: 65px;z-index: 99;">

<a href="//myssl.com/seal/detail?domain=www.iappi.cn">

<img src="https://static.myssl.com/res/images/myssl-id.png" alt="www.iappi.cn-MySSL安全签章" style="width:100%;height:100%"></a>

</div>

注意这里是要修改对应的网站域名的,并且要经过了验证才行,不然打开图片链接会提示错误,连接异常。

图6.未经验证的站点提示连接异常

加上去之后的效果:

PC端与移动端都是类似的效果,但是因为原代码设定了宽高都是65px,有点小,所以后来修改成100px,稍微跟现在的主流分辨率一致了。

图7.添加了安全认证签章后的PC端效果
图8.添加了安全认证签章后的PC端效果2

因为该代码是将图片添加到页面的最外层的div中,并且设定了right: 0;bottom: 0,所以会一直在页面的右下角的位置。有需要的也可以改到左上角,左下角等等,或者直接以图片的形式插入到页脚就行了。

看上去是不是感觉安全多了?

 

后续:

经过几天的试用,发现这个图片签章跟主题还是有很大的冲突,但觉得认证还是有意义的,于是简单修改了下样式,直接当成一个图片放在了页脚。

原来还想做一个悬浮放大,无奈调测几次都有点不称,所以也就放弃了。

相应的的代码是:

<a href="//myssl.com/seal/detail?domain=www.iappi.cn" target="_blank" rel="noopener"><img src="https://static.myssl.com/res/images/myssl-id.png" alt="www.iappi.cn-MySSL安全签章" title="www.iappi.cn-MySSL安全签章" style="width:20px;height:20px"></a>

图9.后续修改安全认证签章的样式