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

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

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

閱讀更多

簡單記錄幾個最近碰到的神奇特性，直接講不有趣，先來幾個小挑戰：

閱讀更多

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

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

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

閱讀更多

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

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

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

閱讀更多

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

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

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

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

閱讀更多

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

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

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

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

閱讀更多

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

閱讀更多

我認為想要真正認識 JavaScript 的話，要從歷史開始。為什麼？因為從它的歷史，可以知道為什麼某些部分是這樣子設計，為什麼會有這些看似奇怪的行為。雖然有些古早的知識可能沒什麼實際用途，但對我來說是很有趣的。

學習它的歷史，並不是死背它出現的年代或是當初花了幾天開發設計，而是要去理解它出現的脈絡，去理解為什麼需要它，又為什麼它是這樣子被設計的。

想了解 JavaScript 的歷史，我最推薦的是這個資源：JavaScript: The First 20 Years，因為 JavaScript 之父 Brendan Eich 也是作者之一，想看中譯版的話在這邊：JavaScript 二十年。

這本書紀錄了從 1995 年到 2015 年，一共二十年的 JavaScript 歷史，如果有時間的話我強烈建議你把它全部看完，會對 JavaScript 有不同的體會（還會知道很多冷知識）。

底下我會挑一些我覺得比較重要的東西來寫，資料來源沒有特別講的話，都是來自於上面提到的那本書，所以若是覺得似曾相似是正常的。

由於我跟 JavaScript 差不多時候出生，因此這些早期的歷史我並沒有親身體會過，若是寫得好像我有親身參與的話，全都是想像而已。

閱讀更多

前言

之前已經介紹過 Intigriti 的 XSS 挑戰很多次了，這次就不再介紹了，有興趣的可以直接翻我之前的文章。這一篇文章的重點會放在他們十月份的挑戰，難度不高，我花了大約一兩天的時間解出來以後就放著沒動，會想寫這篇是因為挑戰結束以後，看到許多超乎我想像的解法，因此特地寫一篇文章記錄一下。

閱讀更多

此文章是我在 Modern Web 2021 的分享：《接觸資安才發現前端的水真深》的文字版，當時的演講影片尚未釋出，想看簡報的話在這邊：slides

我自己覺得影片加上簡報的效果應該會比文字好，但想說用文字留一份紀錄也不錯，因此還是寫了這篇文章，內容會有些許與影片不同，有點像是再重新寫了一遍。

閱讀更多