#Front-end

Front-end

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

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

閱讀更多

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。

閱讀更多

Front-end

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

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

閱讀更多

Front-end

這陣子在 Front-End Developers Taiwan 臉書社團上有一系列關於 Tailwind CSS 的討論，起因是另一篇已經刪除的貼文，那篇貼文我有看過，因為怕原文內容跟記憶內容有落差，因此這邊就不講我記憶中的原文大概是在寫什麼了，畢竟這也不是這篇所關注的重點。

總之呢，那篇貼文引起了臉書上前端社團的熱烈討論，在短短兩三天內迅速多出許多討論相關技術的文章。

而有許多人在討論的議題，其實比起 Tailwind CSS 這個工具，更多的是在討論 Atomic CSS 這個概念本身。

閱讀更多

Security

如果你想要在網頁上產生一個新的 window，大概就只有兩個選擇，一個是利用 iframe、embed 與 object 這些標籤將資源嵌入在同個頁面上，而另一個選擇則是使用 window.open 新開一個視窗。

身為前端開發者，我相信大家對這些都不陌生，可能有用過 iframe 嵌入第三方的網頁，或是嵌入一些 widget，也有用過 window.open 開啟新的視窗，並透過 window.opener 跟原來的視窗溝通。

但站在資安的角度來看，其實 iframe 有不少好玩的東西，無論是現實世界或是在 CTF 內都經常出現，因此我想透過這篇記錄近期學到的一些特性。

閱讀更多

JavaScript

我認為在理解 JavaScript 這個程式語言的時候，還需要認識到「執行環境（runtime）」這件事情，你心中的架構圖才會完整。有許多人並沒有意識到這一環，導致對於 JavaScript 或是一些技術的理解有認知上的差異；因此這一篇，就讓我們好好來談談執行環境。

附註：除了 runtime 叫做執行環境以外，execution environment 也叫做執行環境，但這兩個是完全不同的東西。為了避免歧義，底下會盡量用原文 runtime 這個詞。

另外，runtime 有許多意思，這邊的 runtime 比較像是 runtime environment 的意思。

閱讀更多

Security

如果你不知道什麼是 CTF，可以參考我之前寫過的：該如何入門 CTF 中的 Web 題？，裡面有簡單介紹一下什麼是 CTF，以及一些基本的題型。

去年的 DiceCTF 2021 我有認真玩了一下，最後解出 6 題 web 題，心得都在這邊：DiceCTF 2021 - Summary。今年的 DiceCTF 我有看了一下，直接被電爆，難度完全是不同等級。

這次的 Web 題一共有 10 題，1 題水題 365 隊解開，另一題比較簡單一點 75 隊解開，其他 8 題都只有 5 隊以內解開，其中還有一題沒人解開。

身為一個喜歡 web 以及 JS 相關冷知識的人，這是一個很好的學習機會，透過賽後放出的 writeup 來學習各種技巧。底下不會有所有 web 題的筆記，只會有我關注的題目。

閱讀更多

Front-end

如果你的網站想要搶先體驗瀏覽器還沒有正式上線的新功能，該怎麼做呢？

通常這些功能已經做好了，只是沒有開放而已，因此瀏覽器都會提供一些可以開關的 flag，只要把開關打開，就能夠搶先體驗到新功能，但我們通常不太可能叫使用者自己把開關打開。

因此，Chrome 提供了一個機制叫做 origin trials，你可以在網站上註冊，取得一組 token，接著只要設置好以後，如果使用者是用 Chrome 造訪你的網站，那就會開啟新功能，讓你的網站可以使用。

這篇就來簡單介紹一下這個機制該如何使用。

閱讀更多

Front-end

Same site 跟 same origin 雖然看起來有點像，但其實差別不小，而這個差別也會影響到瀏覽器如何看待這兩個網站的關係還有給予的權限。

這篇文章將會談到：

  1. Origin 是什麼？怎樣是 same origin？
  2. Site 是什麼？怎樣是 same site？
  3. same origin 跟 same site 的差別是什麼？
  4. 如何把 same site 變成 same origin？

事不宜遲，就讓我們開始吧！

（開始之前先回答一個疑問。是的，標題的靈感來自於忍者哈特利）

2022-01-20：修改「細究 same site」段落，補充 scheme 相關歷史，感謝 @littlegoodjack

閱讀更多