Web

身為每天都要與網頁打交道的前端工程師，熟悉 DevTools 的使用是相當合理的。每當接 API 出問題時，就按下快捷鍵打開 DevTools，切到 Network 分頁，找到紅色的那一行，右鍵複製成 cURL 貼到群組裡面，讓後端自己找找問題。

但不曉得大家有沒有碰過 DevTools 不夠用的狀況，這時該怎麼辦？

閱讀更多

Security

應該不少人都有跟到三週前 VS Code 上的知名套件 Material Theme 被微軟主動下架的新聞，那下架的理由是什麼呢？根據你得知這件事的消息來源以及自身個性，可能會有兩種回答：

  1. 它「疑似」含有惡意程式碼
  2. 它就是個惡意軟體

為什麼跟自身個性有關呢？因為就算消息來源接收到的是第一種，在種種條件的互相加持影響之下，你也很有可能解釋成第二種。

閱讀更多

Front-end

當你想在網頁上向 server 發送一些 tracking 相關的資訊時，比起直接用 fetch 送出請求，有另一個通常會被推薦的選擇：navigator.sendBeacon。

為什麼會推薦這個呢？

因為如果是用一般送出請求的方法，在使用者把頁面關掉或是跳轉的時候可能會有問題，例如說剛好在關掉頁面時發送請求，這個請求可能就送不出去，隨著頁面關閉一起被取消了。

雖然說可以利用一些方法嘗試強制送出請求，但這些方法通常都會傷害使用者體驗，例如說強制讓頁面晚一點關閉，或是送出一個同步的請求之類的。

而 navigator.sendBeacon 就是為了解決這個問題而生的。

閱讀更多

Security

久違的筆記，想寫很久了但一直拖延，像是 CTF 這種東西的 writeup 其實速度滿重要的，因為賽後討論大部分都在 Discord 裡面發生，時間久了訊息比較難找，而且很有可能忘記，要趕快寫成 writeup 才能把那些實用的資訊記錄下來。

這篇一次帶來三個 CTF 的 writeup，有些我沒有打，只是純粹看著別人的筆記重新記一遍而已。

關鍵字列表：

  1. bfcache
  2. response splitting
  3. Service-Worker-Allowed
  4. gunicorn script_name
  5. socket.io disconnect
  6. socket.io JSONP CSP bypass
  7. performance API
  8. streaming HTML parsing
  9. content-type ISO-2022-JP

閱讀更多

Security

在 idekCTF 2024 中，由 icesfont 所出的一道題目 srcdoc-memos 十分有趣，牽涉到了許多 iframe 的相關知識。我沒有實際參加比賽，但賽後看了題目以及解法，還是花了好幾天才終於看懂為什麼，十分值得把過程以及解法記錄下來。

由於這題牽涉到不少與 iframe 相關的知識，我會盡量一步一步來，會比較好理解。

閱讀更多

Security

這半年左右因為有其他事情在忙，有段時間沒有好好打一場 CTF 了，這次為了 GoogleCTF 2024 騰出時間，跟隊友一起把所有 web 都解掉了。

然後題目依舊很有趣，這次有三題有參與到，另外兩題比較簡單的隊友都先解掉了，沒機會看，但還是會稍微做個紀錄。難得有這種幾乎都是 client-side challenge 的 CTF，我是滿喜歡的。

關鍵字：

  1. URL parser 繞過
  2. parseInt 後面可以帶字串
  3. [a-Z] regex 會包含特殊字元
  4. cookie tossing
  5. CSS injection

閱讀更多

Security

Polyfill.io 是一個能夠自動提供前端 polyfill 的服務，使用方法相當方便，只需要選擇想被 polyfill 的功能，再引入一個 JavaScript 檔案即可：

<script src="https://polyfill.io/v3/polyfill.min.js"></script>

Server 端會自動根據 user-agent 來判斷是不是需要回傳 polyfill，所以只會引入真的需要的程式碼，聽起來方便又好用。

但這幾天應該有人收到 Google Ads 的通知，說這有 security issue，這又是爲什麼呢？

閱讀更多

Web

以前當我想要部署一個簡單的服務時，我會去 Heroku 上面，因為簡單而且免費，雖然說還是有些使用限制，但整體而言還是很方便的，甚至還有一些簡單的 DB 可以用。如果是靜態網頁，會選擇 Netlify 或是 GitHub Pages，也都是簡單方便的選擇。

但 Heroku 從 2022 年年底之後就不再提供免費方案了，因此那時一堆人在尋找替代方案，包括 Render 或是 fly[dot]io 等等，都是很多人跳槽的新選擇。而我自己以前其實在 Heroku 上也有三四個專案，從 Heroku 改變方案之後就再也沒也動過了。

前陣子收到 Zeabur 創辦人的來信，希望有機會能跟我合作推廣這個平台，我自己試了之後發現體驗確實很不錯，因此就寫了這篇文章介紹一下。

閱讀更多

Front-end

如果有看過我的部落格的話，應該會知道我一直都是寫 React，完全沒有碰過 Vue，也沒有碰過 Angular。自從 2015 年接觸到 React 後，工作上就一直是用 React 了。

然而，最近因為工作上的需求，所以開始寫 Vue 了，而剛好也有讀者來問我從 React 跳到 Vue 的心得，因此這邊就簡單寫一篇來分享。

閱讀更多