第 93 期 - 父親節過了，也是時候把技術債都付清

Created on 2021-08-10

本週專欄

你不能不知道的安全性 HTTP headers

隨著網路上的 Web 應用程式越來越多，為了提升安全性，現在跟安全性有關的 HTTP header 也是多到記不得，所以這邊想要介紹幾個比較簡單、好設定的安全性 headers ，只要把這些 headers 加進去，網站就會突然變安全哦～

資訊安全

CORS 完全手冊（一）：為什麼會發生 CORS 錯誤？

這一系列的 CORS 完全手冊大概是我看過講 CORS 講得最清楚的，除了教你怎麼解決實務上的 CORS 問題之外，還花了不少篇幅講 CORS 為什麼要設計成這樣，不管你寫的是前端還是後端都該讀讀這篇～

淺談 XSS 攻擊與防禦的各個環節

所謂的「網站被攻擊者植入程式碼」其實還可以分成許多環節及關卡，像是「阻止攻擊者在網站植入程碼」、「阻止惡意程式碼被執行」、「降低 XSS 攻擊之損害」其實是三件不同的事情，所以當然也要用不同的方法去防範～

HTTP Session 攻擊與防護

雖然這篇由 DEVCORE 寫的文章已經是好幾年前發佈的，但最近又看了一遍還是覺得寫得很不錯，尤其是猜測 Session ID 的部分幾乎很少有文章會提到，所以很推薦所有後端開發者都能看看，也許能有一些意想不到的收穫

前端開發

重新思考 jQuery

在當今主流的前端框架 React、Vue 和 Angular 等等之下，感覺已經比較少看到有人提到 JQuery 的新版本或開發方式，但是 JQuery 曾經提供給我們方便使用的那些語法，還是有很多值得我們學習的地方，這篇文章的作者列出一些在 JQuery 中那些熟悉的 API，看看那些從語法後學到的事。

 Tag in HTML – Example Code

HTML 中的 pre Tag 的內容可以在沒有任何 HTML 標籤或語法（br 或  ）的狀況下，保留所有在程式碼中的空白或換行，在使用上我常會用 pre 來顯示使用者輸入在 textarea 中的內容。

8 Proper Ways to Hide Elements on Your Website With CSS (2021)

在網頁中隱藏元素最常用的方法應該就是視情況使用 display: none; 或 visibility: hidden;，不過文章還列舉出其他像是用 transform 把元素縮到最小、用 position 把元素放到看不見的地方等等（但文章中沒有列出用 opacity 直接把元素變成透明 😂），大家可以看看各種方法的差異和使用情境如何，之後遇到類似的情境可以考慮使用！🙌

Understanding React Portals and Its Use-Cases

React Portal 算是一個蠻重要但是蠻進階的用法，當今天想要將一個元素永遠擺在最外層，例如永遠 append 在 document.body 之下，可以透過 Portal 的方式輕鬆地達到，甚至利用 Portal 你也可以輕鬆地把元素安插到某一個節點上都不是問題，最常見的用法就是把 Modal 利用 Portal 的方式 append 在最外層，這樣根據 HTML 的結構來看也比較合適。

這個算是蠻有趣議題，其實 DOM 可以直接透過元素 ID 的方式來抓取元素，不必藉由 document.getElementById() 的操作直接把元素的 ID 當作是全域變數的方式來抓取元素，也因為這個特性導致網站很有可能會因此被進行攻擊，所以才會鼓勵大家在寫 React 的時候透過 ref 的方式進行 DOM 操作，這篇文章闡述了 DOM clobbering 的議題，有興趣的讀者可以收藏起來閱讀。

6 useful frontend techniques that you may not know about

這個真的太有趣了，沒想到有這麼多小技巧可以達到一些平常會用到的效果，只能說前端真的太廣大了哈哈哈，太多比較細節的操作如果沒有親自去深入研究的話根本就不知道還有這麼多可玩之處。

DevOps

NSA, CISA publish Kubernetes hardening guide

NSA (National Security Agency) 和 CISA (Cybersecurity and Infrastructure Security Agency) 發布了一份 59 頁的技術報告，內容主要是想教導大家如何 Hardening Kubernetes，畢竟由 Google 所開發跟開源的 Kubernetes 是目前世界上最流行的 Container Orchestration，越多人越用的東西，對於駭客來說就越有研究的價值，報告內容主要涵蓋底下幾個大項：

透過掃描 Container 和 Pod 來發現 Vulnerability 或是 Misconfiguration
盡可能使用最小權限來運行 Container 和 Pod
利用網路隔離性來控制被入侵時可能造成的損害
使用防火墻來限制不必要的網路連線，並且利用加密技術來保護敏感資訊
使用強勁的 Authentication 和 Authorization 機制來限制一般使用者和管理員存取，同時也能達成攻擊面的限縮
使用稽核 Log，管理員可以透過它來監控活動，並就潛在的惡意活動發出告警
週期性地檢查所有的 Kubernetes 設定，並且利用弱點掃描工具來發現風險和確保 Security Patch 都有記得安裝

Learn the networking basics every sysadmin needs to know

有人跟我一樣把文章封面圖片的網路線看成一串香蕉的嗎XD 這篇文章從網路最基本簡單的 TCP, IP 概念開始介紹起，然後從 Linux 系統中的 Network Interface 為例來做更深入的探討，例如如何配置靜態 IP，設定網路路由，最後再介紹一點 Network Switch 和 Router，協助 sysadmin 能夠勝任日常工作

StarBugs Weekly

StarBugs Weekly 由一群不寫文章就會想要亂花錢，但是又沒有那麼多錢，只好繼續寫文章的開發者所創立。
內容包含 Web 前端、中端、後端、DevOps、產品開發、精實創業，一切跟產品有關的知識，都是我們的守備範圍！

Writers:

@HannahLin - 從台灣到矽谷，熱愛前端的工程師女孩。
@KyleMo - 雜食性軟體工程師，喜歡的技術我都想學。
@Airwaves - Hi~我是 Airwaves，熱愛研究如何造輪子的前端工程師。
@Jenny - 我不寫 CSS。

Curators:

@Andy - 目標成為用嘴巴工作的工程師，專長為網頁開發以及 K8s。

Maintainers:

@GQSM - Hi！我是神 Q 超人，一個先衝再說的男人。
@LarryLu - 我是 Larry，傳說中的 0.1 倍工程師！
@LukaTW - 一名全身都是死角的工程師。
@smalltown - 熱愛鑽研各種可以提升雲端服務品質及增進團隊開發效率的開源技術。

Feedback

本週呈現主題方式做了一些改變，希望讓讀者能夠更快速精準的找到自己要的資訊。也加入社群活動這個區塊，每週更新社群活動的資訊。如果有任何建議，歡迎私訊星巴哥技術週刊 FB 粉絲專頁與我們聯繫。