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

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

閱讀更多

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

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

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

閱讀更多

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

為什麼會推薦這個呢?

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

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

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

閱讀更多

久違的筆記,想寫很久了但一直拖延,像是 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

閱讀更多

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

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

閱讀更多

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

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

關鍵字:

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

閱讀更多

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

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

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

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

閱讀更多

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

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

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

閱讀更多

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

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

閱讀更多