CSS 2019：騰訊安全發(fā)布2019產(chǎn)業(yè)互聯(lián)網(wǎng)安全十大議題

月30日，以“產(chǎn)業(yè)升級、安全升維”為主題的第五屆互聯(lián)網(wǎng)安全領(lǐng)袖峰會（Cyber Security Summit，簡稱CSS 2019）在北京舉行。會上，騰訊安全聯(lián)合實驗室掌門人及騰訊安全業(yè)務負責人，聯(lián)合發(fā)布了首份聚焦于產(chǎn)業(yè)互聯(lián)網(wǎng)安全的行業(yè)報告——《CSS視角下的2019年產(chǎn)業(yè)互聯(lián)網(wǎng)安全十大議題》（簡稱《十大議題》），圍繞5G、智慧政務、數(shù)據(jù)加密等新技術(shù)在產(chǎn)業(yè)領(lǐng)域的落地，結(jié)合安全相關(guān)案例法規(guī)，對產(chǎn)業(yè)互聯(lián)網(wǎng)領(lǐng)域的安全問題做了深度解讀，也為產(chǎn)業(yè)互聯(lián)網(wǎng)下一階段的安全發(fā)展提供了相應的解決方案。

（騰訊安全聯(lián)合實驗室掌門人及騰訊安全業(yè)務負責人合影）

在產(chǎn)業(yè)互聯(lián)網(wǎng)時代，隨著各行各業(yè)的數(shù)字化程度不斷加深，聯(lián)網(wǎng)終端的多樣性、使用環(huán)境的復雜性，正在讓產(chǎn)業(yè)環(huán)境下的人、信息、物之間的交叉連接日益復雜。進而導致安全的防護邊界越來越模糊、攻擊復雜度越來越高，催生出更多的安全威脅。數(shù)據(jù)資產(chǎn)安全、業(yè)務安全、身份權(quán)限管理等安全問題逐步顯現(xiàn)，成為制約企業(yè)持續(xù)發(fā)展的核心問題。

產(chǎn)業(yè)升級轉(zhuǎn)型催生了復雜的安全環(huán)境。為了進一步幫助企業(yè)理清發(fā)展思路，促進安全能力向生產(chǎn)力轉(zhuǎn)化，作為CSS 2019會議的延續(xù)，騰訊安全發(fā)布的《十大議題》首次聚焦產(chǎn)業(yè)互聯(lián)網(wǎng)安全，從產(chǎn)業(yè)政策、技術(shù)應用、業(yè)務場景等方面，對產(chǎn)業(yè)互聯(lián)網(wǎng)時代的安全變化和技術(shù)趨勢進行了盤點和解讀，選取最具代表性的年度十大議題，詮釋產(chǎn)業(yè)互聯(lián)網(wǎng)安全的發(fā)展趨勢，提升企業(yè)對于產(chǎn)業(yè)升級所帶來的安全問題認知。

事實上，隨著5G的到來，云計算、AI、IoT等前沿技術(shù)的不斷突破，釋放更多生產(chǎn)力的同時，也因為聯(lián)網(wǎng)終端的數(shù)量、種類與復雜性的增加，催生了更多的安全威脅。智能網(wǎng)聯(lián)汽車就是一個最經(jīng)典的案例。智能網(wǎng)聯(lián)汽車除了傳統(tǒng)的車輛電子電器各類ECU、車電網(wǎng)絡(luò)和車電協(xié)議實現(xiàn)外，還大量引入了如互聯(lián)網(wǎng)通信、數(shù)字化座艙及車載互聯(lián)應用、高級輔助駕駛乃至未來的自動駕駛等新技術(shù)，以實現(xiàn)汽車行業(yè)通過智能網(wǎng)聯(lián)的技術(shù)路線實現(xiàn)產(chǎn)業(yè)升級和數(shù)字化轉(zhuǎn)型。或許，每一項功能或系統(tǒng)都具有安全防護能力，但是，當組合在一起，由于架構(gòu)設(shè)計缺陷或者工程實現(xiàn)問題會造成嚴重的信息安全問題，如個人隱私信息泄露；更嚴重的會導致行車安全、人身和公共安全問題，例如智能車輛被遠程入侵和控制。

如果將這個場景擴大到以物聯(lián)網(wǎng)為基礎(chǔ)構(gòu)建的各類智慧生活場景中，當大量采集使用者的各種生活或生理信息的智能終端，如手表、智能音箱等，因為漏洞或兼容性等問題，被人惡意獲取，其后果難以想象。涉及到更復雜的物聯(lián)終端，如智能電梯、智能安防、智能機器人等場景，更會帶來人身安全和公共安全風險。

面對產(chǎn)業(yè)安全的新特性，騰訊安全發(fā)布的《十大議題》，通過對產(chǎn)業(yè)互聯(lián)網(wǎng)安全發(fā)展動態(tài)，以及典型性案例的掃描與整理，希望為產(chǎn)業(yè)內(nèi)從業(yè)者、合作伙伴提供更詳實的參考，洞悉產(chǎn)業(yè)安全威脅的產(chǎn)生與傳播，對未來的產(chǎn)業(yè)安全發(fā)展有更準確的判斷。

在《十大議題》中，根據(jù)產(chǎn)業(yè)安全面臨的不同問題，騰訊安全也針對性的給出了不同的解決方案。比如，針對物聯(lián)網(wǎng)及車聯(lián)安全，騰訊安全科恩實驗室研發(fā)了一款全自動IoT固件安全掃描系統(tǒng)IoTSec，對設(shè)備固件以及固件配套的源代碼進行安全掃描；面對各類APT攻擊威脅，騰訊安全湛瀘實驗室安全認為，在常態(tài)網(wǎng)絡(luò)環(huán)境下，以紅藍對抗、用接近真實攻擊的方式，進行網(wǎng)絡(luò)攻防對抗演習，成為了檢驗企業(yè)安全防御的新標尺；針對云安全問題，騰訊云安全團隊給出了基于“云、管、端”協(xié)同的全鏈路智慧安全解決方案，讓企業(yè)可以可一鍵式的啟動全棧式安全防護能力；在終端安全與認證方面，騰訊無線安全團隊針對物聯(lián)終端接入認證不完善等安全問題，推出了統(tǒng)一端點管理系統(tǒng)（Unified Endpoint Management）的行業(yè)解決方案，讓企業(yè)可根據(jù)自身需求集中管理和保護終端設(shè)備、應用程序及移動數(shù)據(jù)。

產(chǎn)業(yè)互聯(lián)網(wǎng)時代，安全正在成為企業(yè)的核心競爭力之一，企業(yè)需要更為主動、動態(tài)、整體、精準和開放的安全運維管理思維。簡言之，就是需要從戰(zhàn)略視角去系統(tǒng)性規(guī)劃產(chǎn)業(yè)安全。正如騰訊公司云與智慧產(chǎn)業(yè)總裁湯道生在CSS 2019的致辭中所說，以騰訊一己之力，無法滿足產(chǎn)業(yè)互聯(lián)網(wǎng)海量客戶的安全需求。騰訊希望攜手安全產(chǎn)業(yè)鏈合作伙伴，共建產(chǎn)業(yè)互聯(lián)網(wǎng)安全生態(tài)，通過情報、技術(shù)、人才的開放和共享，持續(xù)為產(chǎn)業(yè)互聯(lián)網(wǎng)安全發(fā)展，提供源源不斷的動力支持。

來源：東方資訊

言

1.1「騰訊位置服務」是什么？

立足生態(tài)，連接未來

騰訊位置服務平臺依托龐大的數(shù)據(jù)生態(tài)，以定位、地圖展示、地點搜索、路線規(guī)劃、導航、室內(nèi)圖、海外圖等位置服務能力和LBS大數(shù)據(jù)能力為基礎(chǔ)，面向開發(fā)者提供方便、易用、高效的LBS服務產(chǎn)品。當前騰訊位置服務數(shù)據(jù)能力已覆蓋10億人的位置行為數(shù)據(jù)、日均超過600億次的定位調(diào)用、每日支持1億次位置檢索。

1.2「騰訊位置服務」可應用的場景？

隨著功能的日益完善，騰訊位置服務可適用的場景也越來越多，如物流業(yè)務、智能出行、o2o業(yè)務、共享單車、運動健康、LBS游戲服務等行業(yè)均可見騰訊位置服務的身影。筆者也將通過此文展示下騰訊位置服務在智能出行行業(yè)的應用與實踐。

需求背景

2.1 「乘車二維碼」微信小程序

自從2017年微信上線小程序以來，小程序已經(jīng)迅速成長為一個巨大的生態(tài)，吸引各行各業(yè)的開發(fā)者或服務商參與其中。小程序與線下場景的結(jié)合也日益緊密，其中，乘車二維碼微信小程序無疑讓人們的出行服務變的更加簡單、快捷。先乘車，后扣費，無論手機是否聯(lián)網(wǎng)，是否有信號，都可以很順暢的進行乘車。

2.2 完善「乘車二維碼」微信小程序

有了最基本的「乘車二維碼」功能對用戶體驗來說，還是遠遠不夠的，為此，從用戶體驗的角度出發(fā)，我們逐漸新增了一些實用的功能，比如查詢附近的公交信息、用戶路線規(guī)劃等。也正因為新增了這些實用性的功能，我們發(fā)現(xiàn)「乘車二維碼」微信小程序在數(shù)據(jù)表現(xiàn)(如日活、留存、使用時長)方面更加出色了，「騰訊位置服務」也成為我們「乘車二維碼」微信小程序內(nèi)不可或缺的角色。

接下來，筆者將通過公交地圖、路線規(guī)劃兩個功能點更加詳細的介紹「騰訊位置服務」中的微信小程序 JavaScript SDK、微信小程序插件。

公交地圖

3.1 效果預覽

3.2 技術(shù)點分析

在上面的效果預覽圖中，我們不難發(fā)現(xiàn)，實現(xiàn)公交地圖功能主要包含以下技術(shù)要點：

獲取用戶當前位置信息
通過坐標點獲取附近公交信息
地圖展示、標注

3.3 技術(shù)點實現(xiàn)

3.3.1 獲取用戶當前位置信息

我們可以通過微信小程序官方提供的api：wx.getLocation，來獲取用戶的當前位置坐標點信息：

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

這里我們將 type 指定為 gcj02 獲取到的坐標點信息可在后續(xù)接口中直接使用，相對應的，如果將 type 指定為 wgs84，后續(xù)我們需要進一步進行坐標轉(zhuǎn)換。

還有個需要注意的是，該接口需要經(jīng)過用戶授權(quán)同意才能調(diào)用，因此我們需要在 app.json 文件中新增相關(guān)配置：

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

3.3.2 獲取附近公交信息

附近公交數(shù)據(jù)哪里來？

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

騰訊位置服務為微信小程序提供了基礎(chǔ)的標點能力、線和圓的繪制接口等地圖組件和位置展示、地圖選點等地圖API位置服務能力支持，使得開發(fā)者可以自由地實現(xiàn)自己的微信小程序產(chǎn)品。在此基礎(chǔ)上，騰訊位置服務微信小程序JavaScript SDK是專為小程序開發(fā)者提供的LBS數(shù)據(jù)服務工具包，可以在小程序中調(diào)用騰訊位置服務的POI檢索、關(guān)鍵詞輸入提示、地址解析、逆地址解析、行政區(qū)劃和距離計算等數(shù)據(jù)服務，讓您的小程序更強大！

接下來筆者將展示如何通過微信小程序JavaScript SDK獲取附近公交的信息。

1. 開通「騰訊位置服務」：在微信小程序后臺依次選擇開發(fā)->開發(fā)者工具->騰訊位置服務，然后點擊開通按鈕，按照提示為您的小程序開通「騰訊位置服務」

2. 申請開發(fā)者密鑰(key)：申請密鑰（https://lbs.qq.com/dev/console/key/manage）

3. 安全域名設(shè)置：在在微信小程序后臺依次選擇設(shè)置->開發(fā)設(shè)置中設(shè)置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  {
// 調(diào)用接口
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);
}
});
}
})

返回結(jié)果：

可以看到，我們已經(jīng)拿到了我們想要的公交數(shù)據(jù)，接下來將公交數(shù)據(jù)在地圖上標注展示出來。

3.3.3 地圖展示、標注

公交信息的展示使用到了「騰訊位置服務」為小程序提供的 map 組件，我們需要將公交信息組裝成 markers 從而繪制到地圖組件上。

關(guān)于地圖組件的具體使用可參考官方文檔：map組件的使用（https://developers.weixin.qq.com/miniprogram/dev/component/map.html）

3.4 小結(jié)

可以看到，我們通過微信小程序JavaScript SDK可以很輕松的獲取到附近的公交信息。當然，微信小程序JavaScript SDK的能力也遠遠不僅于此，它還提供很多實用性的功能滿足多種使用場景：

方法	說明
search(options:Object)	地點搜索，搜索周邊poi，比如：“酒店” “餐飲” “娛樂” “學校” 等等
getSuggestion(options:Object)	用于獲取輸入關(guān)鍵字的補完與提示，幫助用戶快速輸入
reverseGeocoder(options:Object)	提供由坐標到坐標所在位置的文字描述的轉(zhuǎn)換。輸入坐標返回地理位置信息和附近poi列表
geocoder(options:Object)	提供由地址描述到所述位置坐標的轉(zhuǎn)換，與逆地址解析的過程正好相反
direction(options:Object)	提供駕車，步行，騎行，公交的路線規(guī)劃能力
getCityList	獲取全國城市列表數(shù)據(jù)
getDistrictByCityId(options:Object)	通過城市ID返回城市下的區(qū)縣
calculateDistance(options:Object)	計算一個點到多點的步行、駕車距離

詳細使用可參考官方文檔：微信小程序JavaScript SDK 使用方法（https://lbs.qq.com/qqmap_wx_jssdk/qqmapwx.html）

需要注意的是，每個key的每個服務接口的調(diào)用量都有日調(diào)用量：1萬次/Key、并發(fā)數(shù)：5次/key/秒的限制，如若您的微信小程序使用量超出這個限制，可通過控制臺->配額申請（https://lbs.qq.com/dev/console/quota/applyList）中免費申請你需要的配額。

路線規(guī)劃

如果說，「乘車二維碼」微信小程序讓人們的出行變得更加簡單、快捷。

那么，路線規(guī)劃插件則為人們怎么出行提供了最優(yōu)解。

4.1 效果預覽

4.2 路線規(guī)劃插件

騰訊位置服務路線規(guī)劃插件提供路線規(guī)劃等功能，根據(jù)起終點，多種出行方式智能規(guī)劃最佳出行路線及詳情。開發(fā)者可以將路線規(guī)劃插件嵌入到自建小程序的頁面里，實現(xiàn)路線規(guī)劃功能。

可以看到，通過使用路線規(guī)劃插件，我們可以很方便的在我們「乘車二維碼」微信小程序內(nèi)完成路線規(guī)劃功能，接入步驟也較為簡單，主要分為以下幾步：

插件申請接入：

在微信小程序后臺管理平臺中，依次選擇設(shè)置->第三方服務->插件管理里點擊添加插件，搜索騰訊位置服務路線規(guī)劃申請，審核通過后，小程序開發(fā)者可在小程序內(nèi)使用該插件。

引入插件包：

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

設(shè)置定位授權(quán):

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

使用插件：

let key = '申請的key'; //使用在騰訊位置服務申請的key
let referer = ''; //調(diào)用插件的app的名稱
let endPoint = JSON.stringify({ //終點
'name': '八一廣場',
'latitude': 28.673400,
'longitude': 115.904500
});
wx.navigateTo({
url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint
});

在集成路線規(guī)劃插件后，進一步豐富了我們「乘車二維碼」微信小程序的使用場景，現(xiàn)在，用戶可以在不使用地圖類App的情況下進行最優(yōu)路線規(guī)劃，躲避擁堵，方便又快捷。

4.3 小結(jié)

「騰訊位置服務」提供的微信小程序插件，可以說讓微信小程序一步擁有地圖功能，大大的減少了我們開發(fā)的工作量、提升用戶體驗、增加了小程序的使用場景。

目前，「騰訊位置服務」已經(jīng)為我們提供了三款實用性插件：

路線規(guī)劃：根據(jù)起點、終點，智能規(guī)劃最佳出行路線，并支持多種出行方式。
地鐵圖：支持全國所有城市地鐵線路靜態(tài)展示、信息查詢、線路檢索及規(guī)劃等功能。
地圖選點：快速、準確地選擇并確認自己的當前位置，并將相關(guān)位置信息回傳給開發(fā)者。

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

相信后續(xù)也會為我們提供更多功能的插件。

結(jié)語

我們在完善「乘車二維碼」微信小程序的道路上從未停止過腳步，給用戶提供完美的出行體驗是我們的終極目標。我們也不會停止在「騰訊位置服務」上的探索，目前所使用到的能力也僅僅是冰山一角，后續(xù)我們還會繼續(xù)嘗試「騰訊位置服務」提供的個性化地圖、地鐵圖等能力，力爭給用戶提供最完美的出行體驗。

言

面試官：同學考你一個簡單css內(nèi)容，寫一個可展開列表。
我：笑出了聲。心想真的會出這么簡單的內(nèi)容哈哈哈！
面試官：同學不能用js哦，如果可以用stylus編寫就更好啦！
我：小腦剎那間萎縮了......

Stylus 是一種 CSS 預處理器。預處理器是一種腳本語言，它擴展了 CSS 的功能，使得編寫 CSS 更加高效、靈活和強大。Stylus 特別之處在于其簡潔而靈活的語法，它允許開發(fā)者使用變量、嵌套規(guī)則、混合（Mixins）、繼承、操作符、函數(shù)以及條件語句等高級功能來編寫樣式代碼。

接下來，讓我們通過一個騰訊的面試題，來更加深層次認識這個stylus語言帶給css的便捷。雖然考察的是純html+css內(nèi)容，要想純html+css達到完美可卻不簡單。

效果

有三個列表，并且可以展開和收縮，這題目看起來簡單，但是且聽我細細道來，你會發(fā)現(xiàn)里面有很多的秘密！

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>內(nèi)容1</p>
            <p>內(nèi)容2</p>
            <p>內(nèi)容3</p>
            <p>內(nèi)容4</p>
        </article>
        <article>
            <label for="collapse2">列表2</label>
            <p>內(nèi)容1</p>
            <p>內(nèi)容2</p>
            <p>內(nèi)容3</p>
            <p>內(nèi)容4</p>
        </article>
        <article>
            <label for="collapse3">列表3</label>
            <p>內(nèi)容1</p>
            <p>內(nèi)容2</p>
            <p>內(nèi)容3</p>
            <p>內(nèi)容4</p>
        </article>
    </div>
</body>

</html>

首先我們要進行stylus語言環(huán)境的配置，并引入其生成的css文件，配置好之后，我們先看看html部分。

我們設(shè)置了三個復選框，并且復選框的id與label標簽的for相對應，可以方便用戶的操作。服務于用戶。
我們用article語義化標簽，這有助于搜索引擎優(yōu)化（SEO）和屏幕閱讀器更好地理解頁面結(jié)構(gòu)。每個標簽里面放入四段列表。

到此我們html部分就結(jié)束啦，我們重點講解一下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

我們首先清除默認的內(nèi)外邊距。
對整體的accordion設(shè)置寬度。
對article標簽設(shè)置鼠標經(jīng)過變成小手。
通過相鄰兄弟選擇器我們設(shè)置第二個和第三個article的margin top 值。
對label標簽我們設(shè)置一些基本的樣式。
接下來就是我們最重要的部分，我們這里運用了全體兄弟選擇器，我們以input下第一段為例子說明，后面都是一樣的，我們選中第一個被勾選的復選框，然后通過全體兄弟選擇器找到所有的article，并根據(jù)復選框的序號找到對應article的位置，然后將里面的p顯現(xiàn)出來，這一段是我們的核心部分！所以也可以理解為nth-child搭配input，nth-of-type搭配article。

作者：落雪遙夏
鏈接：https://juejin.cn/post/7379873506543616010

在線咨詢

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務商

CSS 2019：騰訊安全發(fā)布2019產(chǎn)業(yè)互聯(lián)網(wǎng)安全十大議題

言

效果

html部分

css部分

您的項目需求