针对QQ手机浏览器滥用HTML超链接审计Ping工具的大规模DDoS攻击

究人员在QQ手机浏览器受到攻击后发现了一种新型滥用基于HTML5 Ping的超链接审计特性的DDoS攻击。

Imperva研究人员Vitaly Simonovich和Dima Bekerman监测到一次攻击，该攻击最高点达7,500个请求/秒，并在4个小时内从约4,000个用户IP发出了超过7千万个请求。什么概念呢？2016年类似的一次基于Android的手机DDoS攻击是从27,000个独特IP中实现了每秒400个请求的峰值。

新攻击使用的是HTML5 ping属性，其可以合法跟踪网站链接上的点击次数，一些隐私人士甚至将其视为一种用户跟踪形式。'Ping ='包含在普通的在线超链接代码中。单击链接时，会发送一个不可见的'ping ='url内容变量，该变量也用户看不到，网站管理员可以监控、审核从特定网站发送特定链接的访问者数量。

虽说这种新攻击主要来自QQ浏览器用户，但该技术几乎可以应用到任何浏览器上。Firefox是少数几个默认禁用ping属性的浏览器之一；Chrome 74 Beta版本正在取消禁用超链接审核功能，这意味着可能在2019年5月发布后，Chromium浏览器（如Edge，Chrome，Opera和Safari）将永久启用超链接审核。

用户访问经两个外部JavaScript文件而设计的网页，其中一个含URL的数组，这也是主要针对游戏网站DDoS攻击的目标；另外一个JS文件有一个函数，它从数组中随机选择一个URL，创建带有'ping'属性的<a>标签，并以编程方式每秒点击该链接。访问者只要在浏览器中打开该网站，超链接审核ping就会向其发送，4,000多名用户深陷其中、每小时最多可能超1400万个请求。这种攻击需要让用户访问精心设计的网页，并尽可能长时间地在浏览器中打开。

研究人员提出一种可能的结合社会工程和恶意广告场景，也许已经在这次攻击中使用：攻击者将恶意广告注入合法网站。网站越受欢迎，受DDoS的可能性就越大。之后，具有恶意添加的网站链接会被发布到大型微信群里。然后，访问者和来自微信聊天组的访问者将自动、不知不觉地开始ping目标URL，且将继续以每秒一次的速率执行此操作，以便在浏览器中打开中毒选项卡。

虽然这种攻击方法有可能在任何地方用于对抗任何目标，但一个简单的防御方法是阻止任何包含边缘设备上的”Ping-To“和/或”Ping-From“HTTP header的Web请求”（防火墙，WAF等），这会阻止ping请求不会命中你的服务器。

本文作者：Gump，转载自：http://www.mottoin.com/detail/3892.html

源：腾讯ISUX
链接：https://isux.tencent.com/articles/simple-qq.html

QQ 像用户的一个小小星球，可以随意的装点展示自己的个性，同时也能看到其他好友的小星球。然而人是动态成长和变化的，纷繁的世界是否就一直能适合用户的聊天心境呢？

都说年轻人喜欢用 QQ，他们精力旺盛乐于交友，在社交的同时有强烈的自我表达欲望，QQ 里的个性装扮能够满足年轻人的自我展示需求。

随着年轻人的成长和社会角色变化，开始需要和学习、工作中不同的人频繁打交道，涉及的使用场景更为多元化，对沟通逐渐有了效率与特殊场景体验的诉求。本文讲述的是 QQ 近期在极简设计与人性化体验设计上的探索与思考。

简洁模式

各类产品相继回归初心追求体验服务的本质，产品体验也正在做减法提炼，更为聚焦用户核心诉求，追求更极简的体验。

用户沟通的本源是信息互换，QQ 通过推出极简模式，对聊天进行降噪设计，重新突出聊天信息，回归沟通的本源。

简洁模式，是允许用户切换到更纯粹的聊天体验，但并不改变用户原有的个性化设置，用户可随时根据需要，恢复自己的个性装扮。

1. QQ简洁模式设计策略

QQ 拥有庞大的用户量，一直以来用户对纯粹的聊天沟通体验呼声较高，回归到沟通的本源，聚焦极简沟通聊天体验，这是化繁为简的减法过程，我们梳理了 QQ 简洁模式的设计策略。

信息降噪

头像和聊天气泡是承载信息的主要载体，简洁模式屏蔽个性化装扮，使信息的展示更纯粹和清晰。

简化功能

为了让用户更便捷地发送不同类型的消息，QQ 的输入区域展示了相册、拍照、红包等功能。但在非娱乐化场景聊天时，这些功能使用率是较低的。简洁模式简化了工具栏与图标风格，图标造型与色彩化繁为简，利用更纯粹的黑与白，方便界面更好凸显信息和内容，整体与默认模式产生了差异，用户有更强简化感知。

纯粹交流

QQ 的等级体验符合部分年轻人的攀比需求，但在某些场景（如办公，学习等），等级可能会对沟通带来一定的压力与干扰。简洁模式仅保留纯粹的聊天信息，让用户感受更清爽无压力的交流。

风格中性

简洁模式的界面设计风格更为中性，去个性化。设计细节的优化，如分割线的处理、灰色的运用、图标的形体等，都更为克制精简。整体视觉体验以黑白灰为主基调，辅助色点缀，高对比度，犹如容器一样呈现最具价值的内容和信息。

简化图形

极简还体现在界面的图标语言，简洁模式图标延续 QQ 8.0 风格的图标造型，在此基础上追求更极致的减法设计，我们通过提炼图标造型的轮廓，采用更精炼的细线图标，能少画一笔不多出一笔，细节之处方显匠心。

简洁模式设置路径

未来将增设多彩选择，喜欢简约风格的你绝对不容错过 QQ 简洁模式，欢迎多多体验。

QQ 升级至 8.1.0 版本的用户，可以从抽屉进入设置页，点击进通用，开启简洁模式。

夜间模式

人眼可根据环境光做自动调节，在弱光环境下，人眼对明暗度的辨别更敏锐，对彩色的感知度则更弱。同时人眼还有视觉惰性，晚上长时间使用手机，更容易觉得眼花。

多数手机系统，主要通过环境光自动调节屏幕的亮度，以降低手机上的明暗对比，减少对眼睛的亮度刺激，同时普遍适用于不同类型的手机应用。

为了给用户提供更舒适的夜间体验，部分手机系统逐渐推出黑暗模式，一些应用还定制深度的夜间模式。

1. QQ夜间模式设计策略

晚上是 QQ 用户活跃的高峰期之一，针对夜间场景使用痛点以及业界的趋势。科技向善，设计也应如此，因此 QQ 夜间模式体验定位希望是更护眼舒适的，为用户提供更人性化体验，我们梳理出夜间模式的设计策略，并重新设计。

2. 护眼舒适

降低对比度

夜间模式界面通过降低信息与背景的对比度，对图片/图标带色彩的通过使用遮罩，来达到减少对人眼刺激的目的，用户在夜间弱光环境中使用起来更柔和护眼。

降低信息与背景对比度能降低对人眼的刺激，我们分别从降低界面信息对比度和降低色彩明度入手，在不同背景下适配不同亮度的文字信息。通过黑暗环境人眼真机体验测试，又再经过多轮字色与背景对比度的优化，保证识别度的基础上，梳理出在全黑的环境下适合夜间在任何屏幕亮度均可使用的对比度，对比度控制在三个档位进行组合，不出现纯黑白对比。

降低图像与色彩的明度

界面信息还包括有色的图文与图形类，高纯度的色彩在深色背景下也容易造成人眼刺激与疲劳。此类信息我们通过使用遮罩来达到降低明度的目的。在保持与系统色彩纯度的基础上，降低明度从而达到柔和护眼的效果。

组件化

QQ 夜间模式适配覆盖度很高，涉及界面也很多，我们梳理适配了夜间模式组件，同时也提升适配的效率。目前已适配核心路径场景的夜间体验，我们与开发同学紧锣密鼓在适配更多界面，随着适配的不断深入，给用户提供更完善舒适的夜间体验。

3. 情感化设计

为了强化用户对夜间模式的认知，提升夜间场景用户的使用感受。我们运用了情感化的设计，从以下三个维度体现。

主题背景

大面积黑色界面难免会些许单调冰冷，有别于手机系统与应用，QQ 夜间模式保留前版本的星空元素传承到新版设计中，夜间模式启动后，通过繁星点点的背景元素建立夜间环境关联。

趣味图标

当用户开启夜间模式时，我们设定了彩蛋，发现个别图标会发生改变，变成带有夜间相关的图形语言，后续更新会增加更多趣味的图标。我们也希望通过带入趣味元素的表达方式，建立用户对 QQ 夜间模式的好感。

动效

使用切换操作时，加入适度的过渡动画，进一步强化用户对夜间模式的感知，用户可在抽屉页点击切换至夜间模式。

夜间模式体验路径，用户进入 QQ 后，通过右滑或点击一级界面左上角个人头像，进入抽屉页，点击左下方夜间图标即可切换至夜间模式。

结语

除了简洁模式和夜间模式，未来 QQ 还会有更多专题设计的探索思考，通过挖掘使用场景为用户提供更多人性化好玩的服务。目前这两个模式均已上线，收到了不少反馈和建议，也请用户朋友们多多体验持续关注 QQ 的更新。

、注册账号

https://connect.qq.com/

2、创建网站应用

资料填写

完善资料

3、审核通过后拿到appid

4、页面引入js-sdk

<script type="text/javascript"  charset="utf-8"
    src="//connect.qq.com/qc_jssdk.js"
    data-appid="APPID"    // 审核通过的APPID
    data-redirecturi="REDIRECTURI"    // 网站回调地址。回调地址必须以http或https开头。腾讯目前业务线都已切至https.所以建议此处都填写https.如果网站不支持，请自行升级
></script>

5、放置QQ登录按钮

在html页面需要插入QQ登录按钮的位置，粘贴如下代码：

<span id="qqLoginBtn"></span>
<script type="text/javascript">
    QC.Login({
       btnId:"qqLoginBtn"	//插入按钮的节点id
});
</script>

注：如需自定义按钮。则将上面代码生成的html（即<span id="qqLoginBtn"></span>节点里面的代码）粘贴在对应位置即可。

6、回调地址页面

   <script type="text/javascript"
src="//connect.qq.com/qc_jssdk.js" charset="utf-8" data-callback="true"></script>

注：如果回调地址页与加入QQ登录按钮是同一个页面，则只需要引用一次脚本文件。页面URL地址中会在hash值部分加入access_token&expires_id=7776000。注意官网文档上面说可以拿到openid.其实是不可以的。需要登录后通过api拿到openid。

7、通过api获取access_token和openid

if(QC.Login.check()){ //如果已登录
    QC.Login.getMe(function(openId, accessToken){ // 注意业务中依赖openId和accessToken的需要写入在回调里面
        console.log(openId, accessToken)
    });
}

到此QQ互联登录的基本流程已结束。

8、常用的js-sdk 的api

9、官方参考文档：

https://wiki.connect.qq.com/js_sdk%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E

在线咨询

上一篇：怎样用 JS 压缩 HTML ？
下一篇：JavaScript 加减危机-为什么会出现这样的结果？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商