ModernWeb 2021 與會隨筆（10/12~10/15）

-

Modern Web 2021 共筆

10/13

依照古法、純手工打造的視訊聊天網站，不純免錢！/

  • GitHub 範例程式碼

  • 確認是否有在線上：long polling or websocket（比較建議用後者）

  • 取得麥克風和鏡頭權限：MediaDevices.getUserMedia()

  • 用 WebRTC 傳送串流資料：socket.io

    • Signal Server：peer.js。Signal Sever 的作用類似媒人婆，介紹雙方的資訊（Session Description Protocol，SDP，紀錄 IP、agent、decode、encode 等資訊），雙方認識後就讓他們點對點直接溝通，不必再透過媒人婆溝通

    • 如果是內網 IP，會透過 NAT（Network Address Translation）轉成 public IP

    • STUN（Simple Traversal of UDP over NATs）、處理不同網路的連線（via TURN server）：不知道這兩個是啥，暫且搜尋到這篇介紹：明辨STUN/TURN協定　輕鬆跨越NAT建立連線



10/14：測試

八個沒人告訴你的網頁自動化測試挑戰/ 林佳妤（Melo）

    主要針對 code less 的工具而言（用螢幕錄製的方式製作 test case），例如 Selenium IDE

  1. 測試「滑鼠滑過元件後要發生指定變化」，錄製時會錄到非目標的「mouse over」事件。解一：選擇目標 mouse over。解二：調整敏感度

  2. 按鈕被別的東西擋住，使用者按不到，但測試按得到，造成測試通過，但其實功能不合格。解：verify visibility

  3. 如何確認按鈕已經 disable？

      有 HTML 和 CSS 兩種方法可以 disable 按鈕，檢查是否有使用其中一種方法

    • HTML：disable 屬性

    • CSS： 解一：用 get computed style 計算 pointer-events 屬性（需要比較多程式背景知識）。解二：verify css（code-less）

  4. 在某些網頁，播放後輸入值沒有寫進 input 欄位。解：sendKey 後下 blur 指令（unfocus input 欄位）

  5. sendKey 和 editContent 的差別：前者比較像是模擬使用者用鍵盤操作，後者是編輯元素的 innerHTML

  6. code less 工具如何避免重複的操作（例如測試某些功能之前都要先登入）。解：單獨錄製 login，然後在需要登入的測試中 include login，就可以重複使用 login，而不需每次都做一個新的 login

  7. 擷取元素更多屬性

    • storeElement：把一個元素存到變數裡，用變數存取屬性

    • storeElements：把符合條件的元素（可以不只一個）存到陣列裡。可取得元素原生屬性（HTML、CSS），其他屬性可能無法取得

  8. Viewport 大小 vs. Window 大小。前者不包括瀏覽器的側邊欄、分頁欄、書籤欄等等，RWD 建議測 Viewport 比較準，因為不同瀏覽器 Viewport 比例可能不同。


做 A/B Testing 好難，你有試過 Google Optimize 嗎？/ 賴學誠（Kyo）

  • 好的 A/B Testing，每次變量只有一個

  • 體驗 -> 分析 -> 改善 -> 體驗 的循環

  • Google Optimize 原理：把修改的部分存一份在 google 那裡，符合條件的使用者會去 google 那裡抓回來套用在客戶端。所以不用改產品的原始碼，也可以做 A/B Testing

  • Mod Header 無法模擬區域限制，要用 VPN


API 開發、測試、除錯一次到位！使用 MSW 深入淺出 Mock API/ Yuri



10/15：資安

接觸資安才發現前端的水真深/ 胡立（Huli）


機智踩雷生活/ PD Lee

  • 駭客年會第一屆：地下網管二十年（駭客友善年代）

  • Apt 攻擊（客製化的攻擊） => 沒有 total solution

  • Incident Response（被入侵後要怎麼辦）：修補漏洞、保留數位證據（上法庭用）

  • 什麼是紅隊演練

  • 資安驗收方法

    • OWASP top ten：用這個作為驗收標準是不夠的，攻擊不只最熱門的這十種，而且舊的攻擊手法也要防範

      OWASP testing guide：要用這個作為驗收標準才對

    • 白箱檢測比較建議用在開發階段

    • 紅隊檢測是檢查整個網路環境，比較不適合用在驗收單一系統

    • 滲透測試：若能找到厲害的滲透測試人員，則能做完整檢測。但成本高，通常只用在重大系統的驗收

  • EditThisCookie - chrome extension

Comments

Post a Comment

Popular posts from this blog

資料關聯

-
以飲料店的商品種類為例，假設我們現在有飲料和杯子兩種資料。 飲料： id name 1 綠茶 2 紅茶 3 青草茶 杯子： id size 1 500 2 600 3 700 一對一（One to One） 若飲料和杯子是一對一的關係，那麼情況就類似這樣： 綠茶只用 500 cc 的杯子裝 紅茶只用 600 cc 的杯子裝 青草茶只用 700 cc 的杯子裝 一種飲料只有一個尺寸的杯子，而且一個尺寸的杯子也只對應到一種飲料。在這種情況下要建立關聯，有下列兩種方式，擇一即可。這兩種做法在技術上效果是一樣的，不過語意解讀上可能不太一樣。 把關聯欄位加在飲料（語意上，是飲料有杯子這個屬性） 把關聯欄位加在杯子（語意上，是杯子有飲料這個屬性） 把關聯欄位加在飲料的資料表： id name cup_id 1 綠茶 1 2 紅茶 2 3 青草茶 3 把關聯欄位加在杯子的資料表： id size drink_id 1 500 1 2 600 2 3 700 3 一對多（One to Many） 若飲料和杯子是一對多的關係，那麼情況就類似這樣： 綠茶用 500 cc、700 cc 的杯子裝 紅茶只用 600 cc 的杯子裝 一種飲料有許多尺寸的杯子，而且一個尺寸的杯子只對應到一種飲料。 或者是這樣： 綠茶、紅茶、青草茶都只用 500 cc 的杯子裝 一個尺寸的杯子對應到許多種飲料，而且一種飲料只有一個尺寸的杯子。 在這種情況下要建立關聯，一般會選擇加在多的那一邊。如果加在少的那一...
Read more

程式設計相關社群、活動

-
網頁開發 網頁開發雜記 PJCHENder網頁開發咩腳 Backend 台灣 (Backend Tw) Taiwan Backend Group Backend.tw (友善版) Google Chrome Developers 語言 Python Taiwan JavaScript.tw Kotlin： Kraftsman：Coding 職人塾 資安 網路攻防戰 資安解壓縮 Infosec Decompress DEVCORE 如何成為駭客 (資安研討會、社群與網路資源篇) Cymetrics Tech Blog （有胡立大大） 台灣電腦網路危機處理暨協調中心 UCCU Hacker HITCON GIRLS 資安人科技網 個人或公司 資料科學家的工作日常 Ant Yi-Feng Tzeng 偷米騎巴哥 John Liu 的軟體工程思維 Will 保哥的技術交流中心 新加坡商鈦坦科技 Line 的技術部落格 區塊鏈李婷婷 、 FB 、 line 群 管理 TGONetworks 91 敏捷開發之路 技術管理者交流社團 課程 軟體開發學習資訊分享 Udemy 限時免費課程 cs50 中文討論區 Lidemy 鋰學院 商業思維學院 未分類 NEX Foundation 台灣未來基金會 iThome FB Daodu Tech 科技島讀 ∞ Lab 無限大實驗室．金融科技第一站 DevOps Taiwan Chatbot Developers Taiwan 軟體開發的疑難雜症交流區 年會 Hacks In Taiwan 台灣駭客年會 FB 台灣資安大會 cybersec 2021 開源人年會 COSCUP 2021 Python 年會 PyCon 2021 ModernWeb 開發者年會 2021 Javascript 開發者年會 FB: JSDC Taiwan 敏捷年會 Agile Summit 20...
Read more

TCP/ IP 通訊協定

-
為什麼要有通訊協定 不同機器之間，若要能夠溝通的話，需要大家都使用相同的語言。所有人都遵守通訊協定，就不會出現語言隔閡。 什麼是 TCP/ IP 通訊協定 要實現「不同機器之間能夠溝通」，從硬體到軟體，有許多工作要完成。為了讓這份工作比較容易進行，所以將工作拆分成好幾個部分，各自獨立完成；以後若要維護的話，哪個部分有問題，只要維修那個部分就好，不必把所有部分都拿出來檢查，降低維修難度。 至於工作到底要怎麼拆分，不同的模型有不同的建議。OSI（Open System Interconnection）模型切成七層工作，DoD（Department of Defense Model）模型則是切成四層，每一層都有不同的通訊協定。雖然目前實作上通常不是採用 OSI 模型，但為了方便理解「不同機器之間能夠溝通」的機制，通常會用 OSI 模型講解，也會試著將 DoD 模型對應到 OSI 模型。 DoD 模型中有許多通訊協定，不過以 TCP、IP 這兩個通訊協定最具有代表性，所以 DoD 模型又稱為 TCP/ IP 模型。TCP 協定對應到 OSI 模型中的傳送層，IP 協定則是對應到網路層。 TCP、IP 通訊協定負責什麼工作 TCP 協定 發送端的 TCP，和接收端的 TCP，會先進行三向交握，確認彼此能夠順利傳輸資料，才正式開始傳輸資料。 我們可以把要傳輸的資料想像成要郵寄的包裹，郵寄時，包裹會有尺寸或重量的限制，同樣地，傳輸的資料也會有大小的限制。如果資料太大了，TCP 會拆分成小包裹，並且幫每個小包裹編號（以便接收端最後能把小包裹還原成大包裹），並注意是否每一個小包裹都成功送達，若沒有成功送達，TCP 會再補上缺少的小包裹。如果資料太小了，TCP 會幫包裹灌水，以符合大小的下限。 IP 協定 IP 位址就像收件地址，以便確認要將包裹送去哪個主機。IP 位址目前有兩種版本，IPv4 用 32 位元儲存地址，IPv6 用 128 位元儲存地址。所以 IPv6 有比較多的地址可以分配給不同的主機。 IPv4 以 IPv4 而言，位址可以切成兩個部分，第一部分代表 Net ID，第二部分代表 Host ID。相同的 Net ID，代表主機位在相同的 IP 網段，相同 IP 網段的主機之間可以用廣播的方式傳遞資料，而不必透過路由。可以從 N...
Read more