Front-end

你知道嗎，當你跟朋友在討論 SSR 的時候，很有可能你們對 SSR 的認知其實是不一樣的。直接舉個例子，底下這幾種情境，你覺得哪些算是 SSR？

  1. 由後端 PHP 產生畫面
  2. 前端是 React 寫成的 SPA，但後端如果偵測到搜尋引擎，就會切換另一種 template，輸出專門針對搜尋引擎的模板，而非 React 渲染出的頁面
  3. 前端是 React 寫成的 SPA，但透過 Prerender 先把頁面 render 成 HTML，再交給搜尋引擎（一般使用者依然是 SPA），跟上一個的差別是使用者跟搜尋引擎看到的畫面基本上一致
  4. 前端是 React 寫成的 SPA，在後端用 renderToString 把 React 渲染成字串，但是沒有資料，資料會在前端拿
  5. 前端是 React 寫成的 SPA，後端會針對每個 page 先呼叫 API 拿資料，拿完以後才呼叫 renderToString 輸出 HTML，在 client 端時會做 hydration 讓頁面可以互動

有一種人認為只要是由後端產生出畫面，就叫做 SSR，所以 1 ~ 5 全部都是 SSR。也有一種人認為前端必須先是 SPA，此時搭配的後端才能叫做 SSR，所以 2~5 都是 SSR；而另一種人則認為 SSR 的重點是 hydration，所以只有 5（或是 45）是 SSR。

閱讀更多

Security

Sentry 在 2023 年 11 月 9 號時，在部落格上發布了這篇文章：Next.js SDK Security Advisory - CVE-2023-46729，內容主要在講述 CVE-2023-46729 這個漏洞的一些細節，包含漏洞成因、發現時間以及修補時間等等。

雖然說是在 11/9 正式對外發布漏洞公告，但漏洞其實在 10/31 發佈的 7.77.0 版本已經修復了，有預留一些時間給開發者們來修補漏洞。

接著就來簡單講一下這個漏洞的成因以及攻擊方式。

閱讀更多

Security

這兩場比賽都有很多很有趣但也很難的題目，被電得很慘但也學到不少。

關鍵字列表：

  1. nim json, null byte
  2. nim request smuggling
  3. js-yaml
  4. web worker
  5. blob URL
  6. meta redirect
  7. file protocol & .localhost domain
  8. sxg: Signed Exchanges
  9. 431 CSP bypass
  10. DOM clobbering document.body
  11. ejs delimiter
  12. Node.js + Deno prototye pollution gadget
  13. XSleaks golang sort

閱讀更多

Front-end

有些網站會用 GIF 來做一些圖檔，畢竟會動嘛，看起來就比一些靜態的圖片還要厲害，還要來得更吸引人。或其實不只是因為吸引人，而是有些需求本來就需要一個會動的圖，例如說貼圖，會動是很正常的。

但是 GIF 的缺點之一眾所皆知，就是檔案很大，真的很大。尤其是手機上因為解析度比較高，可能會需要用到三倍大小的圖片，就算只顯示 52 px，也要準備 156px 的圖檔，佔的空間就更多了。以網頁來說，當然是要載入的資源越少越好，越小也越好。

閱讀更多

Security

這兩場都有稍微參加一下，但不是每一題都有看，這篇純粹做個筆記而已，稍微記一下解法，不會太詳細。

老樣子，筆記一下關鍵字：

  1. GraphQL batch query + alias
  2. Python os.path.join 絕對路徑
  3. Svg XSS, foreignObject
  4. WebRTC CSP bypass
  5. Status code xsleak
  6. DNS rebinding
  7. nmap command injection
  8. ruby rack 上傳檔案暫存
  9. buildConstraintViolationWithTemplate EL injection
  10. request smuggling
  11. document.baseURI
  12. 200/404 status code xsleak

閱讀更多

Security

前陣子忙著旅遊，沒什麼時間在打 CTF，就算有打也有點懶得寫 writeup，導致上一篇 writeup 已經是 3 月份的時候了。覺得這樣斷掉其實有點可惜，就趕快再寫一篇補回來。

標題提到的這三個 CTF，我只有打 GoogleCTF 2023，其他兩場都只有稍微看一下題目而已，所以這篇也只是對題目以及解法做個筆記。

關鍵字列表：

  1. Flask 跟 PHP 解析 POST data 的順序不一致
  2. iframe csp 阻止部分 script 載入
  3. HEAD 繞 CSRF
  4. location.ancestorOrigins 拿 parent origin
  5. iframe 改 location 不會改到 src
  6. recaptcha URL 的 Angular CSP bypass gadget
  7. document.execCommand(‘undo’); 還原 input
  8. X-HTTP-Method-Override
  9. HTML 與 XHTML 的 parser 差異

閱讀更多

Security

原本是想用開發者的角度寫一篇，但最近沒什麼時間，先寫一篇用 CTF 角度來記錄這個問題，以後有時間再補上用開發者角度寫的。

簡單來說，這篇講的是使用以下 pattern 會造成的問題：

const express = require('express')
const app = express()
const port = 3000

app.set('view engine', 'ejs');

app.get('/', (req,res) => {
    res.render('index', req.query);
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

閱讀更多

Others

我的部落格架構其實很久沒有大幅改動過了，hexo 現在已經出到 v6，v7 正在 beta，而我的部落格還停留在 hexo3。

最近想說剛好比較有空，就趁機找時間翻新部落格，順便運用了 chatGPT 來當小助手。

這次做的改動有：

  1. Hexo 升級版本
  2. 修改 syntax highlight
  3. 深色模式
  4. 自動翻譯（重點）

閱讀更多

Security

Regular expression，中文又翻作「正規表達式」或是「正規表示式」等等（以下簡稱 regexp），主要是用來做字串的配對，寫好一個模式之後，就可以拿來配對到符合規則的文字。

無論是電話號碼、Email 或是身分證字號等等，都可以運用 regexp 來完成初步的格式驗證，確保字串的格式與特定規則相符合。

Regexp 雖然方便，但沒寫好的話有可能導致一些輸入的驗證被繞過，演變成資安問題；而除了這個之外，還有另外一種也會造成問題，就是這篇要來講的 ReDoS，全名為：Regular expression Denial-of-Service，因為正規表達式所引起的阻斷服務攻擊。

閱讀更多