CSS 2019：腾讯安全发布2019产业互联网安全十大议题

月30日，以“产业升级、安全升维”为主题的第五届互联网安全领袖峰会（Cyber Security Summit，简称CSS 2019）在北京举行。会上，腾讯安全联合实验室掌门人及腾讯安全业务负责人，联合发布了首份聚焦于产业互联网安全的行业报告——《CSS视角下的2019年产业互联网安全十大议题》（简称《十大议题》），围绕5G、智慧政务、数据加密等新技术在产业领域的落地，结合安全相关案例法规，对产业互联网领域的安全问题做了深度解读，也为产业互联网下一阶段的安全发展提供了相应的解决方案。

（腾讯安全联合实验室掌门人及腾讯安全业务负责人合影）

在产业互联网时代，随着各行各业的数字化程度不断加深，联网终端的多样性、使用环境的复杂性，正在让产业环境下的人、信息、物之间的交叉连接日益复杂。进而导致安全的防护边界越来越模糊、攻击复杂度越来越高，催生出更多的安全威胁。数据资产安全、业务安全、身份权限管理等安全问题逐步显现，成为制约企业持续发展的核心问题。

产业升级转型催生了复杂的安全环境。为了进一步帮助企业理清发展思路，促进安全能力向生产力转化，作为CSS 2019会议的延续，腾讯安全发布的《十大议题》首次聚焦产业互联网安全，从产业政策、技术应用、业务场景等方面，对产业互联网时代的安全变化和技术趋势进行了盘点和解读，选取最具代表性的年度十大议题，诠释产业互联网安全的发展趋势，提升企业对于产业升级所带来的安全问题认知。

事实上，随着5G的到来，云计算、AI、IoT等前沿技术的不断突破，释放更多生产力的同时，也因为联网终端的数量、种类与复杂性的增加，催生了更多的安全威胁。智能网联汽车就是一个最经典的案例。智能网联汽车除了传统的车辆电子电器各类ECU、车电网络和车电协议实现外，还大量引入了如互联网通信、数字化座舱及车载互联应用、高级辅助驾驶乃至未来的自动驾驶等新技术，以实现汽车行业通过智能网联的技术路线实现产业升级和数字化转型。或许，每一项功能或系统都具有安全防护能力，但是，当组合在一起，由于架构设计缺陷或者工程实现问题会造成严重的信息安全问题，如个人隐私信息泄露；更严重的会导致行车安全、人身和公共安全问题，例如智能车辆被远程入侵和控制。

如果将这个场景扩大到以物联网为基础构建的各类智慧生活场景中，当大量采集使用者的各种生活或生理信息的智能终端，如手表、智能音箱等，因为漏洞或兼容性等问题，被人恶意获取，其后果难以想象。涉及到更复杂的物联终端，如智能电梯、智能安防、智能机器人等场景，更会带来人身安全和公共安全风险。

面对产业安全的新特性，腾讯安全发布的《十大议题》，通过对产业互联网安全发展动态，以及典型性案例的扫描与整理，希望为产业内从业者、合作伙伴提供更详实的参考，洞悉产业安全威胁的产生与传播，对未来的产业安全发展有更准确的判断。

在《十大议题》中，根据产业安全面临的不同问题，腾讯安全也针对性的给出了不同的解决方案。比如，针对物联网及车联安全，腾讯安全科恩实验室研发了一款全自动IoT固件安全扫描系统IoTSec，对设备固件以及固件配套的源代码进行安全扫描；面对各类APT攻击威胁，腾讯安全湛泸实验室安全认为，在常态网络环境下，以红蓝对抗、用接近真实攻击的方式，进行网络攻防对抗演习，成为了检验企业安全防御的新标尺；针对云安全问题，腾讯云安全团队给出了基于“云、管、端”协同的全链路智慧安全解决方案，让企业可以可一键式的启动全栈式安全防护能力；在终端安全与认证方面，腾讯无线安全团队针对物联终端接入认证不完善等安全问题，推出了统一端点管理系统（Unified Endpoint Management）的行业解决方案，让企业可根据自身需求集中管理和保护终端设备、应用程序及移动数据。

产业互联网时代，安全正在成为企业的核心竞争力之一，企业需要更为主动、动态、整体、精准和开放的安全运维管理思维。简言之，就是需要从战略视角去系统性规划产业安全。正如腾讯公司云与智慧产业总裁汤道生在CSS 2019的致辞中所说，以腾讯一己之力，无法满足产业互联网海量客户的安全需求。腾讯希望携手安全产业链合作伙伴，共建产业互联网安全生态，通过情报、技术、人才的开放和共享，持续为产业互联网安全发展，提供源源不断的动力支持。

来源：东方资讯

言

1.1「腾讯位置服务」是什么？

立足生态，连接未来

腾讯位置服务平台依托庞大的数据生态，以定位、地图展示、地点搜索、路线规划、导航、室内图、海外图等位置服务能力和LBS大数据能力为基础，面向开发者提供方便、易用、高效的LBS服务产品。当前腾讯位置服务数据能力已覆盖10亿人的位置行为数据、日均超过600亿次的定位调用、每日支持1亿次位置检索。

1.2「腾讯位置服务」可应用的场景？

随着功能的日益完善，腾讯位置服务可适用的场景也越来越多，如物流业务、智能出行、o2o业务、共享单车、运动健康、LBS游戏服务等行业均可见腾讯位置服务的身影。笔者也将通过此文展示下腾讯位置服务在智能出行行业的应用与实践。

需求背景

2.1 「乘车二维码」微信小程序

自从2017年微信上线小程序以来，小程序已经迅速成长为一个巨大的生态，吸引各行各业的开发者或服务商参与其中。小程序与线下场景的结合也日益紧密，其中，乘车二维码微信小程序无疑让人们的出行服务变的更加简单、快捷。先乘车，后扣费，无论手机是否联网，是否有信号，都可以很顺畅的进行乘车。

2.2 完善「乘车二维码」微信小程序

有了最基本的「乘车二维码」功能对用户体验来说，还是远远不够的，为此，从用户体验的角度出发，我们逐渐新增了一些实用的功能，比如查询附近的公交信息、用户路线规划等。也正因为新增了这些实用性的功能，我们发现「乘车二维码」微信小程序在数据表现(如日活、留存、使用时长)方面更加出色了，「腾讯位置服务」也成为我们「乘车二维码」微信小程序内不可或缺的角色。

接下来，笔者将通过公交地图、路线规划两个功能点更加详细的介绍「腾讯位置服务」中的微信小程序 JavaScript SDK、微信小程序插件。

公交地图

3.1 效果预览

3.2 技术点分析

在上面的效果预览图中，我们不难发现，实现公交地图功能主要包含以下技术要点：

获取用户当前位置信息
通过坐标点获取附近公交信息
地图展示、标注

3.3 技术点实现

3.3.1 获取用户当前位置信息

我们可以通过微信小程序官方提供的api：wx.getLocation，来获取用户的当前位置坐标点信息：

wx.getLocation({
type: 'gcj02',
success (res) {
const latitude = res.latitude
const longitude = res.longitude
}
})

这里我们将 type 指定为 gcj02 获取到的坐标点信息可在后续接口中直接使用，相对应的，如果将 type 指定为 wgs84，后续我们需要进一步进行坐标转换。

还有个需要注意的是，该接口需要经过用户授权同意才能调用，因此我们需要在 app.json 文件中新增相关配置：

// app.json
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于查询公交信息"
}
}

3.3.2 获取附近公交信息

附近公交数据哪里来？

这里我们便用到了微信小程序原生LBS能力的最佳拍档-- 微信小程序JavaScript SDK。

腾讯位置服务为微信小程序提供了基础的标点能力、线和圆的绘制接口等地图组件和位置展示、地图选点等地图API位置服务能力支持，使得开发者可以自由地实现自己的微信小程序产品。在此基础上，腾讯位置服务微信小程序JavaScript SDK是专为小程序开发者提供的LBS数据服务工具包，可以在小程序中调用腾讯位置服务的POI检索、关键词输入提示、地址解析、逆地址解析、行政区划和距离计算等数据服务，让您的小程序更强大！

接下来笔者将展示如何通过微信小程序JavaScript SDK获取附近公交的信息。

1. 开通「腾讯位置服务」：在微信小程序后台依次选择开发->开发者工具->腾讯位置服务，然后点击开通按钮，按照提示为您的小程序开通「腾讯位置服务」

2. 申请开发者密钥(key)：申请密钥（https://lbs.qq.com/dev/console/key/manage）

3. 安全域名设置：在在微信小程序后台依次选择设置->开发设置中设置request合法域名，添加 https://apis.map.qq.com

4. 下载微信小程序 JavaScript SDK：微信小程序JavaScriptSDK v1.2（http://3gimg.qq.com/lightmap/xcx/jssdk/qqmap-wx-jssdk1.2.zip）

5. 小程序使用：

//index.js
// 引入 JavaScript SDK 核心类
let QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
let qqmapsdk;
Page({
onLoad: function  {
// 实例化API核心类
qqmapsdk = new QQMapWX({
key: '申请的key'
});
},
onShow: function  {
// 调用接口
qqmapsdk.search({
keyword: '公交车站',
location: '28.636767,115.855820',
filter: 'category=公交站',
success: function (res) {
console.log(res);
},
fail: function (res) {
console.log(res);
},
complete: function (res) {
console.log(res);
}
});
}
})

返回结果：

可以看到，我们已经拿到了我们想要的公交数据，接下来将公交数据在地图上标注展示出来。

3.3.3 地图展示、标注

公交信息的展示使用到了「腾讯位置服务」为小程序提供的 map 组件，我们需要将公交信息组装成 markers 从而绘制到地图组件上。

关于地图组件的具体使用可参考官方文档：map组件的使用（https://developers.weixin.qq.com/miniprogram/dev/component/map.html）

3.4 小结

可以看到，我们通过微信小程序JavaScript SDK可以很轻松的获取到附近的公交信息。当然，微信小程序JavaScript SDK的能力也远远不仅于此，它还提供很多实用性的功能满足多种使用场景：

方法	说明
search(options:Object)	地点搜索，搜索周边poi，比如：“酒店” “餐饮” “娱乐” “学校” 等等
getSuggestion(options:Object)	用于获取输入关键字的补完与提示，帮助用户快速输入
reverseGeocoder(options:Object)	提供由坐标到坐标所在位置的文字描述的转换。输入坐标返回地理位置信息和附近poi列表
geocoder(options:Object)	提供由地址描述到所述位置坐标的转换，与逆地址解析的过程正好相反
direction(options:Object)	提供驾车，步行，骑行，公交的路线规划能力
getCityList	获取全国城市列表数据
getDistrictByCityId(options:Object)	通过城市ID返回城市下的区县
calculateDistance(options:Object)	计算一个点到多点的步行、驾车距离

详细使用可参考官方文档：微信小程序JavaScript SDK 使用方法（https://lbs.qq.com/qqmap_wx_jssdk/qqmapwx.html）

需要注意的是，每个key的每个服务接口的调用量都有日调用量：1万次/Key、并发数：5次/key/秒的限制，如若您的微信小程序使用量超出这个限制，可通过控制台->配额申请（https://lbs.qq.com/dev/console/quota/applyList）中免费申请你需要的配额。

路线规划

如果说，「乘车二维码」微信小程序让人们的出行变得更加简单、快捷。

那么，路线规划插件则为人们怎么出行提供了最优解。

4.1 效果预览

4.2 路线规划插件

腾讯位置服务路线规划插件提供路线规划等功能，根据起终点，多种出行方式智能规划最佳出行路线及详情。开发者可以将路线规划插件嵌入到自建小程序的页面里，实现路线规划功能。

可以看到，通过使用路线规划插件，我们可以很方便的在我们「乘车二维码」微信小程序内完成路线规划功能，接入步骤也较为简单，主要分为以下几步：

插件申请接入：

在微信小程序后台管理平台中，依次选择设置->第三方服务->插件管理里点击添加插件，搜索腾讯位置服务路线规划申请，审核通过后，小程序开发者可在小程序内使用该插件。

引入插件包：

// app.json
"plugins": {
"routePlan": {
"version": "1.0.5",
"provider": "wx50b5593e81dd937a"
}
}

设置定位授权:

// app.json
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序定位"
}
}

使用插件：

let key = '申请的key'; //使用在腾讯位置服务申请的key
let referer = ''; //调用插件的app的名称
let endPoint = JSON.stringify({ //终点
'name': '八一广场',
'latitude': 28.673400,
'longitude': 115.904500
});
wx.navigateTo({
url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint
});

在集成路线规划插件后，进一步丰富了我们「乘车二维码」微信小程序的使用场景，现在，用户可以在不使用地图类App的情况下进行最优路线规划，躲避拥堵，方便又快捷。

4.3 小结

「腾讯位置服务」提供的微信小程序插件，可以说让微信小程序一步拥有地图功能，大大的减少了我们开发的工作量、提升用户体验、增加了小程序的使用场景。

目前，「腾讯位置服务」已经为我们提供了三款实用性插件：

路线规划：根据起点、终点，智能规划最佳出行路线，并支持多种出行方式。
地铁图：支持全国所有城市地铁线路静态展示、信息查询、线路检索及规划等功能。
地图选点：快速、准确地选择并确认自己的当前位置，并将相关位置信息回传给开发者。

具体可查看官方文档：微信小程序插件（https://lbs.qq.com/miniprogram_plugin/index.html）。

相信后续也会为我们提供更多功能的插件。

结语

我们在完善「乘车二维码」微信小程序的道路上从未停止过脚步，给用户提供完美的出行体验是我们的终极目标。我们也不会停止在「腾讯位置服务」上的探索，目前所使用到的能力也仅仅是冰山一角，后续我们还会继续尝试「腾讯位置服务」提供的个性化地图、地铁图等能力，力争给用户提供最完美的出行体验。

言

面试官：同学考你一个简单css内容，写一个可展开列表。
我：笑出了声。心想真的会出这么简单的内容哈哈哈！
面试官：同学不能用js哦，如果可以用stylus编写就更好啦！
我：小脑刹那间萎缩了......

Stylus 是一种 CSS 预处理器。预处理器是一种脚本语言，它扩展了 CSS 的功能，使得编写 CSS 更加高效、灵活和强大。Stylus 特别之处在于其简洁而灵活的语法，它允许开发者使用变量、嵌套规则、混合（Mixins）、继承、操作符、函数以及条件语句等高级功能来编写样式代码。

接下来，让我们通过一个腾讯的面试题，来更加深层次认识这个stylus语言带给css的便捷。虽然考察的是纯html+css内容，要想纯html+css达到完美可却不简单。

效果

有三个列表，并且可以展开和收缩，这题目看起来简单，但是且听我细细道来，你会发现里面有很多的秘密！

html部分

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>纯css菜单</title>
    <link rel="stylesheet" href="1.css">
</head>

<body>
    <div class="accordion">
        <input type="checkbox" id="collapse1" hidden>
        <input type="checkbox" id="collapse2" hidden>
        <input type="checkbox" id="collapse3" hidden>
        <!-- div替代品 html5语义化标签 SEO比较重要 -->
        <article>
            <label for="collapse1">列表1</label>
            <p>内容1</p>
            <p>内容2</p>
            <p>内容3</p>
            <p>内容4</p>
        </article>
        <article>
            <label for="collapse2">列表2</label>
            <p>内容1</p>
            <p>内容2</p>
            <p>内容3</p>
            <p>内容4</p>
        </article>
        <article>
            <label for="collapse3">列表3</label>
            <p>内容1</p>
            <p>内容2</p>
            <p>内容3</p>
            <p>内容4</p>
        </article>
    </div>
</body>

</html>

首先我们要进行stylus语言环境的配置，并引入其生成的css文件，配置好之后，我们先看看html部分。

我们设置了三个复选框，并且复选框的id与label标签的for相对应，可以方便用户的操作。服务于用户。
我们用article语义化标签，这有助于搜索引擎优化（SEO）和屏幕阅读器更好地理解页面结构。每个标签里面放入四段列表。

到此我们html部分就结束啦，我们重点讲解一下css部分。

css部分

* {
  margin: 0;
  padding: 0;
}
.accordion {
  width: 300px;
}
.accordion article {
  cursor: pointer;
}
.accordion article + article {
  margin-top: 5px;
}
.accordion label {
  display: block;
  height: 40px;
  padding: 0 20px;
  background-color: #f00;
  cursor: pointer;
  line-height: 40px;
  font-size: 16px;
  color: #fff;
}
.accordion p {
  overflow: hidden;
  padding: 0 20px;
  border: 1px solid #f66;
  border-top: none;
  border-bottom-width: 0;
  max-height: 0;
  line-height: 30px;
  transition: all 500ms;
}
.accordion input:nth-child(1):checked ~ article:nth-of-type(1) p,
.accordion input:nth-child(2):checked ~ article:nth-of-type(2) p,
.accordion input:nth-child(3):checked ~ article:nth-of-type(3) p {
  max-height: 600px;
}
    <生成css>
---------------------------
    <书写的stylus>
    
    *
    margin 0
    padding 0
.accordion 
    width 300px
    article
        cursor pointer
        & + article
            margin-top 5px
    label
        display block
        height 40px
        padding 0 20px
        background-color red
        cursor pointer
        line-height 40px
        font-size 16px
        color #fff
    p
        overflow: hidden
        padding: 0 20px
        border: 1px solid #f66
        border-top: none
        border-bottom-width 0
        max-height: 0
        line-height 30px
        transition: all 500ms
    input  
        &:nth-child(1):checked ~ article:nth-of-type(1)  p , 
        &:nth-child(2):checked ~ article:nth-of-type(2)  p ,
        &:nth-child(3):checked ~ article:nth-of-type(3)  p 
            max-height:  600px

我们首先清除默认的内外边距。
对整体的accordion设置宽度。
对article标签设置鼠标经过变成小手。
通过相邻兄弟选择器我们设置第二个和第三个article的margin top 值。
对label标签我们设置一些基本的样式。
接下来就是我们最重要的部分，我们这里运用了全体兄弟选择器，我们以input下第一段为例子说明，后面都是一样的，我们选中第一个被勾选的复选框，然后通过全体兄弟选择器找到所有的article，并根据复选框的序号找到对应article的位置，然后将里面的p显现出来，这一段是我们的核心部分！所以也可以理解为nth-child搭配input，nth-of-type搭配article。

作者：落雪遥夏
链接：https://juejin.cn/post/7379873506543616010

在线咨询

上一篇：十款好用的HTML生成工具推荐，帮你高效完成开发
下一篇：WEB通用基础-MVC架构

您的项目需求

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

整合营销服务商

CSS 2019：腾讯安全发布2019产业互联网安全十大议题

言

效果

html部分

css部分

您的项目需求