前言

在上一篇 CORS 完全手冊(一):為什麼會發生 CORS 錯誤?裡面,我們理解了為什麼瀏覽器要有 same-origin policy,以及跨來源請求擋的其實是 response 而不是 request。在釐清了一些錯誤的觀念以及對 CORS 有基本的認知以後,就可以來講講怎麼樣解決 CORS 的問題。

先跟大家預告一下,這篇會提到的解決問題的方法並不完整。事實上,跨來源請求分成兩種,簡單請求跟非簡單請求,「跨來源請求擋的其實是 response 而不是 request」基本上只適用於簡單請求,而這一篇只會針對「簡單請求」,至於到底怎麼分簡單還是非簡單,以及非簡單的要如何處理,這些都會在下一篇提到。

想要解決基本的 CORS 錯誤,其實有滿多種方法,先來介紹幾個「治標不治本」的:

  1. 關掉瀏覽器的安全性設置
  2. 把 fetch mode 設成 no-cors
  3. 不要用 AJAX 拿資料

以下就會先針對這三個方法再進一步講解,講完以後我們會來講最後一個也是最正確的做法:「請後端加上 CORS header」。

閱讀更多

前言

三年前的時候寫了一篇文章:輕鬆理解 AJAX 與跨來源請求,提到了串接 API、AJAX、same-origin policy、JSONP 以及 CORS,當時把自己想講的都放進去了,但現在回頭看,好像有很多滿重要的部分沒有提到。

三年後,再次挑戰這個主題,並且試著表達地更完整。

會想寫這個系列是因為在程式相關的討論區上,CORS 是發問頻率很高的主題,無論是前端或是後端都有可能來問相關的問題。

所以我就想說:「好,那我來寫一個系列好了,我要試著把這個主題寫到每個碰到 CORS 問題的人都會來看這個系列,而且看完以後就知道該怎麼解決問題」,這算是我對這篇文章的目標,如果文章的品質沒辦法達成這個目標,我會持續改進。

這系列一共有六篇文章,分別是:

會從 same-origin policy 開始講起,接著講到為什麼跨來源存取資源會有錯誤,再來會講如何錯誤地以及正確地解決 CORS 相關的問題,而第三篇會詳細講解跨來源請求的詳細流程,像是 preflight request 之類的東西。

基礎的部分看前三篇就夠了,接下來會比較深一點。第四篇會帶你一起看 spec,證明前面幾篇不是我在虎爛的,而第五篇則是帶大家看看 CORB(Cross-Origin Read Blocking)、COEP(Cross-Origin Embedder Policy)或是 COOP(Cross-Origin-Opener-Policy)之類的跨來源相關規定,以及相關的安全性問題,最後一篇則是一些比較零散的主題以及心得感想。

閱讀更多

前言

最近的興趣是玩 CTF,而且只玩裡面的 web 題,原因很簡單,因為其他領域的我都不會…目前只對 web 的東西比較有興趣,就當作休閒娛樂來解題了。

這篇是 BambooFox CTF 2021 的解題心得,只解出了三題。

閱讀更多

前言

說身為一個前端工程師,理所當然會知道很多與前端相關的知識,像是 HTML 或是 JS 相關的東西,但那些知識通常都與「使用」有關。例如說我知道寫 HTML 的時候要 semantic,要使用正確的標籤;我知道 JS 應該要怎麼用。可是呢,有些知識雖然也跟網頁有關,卻不是前端工程師平常會接觸到的。

我所謂的「有些知識」,指的其實是「資訊安全相關的知識」。有些在資訊安全裡面常見的觀念,雖然跟網頁有關,卻是我們不太熟悉的東西,而我認為理解這些其實是很重要的。因為你必須懂得怎麼攻擊才能防禦,要先知道攻擊手法跟原理,才知道該怎麼防範這些攻擊。

閱讀更多

前言

部落格需要顯示發佈時間,餐廳網站要顯示訂位時間,拍賣網站則是要顯示訂單的各種時間,無論你做什麼,都會碰到「顯示時間」這個很常見的需求。

這問題看似簡單,不就是顯示個時間嗎?但如果牽扯上「時區」的話,問題就會變得再更複雜一些。以時區來說,通常會有這幾個需求:

  1. 網站上的時間需要在某個固定時區顯示,我在美國跟在台灣要在網站上看到同樣的時間
  2. 網站上的時間會根據使用者的瀏覽器設置不同,我在美國跟在台灣看到的時間會不一樣
  3. PM 根本沒想過這問題,只考慮到當地的使用者,所以暫時不用擔心這個

而這還只是顯示的部分而已,還有另外一個部分是與後端的溝通,這個我們可以待會再提,但總之呢,要正確處理時間跟時區並不是一件簡單的事。

在最近這一兩份工作剛好都有碰過相關的問題,因此對這一塊有點小小心得,就寫了這一篇來跟大家分享一下。

閱讀更多

前言

最近公司的同事修了一門資安相關的課,因為我本來就對資安滿有興趣的,所以就會跟同事討論一下,這也導致了我這兩週一直在研究相關的東西,都是一些以前聽過但沒有認真研究過的,例如說 LFI(Local File Inclusion)、REC(Remote code execution)、SSRF(Server-Side Request Forgery)或是各種 PHP 的神奇 filter,也能複習原本就已經相對熟悉的 SQL Injection 跟 XSS。

而 CTF 的題目裡面常常會出現需要繞過各種限制的狀況,而這就是考驗對於特定協定或者是程式語言的理解程度的時機了,要想想看怎麼在既有的限制之下,找出至少一種方法可以成功繞過那些限制。

原本這一週不知道要寫什麼,想寫上面提的那些東西但還沒想好怎麼整理,之前的 I Don’t know React 後續系列又還沒整理完,就想說那來跟大家做個跟「繞過限制」有關的趣味小挑戰好了,那就是標題所說的:

在 JavaScript 當中,你可以做到不用英文字母與數字,就成功執行 console.log(1) 嗎?

換句話說,就是程式碼裡面不能出現任何英文字母(a-zA-Z)與數字(0-9),除此之外(各種符號)都可以。執行程式碼之後,會執行 console.log(1),然後在 console 印出 1。

如果你有想到以前聽過什麼有趣的服務或是 library 可以做到,先不要。在這之前可以自己先想一下,看有沒有辦法寫出來,然後再去查其他人的解決方法。

若是能從零到有全都自己寫出來,就代表你對 JS 這個程式語言以及各種自動轉型的熟悉程度應該是滿高的。

底下我就提供一下我自己針對這一題的一些想法以及解題過程,有雷,還沒解完不要往下捲動。

==防雷==
==防雷==
==防雷==
==防雷==
==防雷==

閱讀更多

前言

附註:目前這個 blog 對於 JSX 的語法支援有問題,所以看程式碼的時候可能沒那麼容易閱讀,我會盡快再找時間修復。

這個標題致敬了有寫 JavaScript 的人就算沒看過也一定聽過的一系列書籍:Kyle Simpson 寫的 You Don’t Know JS(中譯版翻成《你所不知道的 JS》),裡面講了許多很多人不知道的,有關於 JS 的東西。

而 I don’t know React 是我對我自己的一系列紀錄,記錄了一些我所不知道的 React,而這些文章都是由我使用 React 的經驗總結而來。這一些我曾經碰到過的錯誤,有可能很基本很常見(官方文件上面就有寫的那種,只是我沒看清楚所以不知道),也有可能比較少見(我可能在工作上寫三四年才碰到)。

換句話說,寫這系列的精神跟 YDKJS 不一樣,前者是想告訴你一些 JS 當中比較少人知道的東西,是一種「我來教你寫 JS」的感覺,而我寫這系列之所以叫做「I don’t konw」,是因為想用一系列的文章記錄自己寫 React 曾經有過的誤解或者是沒有注意到的地方,以及正確答案到底是什麼。

我也不知道這系列文會有幾篇,大概就是我每犯下一個就會來 po 個文。這系列有一個我覺得滿大的不同點,就是我會在文章開頭盡可能提供當時犯錯的場景重現,讓大家能有機會在看答案之前自己 debug,看看是否能找出錯誤在哪。我覺得這其實是最精華的部分,這不是什麼制式的面試考題,也不是從網路上隨便找來的 React 測驗,而是我在工作上碰到過的真實的狀況。

因為想要讓大家盡可能融入情境,也去思考我曾經碰過的問題,所以會有不少篇幅在於「定義以及重現問題」,如果你對自己尋找答案沒有興趣,也可以直接跳過這個部分去看解答。但我個人建議是自己先嘗試 debug,去發現問題在哪,才來看文章內的解答,才能完整地吸收文章想表達的東西。

總之呢,讓我們先來看看這一篇要講的案例吧!

閱讀更多

前言

最近在臉書上的前端社群看到了一篇文章:理解 React useEffect 02,內容是有關於 useEffect 的使用方式,後來在留言串也有了一些討論

其實當初第一眼看到這篇文章的用法,我也是覺得有些奇怪,不過我其實多少能夠理解為什麼是這樣寫,只是還是覺得怪怪的。原本想留言,但是後來覺得「搞不好奇怪的是我」,就想說再思考一下。仔細思考過後,奇怪的還真的是我。

因此這篇來講一下我的想法,有錯的話歡迎在文章底下留言指正,或是在前端社群跟我討論也可以。在繼續閱讀之前,建議先看過上面那篇原文以及原文底下的討論,才會比較進入狀況。

閱讀更多

前言

如果你想把東西存在網頁前端,也就是存在瀏覽器裡面,基本上就是以下這幾個選項:

  1. Cookie
  2. LocalStorage
  3. SessionStorage
  4. IndexedDB
  5. Web SQL

後兩者應該滿少用到的,而最後一個 Web SQL 也早在幾年前就被宣告已經不再維護了。因此在談到儲存資料的時候,大部分的人提的還是前三種,其中又以前兩種最多人使用。

畢竟在前端儲存資料時,大部分資料都希望能儲存一段時間,而 cookie 跟 localStorage 就是被設計在這種情形下用的,可是 sessionStorage 不是,它只適合儲存非常短期的資料。

不知道大家對 sessionStorage 的理解是不是跟我一樣,先說說我的理解好了:

sessionStorage 跟 localStorage 最大的差別在於前者只會存在於一個分頁當中,你分頁關掉之後資料就清除了,所以新開分頁,就會有新的 sessionStorage,在不同分頁不會共用。但後者如果是相同的網站,可以共用同一個 localStorage

但我想問大家的是:有沒有可能有一種情況,我在分頁 A 的 sessionStorage 存了一些東西,然後有一個新的分頁 B,也可以讀到分頁 A 的 sessionStorage?

你可能以為沒有,我以前也以為沒有,我同事也這樣認為。

但偏偏就是有。

閱讀更多

前言

不知道大家有沒有聽過 vite 這個工具,看它名字有個 v,大概就可以猜到可能跟 Vue 有關。沒錯,這是 Vue 的作者尤雨溪開發出來的另外一套工具,原本是想要給 VuePress 用的,但是強大之處就在於它不僅限於此。

Vite 在 GitHub 上的 About 只寫了兩個句子:

Native-ESM powered web dev build tool. It’s fast.

如果你有體驗過,就會發現真的很快。Vite 是 build tool 跟 dev server 的綜合體,這篇會簡單教大家使用一下 vite,然後來談 ES modules,再來看看 vite 神奇的地方。

閱讀更多

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×