Photo by Hama Haki on Unsplash

今年四月份的時候,我們 Cymetrics 技術團隊在 Medium 上面開設了一個 publication,名為 Cymetrics Tech Blog,裡面放著我們團隊成員寫的技術文章。

而三個多月過後,我們正式從 Medium 遷出,轉移到了自己架的部落格上面。

為什麼做出這樣子的決定?就讓我從頭說起。

為什麼是 Medium?

對於一開始沒有想投入太多資源在 blog 上面,只是想做一點新嘗試的團隊來說,Medium 在當時是再好不過的選擇,優點有:

  1. 編輯文章容易,插入圖片也很容易
  2. 共同編輯容易,publication 讓每個人都可以用自己帳號發文
  3. 快速上手,只需要點幾個按鈕註冊個帳號,部落格就建好了
  4. 其他人都在用,像是 HahowCarousell 或是 Ne …


Photo by FLY:D on Unsplash

某天小明在整理他的我的最愛(到底誰的),發現了一個以前很常逛,但已經將近半年多沒去的一個論壇。小明想回去看看那邊變得怎麼樣了,於是點進去那個論壇,輸入了帳號密碼,得到了密碼錯誤的回覆。

嘗試了幾次之後,系統提示小明可以使用「忘記密碼」的功能,所以小明填了自己的 email 之後去信箱收信,發現系統傳來一個「重設密碼」的連結。雖然說最後小明成功利用重新設定的密碼登入,但有個問題讓他百思不得其解:

「奇怪欸,幹嘛要我重設密碼,為什麼不把舊的密碼寄給我就好?」

應該有許多人都跟小明一樣,有過類似的疑惑。把舊密碼寄給我不是很好嗎,幹嘛強迫我換密碼?

這一個看似簡單的問題,背後其實藏了許多資訊安全相關的概念,就讓我們慢慢尋找問題的答案,順便學習一些基本的資安知識吧!

先提醒一下,雖然說前半段看起來可能跟文章 …


這篇簡單寫一下發表文章前我會設定的東西,大部分選項都藏在右上角那三個點裡面,點下去你會看到一堆可以設置的選項:

右上角三個點點下去

底下條列式來介紹一下我自己會使用的選項,沒用到的我就不介紹了:

  1. Share draft link:當你寫完文章還不想發表,想先給其他人看時就點這個,可以拿到草稿連結,需要登入才能觀看。文章發表後草稿連結跟正式連結會是一樣的,十分方便
  2. Change featured image:更改主題圖片,這會影響到在有 preview 功能的網站會看到哪張圖,例如說在 Facebook 分享時就會出現這邊設定的圖
  3. Change display title / subtitle:就更改標題跟副標題,沒改的話就是自動抓的,可以視情況調整
  4. Change tags:改標籤,沒設的話就是沒有,最多只能五個,可以視情況加一下,標籤支援中文(但比較少標籤)
  5. More settings:點下去會看到更多選項,但有部分會跟這邊重複

更多選項點進去之後會看到滿多與這邊相同的功能,但我通常會設定的只有點進去以後最下方的 Advanced Settings 點開之後的選項:


Photo by Jakob Braun on Unsplash

前言

談到 XSS(Cross-site scripting),許多人可能都只想到「就是網站上被攻擊者植入程式碼」,但若是仔細去想的話,會發現這之中其實還有很多環節都可以再深入探討。

而我所謂的這些「環節」,也可以理解成不同的「關卡」。

舉例來說,第一關當然就是盡可能防止自己的網站被 XSS 攻擊,不要讓攻擊者在網站中能夠植入程式碼。而「讓攻擊者在網站中植入程式碼」這件事,又可以往下再細分成不同地方的植入,例如說 HTML 的植入,或者是 HTML 元素屬性中的植入,又或是 JavaScript 程式碼中的植入,這些都有著不同的攻擊以及防禦方式。

而除了防止被植入程式碼以外,防守方應該還要進一步去想:「那如果真的不幸被植入程式碼了,可以怎麼辦?」

這就是第二個關卡。雖然說第一關我們已經盡可能做好準備了,但難保 …


Intigriti 是國外的一個 bug bounty 平台,每個月都會推出一個 XSS 挑戰,有大約一到兩週的時間可以去思考,目標是在特定網站上面執行 alert(document.domain) ,解出來之後把結果透過 Intigriti 平台回報,最後會隨機抽 3 個解掉的人得到他們自己商店的優惠券。

上個月的挑戰因為解出來的人不多,所以我有幸運抽到 50 歐元的優惠券,其實很划算,因為商店賣的東西其實都滿便宜的,我買了一件 t-shirt + 兩頂帽子再加國際運費,大概 45 歐元左右。

不過這種獎品就是靠運氣啦,還是解題好玩比較重要。

挑戰網址在這邊: https://challenge-0521.intigriti.io/

挑戰截圖

程式碼分析

解題的第一步就是分析一下它的程式碼,先了解一下這整個題目的運作 …


Photo by Ethan Brooke on Unsplash,圖文不符,附圖為用首爾當關鍵字搜尋的結果,純粹只是因為想去韓國了

現在是 2021-03-03,剛做完決定的一週後。雖然說要到五月才會正式轉職,但想說在這個時刻先把當下的心情寫下來,否則再等兩個月心得感想就都從海馬迴消失了。

從五月開始,我暫時不寫前端了,我要內轉去公司做資安的部門當資安研究員。

我是做完這個決定之後,才突然意識到這其實是職涯上的一個滿大的轉變。在前端的經歷其實對於這個新的領域來說幾乎完全不適用,我可能就是一張白紙,一張,還很菜的白紙。

如果我哪天想回去做前端怎麼辦?會不會到時候怎麼寫都忘記了,自斷前端職涯,到時候回去又要從頭再來?如果我資安做出興趣來了,可是沒辦法留在原公司要到新公司,那是不是整個經歷重算?資安菜雞的重啟人生。

但這些其實都是我做完決定之後才想到的事,是我跟新部門主管表達意願,談好之後的工作內容,再跟原主管以及大主管確認 …


如果你不知道什麼是 XSS(Cross-site Scripting),簡單來說就是駭客可以在你的網站上面執行 JavaScript 的程式碼。既然可以執行,那就有可能可以把使用者的 token 偷走,假造使用者的身份登入,就算偷不走 token,也可以竄改頁面內容,或是把使用者導到釣魚網站等等。

要防止 XSS,就必須阻止駭客在網站上面執行程式碼,而防禦的方式有很多,例如說可以透過 CSP(Content-Security-Policy)這個 HTTP response header 防止 inline script 的執行或是限制可以載入 script 的 domain,也可以用 Trusted Types 防止一些潛在的攻擊以及指定規則,或是使用一些過濾 XSS 的 library, …


在程式的領域中有一個名詞叫做「同步」,講到這個你可能會想到「同步進行」,例如說「這個調查我們同步進行」,你做你的我做我的,兩邊同時進行。但同步進行的「同步」翻成英文比較像是 parallel 的概念,也就是平行。

而程式領域中的同步是另外一個意思,比較像是你打開筆記軟體或是信箱時候出現的「同步處理中…」的同步,例如說我在電腦版打開 LINE,可能會出現「訊息同步中」,表示程式正在把手機上的訊息同步到我的電腦,這裡的「同步」就不是平行的意思了,而是「讓兩邊一致」,翻成英文是 synchronous。

程式領域中的同步指的就是 synchronous 而不是 parallel。那既然同步是要讓兩邊一致,就必定會有一個等待的過程,比較快的要等比較慢的追上來,兩者才會同步。

因此在程式領域中,同步指的就是「做一件事情時要等它結束,才做下一件事」。以讀檔案為例好了,程式碼可能會長成下面這樣:

let content = read_file('note.txt') // 讀取檔案
print content // 印出

如果程式是同步執行的,那在第一行執行完畢時就代表檔案已經讀取完了,才會繼續執行第二行。若是檔案很大要讀取十秒鐘,那第一行就會卡在那邊十秒,十秒後才繼續執行下一行。

同步的相反就叫做非同步(asynchronous,同步前面加個 a),代表程式碼在執行某些操作的時候是不等的。

以同樣的程式碼為例:

let content = read_file('note.txt') // 讀取檔案
print content // 印出

那非同步怎麼回傳結果呢?就沒辦法用上面這樣的形式了,而是要換一種方式,換成那個閃閃發亮的紅色圓盤。

在百貨公司地下街點餐時如果你點完要一直在那邊等,沒辦法去其他地方,這就叫做同步。如果點餐之後店員給了你一個呼叫器,你可以先去別的地方,等到餐點好了的時候會透過呼叫器通知你,這就叫做非同步。

因此非同步的程式碼會像這樣:

function done(content) {
print content // 印出
}
read_file('note.txt', done) // 讀取檔案,讀取完時呼叫 done()

化為點餐的範例就是這樣:

function 呼叫器() {
// 呼叫器響了,來拿餐囉
}
點餐('排骨飯', 呼叫器) // 點餐,做好的時候呼叫呼叫器

但這篇其實沒有想談程式,而是要來談溝通。

先來談談寫信

像是寫信就是一件很非同步的事情,我寫完信之後寄給你,我不用每天都守在家裡等郵差送信來,而是可以去做其他事,等郵差主動上門就好。所以訊息之間是有時間差的,差距多寡取決於距離跟回信的快慢。

寫 Email 也是,你通常寫出去之後不會預期立刻有個回應,而是會等個一兩天或甚至更久,也因為如此,在寫信時會盡可能思考多一點狀況,可能就可以少一次來回,減少溝通成本。

舉例來說,如果寫 Email 沒有思考的話,約時間就會是這樣:

> 我後天八點有空,你呢?

經過了五封信件,兩造達成共識約好時間。但有些人預期到信件是需要時間的,可能就會先這樣寫:

> 我這周有空的時間是:
> 後天 八點以後
> 週四 八點以後
> 週五 八點以後
> 再看看你要約什麼時候

只要三次的來回就搞定了,因為有把「如果對方後天八點沒空怎麼辦」這個狀況給考慮進去。

懷念的即時通

早期的即時通訊其實是很同步的溝通模式,通常不太會留言給離線的人,而是看對方上線才會敲他。如果敲了沒有反應,還會送對方一個「叮咚!有人在家嗎~」或是一個嗆聲娃娃。

確認對方有在線上之後才開始聊天,有事情會說暫離,要下線會說我要下線了,像我有個學妹每次密他她都剛好有事說要先閃了,真的很忙。

會這樣是因為當年網路沒有現今這麼方便,可能每天(或間隔更久)都只有固定一段時間可以在電腦前上網,所以才需要這樣的溝通模式,利用兩個人都在線上的時候趕快把事情給搞定。

但現在的即時通訊不一樣了。

現代的即時通訊

現在網路已經是隨身必備的東西,因此大家在零碎時間時可能都會滑一下手機或是看個訊息。這已經不是那種「上線就會連續上線一段時間,下線就會下線好一陣子」的年代了。

在這種零碎的時間之下,同步溝通就顯得沒什麼意義。

在嗎?

請大家在發送這句話之前,先花個三秒想一下:「我想講的事情真的需要對方同時在線上嗎?」,如果需要的話,麻煩把句子寫完整:「在嗎?我有事情想要在你有空的時候直接跟你說」;如果不需要的話,麻煩擺脫同步的溝通模式,改採非同步,直接把你要講的事情說清楚。

你真正要講的事,其實就只是原本對方回「在」以後你要說的事,如果你不需要對方同時在線上,「在嗎」就是毫無意義而且會讓訊息多一次來回的句子。

你該做的是把想講的直接寫出來:

嗨!最近想約你敘舊吃個晚餐,你下禮拜方便嗎?

這樣等對方有空回訊息的時候就會來回你訊息,這也不是什麼對方一定要同時在線上才能講的事。

問我程式問題的時候也是一樣,不需要用「在嗎?」來當作開場白,甚至連開場白都不需要有,你就是把問題直接丟過來就對了,等我有空的時候自然就會回,而你問完之後就可以去做其他事情了,對於這些不需要同時在線上的事,非同步溝通才是比較有效率的解法。

如果對方回一回訊息突然不見,若是沒有在討論什麼真的很重要的事,你也不必多想,畢竟回訊息的時間本來就可能是零碎時間,例如說中午吃飯的空檔,或是搭公車的時候滑手機回一下,回完就把手機收起來了。在這樣一個使用網路時時間零碎的時代,這都是很正常的事情。

我自己幾乎沒在看已讀跟未讀,一來是因為很多人會看,所以有各種 App 或是方法可以看到訊息但不標已讀,二來是已讀不回也不代表什麼,像是我對於有些訊息就會想先點開,但要思考個一兩天看看怎麼回,已讀不回可能只是暫時的沒回,並不是真的就不回。

如果過了一兩週還真的沒回,那可能才是不想回或是漏掉了,可以等那個時候再做後續的處理。總之我想說的是,已讀後暫時沒有回覆是正常的,讀了訊息不代表對方馬上就要回你。

所以除非事態緊急,不然看對方已讀還是未讀其實是沒什麼意義的,大概只會有負面的影響而已吧,影響了你自己的心情。

非同步溝通的好處

每個人都可以自由且彈性地利用時間。當我想討論某件事情時我不用跟對方喬一個時間,我就先把自己想到的全都寫下來寄給對方,再等對方回覆就好。我就可以去做其他事情了,對方也可以去做其他事。

但有時候同步其實還是必須的,因為非同步就是善用零碎時間,把時間切成一小塊一小塊的,把事情搞定所需要的「整體時間」可能較短,但是時程可能會拉長,如果想在短時間內直接搞定,那約個同步的 meeting 當場解決可能會是更好的做法。

所以說其實同步非同步各有優劣啦,依照不同的情境選擇不同種溝通方式才是上策。但我想強調的是,很多事情真的不用等到對方上線才傳訊息,就像你寄信也不會管對方是不是在電腦前一樣。

這篇純粹談一下自己對溝通的看法,主要是覺得收到那種「在嗎?」的訊息就跟收到「在嗎?」的信件差不多瞎,想問什麼問題就直接問,我如果沒辦法回我就會說沒辦法回,不用等我在的時候才把想問的東西傳給我,我就算在也不會馬上回覆。

上面講的比較多是針對工作上的討論或是其他要事的討論,跟朋友的瞎聊當然另當別論,那種想怎麼傳都可以,硬是要把一則訊息分成好幾封也都可以,輕鬆自在就好。

但如果是要討論一些正事,可以在發送訊息時多想個幾秒,想想如何減少訊息的來回,想想非同步的精神,或許就能增進一些效率。


還記得那天特別提早一點出門,就是為了避開排隊的人潮。

之前忘記從哪邊得知這件事情了 — — 在倫敦也有海底撈,而且是歐洲的第一間,好像也是唯一一間。我不是「在國外幹嘛吃台灣也有的食物啦」的那種人,也不是「在國外就是要吃台灣吃得到的食物啊」的那種,而是兩種疊加在一起,想吃的時候就去吃,無論想吃的是不是當地的食物都無所謂。

「在倫敦吃海底撈好像挺酷的」,抱持著這種想法,我在週日的時候邊逛街邊打探一下海底撈的底細,原本想說在倫敦應該沒什麼人想吃吧,但當我走近店門口的時候嚇了一跳。哇靠,人還真多,明明就是下午兩點,卻要排五十組才吃得到,而且幾乎全部都是華人面孔,也聽到許多中國口音。

那瞬間我理解了一件事,因為中國人夠多,所以儘管是只賣中國人的店,也能有一定的客群吧。對我來說海底撈沒有特別吸引人,因為那是在台灣能夠輕易取得的食物,可是對這些在英國留學或是工作的中國人來說,或許是種家鄉的味道。就像我在新加坡偶爾也會想吃台灣蛋餅或是雞排一樣(雞排其實在新加坡滿容易取得,蛋餅就困難許多)。

秉持著不輕易排隊的原則,在周遭閒晃一下之後就搭地鐵回家了,打算等明天平日的時候再跑來看看,平日應該就沒有這麼多人了吧。

為了保險起見,特地提早出門,計畫是在開店前 15 分鐘到達門口,預計最長的等待時間也大概就是 15 分鐘才對。我在路上還想說會不會只有我一個人在排隊而已。

到了店門口,發現我太低估海底撈了,我大概是第六七個人,其他人早就已經排在那還沒開的店門口了。等了一會時間差不多了,店員出來招呼客人,豪不意外地,店員也是中國人,是熟悉的中國口音。海底撈好棒啊,讓我這個不想講英文的人可以用中文來交談。

在等待座位的同時,一樣是海底撈的標準配備,會有一些點心跟飲料可以無限使用,我記得那天的點心好像是爆米花還是花生什麼的,在等待的時候觀察了一下周遭的客人,聽口音應該也都是中國人,看長相猜測是學生,可能懷念海底撈的味道了。

主要的用餐空間是在地下室,入座之後店員問我需不需要在我對面放一隻熊來陪我,我拒絕了,這樣太奇怪了。但店員又推銷了一下,說「還是放一下吧」,我想說好吧你都這樣講了,我就放一下吧。

於是我對面就坐著一隻,粉紅色的,跟我差不多大隻的熊熊。

熊熊本人

剛開始的時候是沒什麼感覺的,就一隻玩偶在對面嘛,但是當時間越來越接近用餐時間,人越來越多的時候,我才意識到這是一件需要恥力的事情。因為每個路過的人都會看著那隻熊,然後再看看我,再跟朋友交頭接耳竊竊私語。我猜他們是說:「哇居然還有熊,好可愛,我也想要」,或者再加上「對面那人好怪喔」之類的。但沒記錯的話熊熊陪吃飯好像是一個人吃海底撈的專屬配備,怕你孤單寂寞覺得冷才有的服務。

點餐的時候按照慣例登入了我的海底撈帳號,看了一下消費記錄:新加坡海底撈、美國海底撈、台灣海底撈,我要特別澄清,我沒有很愛海底撈,我只是純粹覺得「吃不同國家的海底撈留下紀錄」這件事情好像很好玩,所以之前去美國的時候也跟朋友們去吃了海底撈,而且美國的那次吃得滿爽的,價格其實也不算太貴。

餐點的部份其實沒有什麼差別,或許有常吃的才會知道差在哪邊吧,之前在新加坡的時候聽中國同事說新加坡的少了很多可以點的,但我看不出來就是了。可能就像是,如果國外的鹹酥雞店家只賣雞排、鹹酥雞跟薯條,搞不好對外國人來說沒什麼,但對我來說就會覺得怎麼少了一堆選項。

這樣吃一吃大概到了 12 點左右,整間海底撈已經客滿了。而且依據我所聽到的,依舊是中國人佔大多數。我記得我有碰到一個台灣人的店員,沒記錯的話我們應該是根據口音相認的。

吃完結賬時,帳單大概 30 英鎊,換算成臺幣大概一千多,雖然換台幣看起來很貴,但是單看英鎊好像還好?畢竟吃餐廳的話應該本來就是這種價位,不過我在英國的時候好像也沒吃過幾次餐廳就是了,大多數時間我都是吃超市的無敵特價組合。

雖然大家都說英國物價滿高的,但我那時候很喜歡的英國超市的特價組合(就像便利商店三明治加飲料 49 元之類的),一個三明治加果汁再外加一份水果(葡萄跟草莓),只要 3 英鎊,折合台幣大概 120 塊,我覺得有夠超值,導致我有好多餐都吃這個組合。

總之呢,我成功在我的海底撈會員留下了一筆倫敦店的紀錄,又增添了一個新的國家。至於那天後來跑去開在英國的中國網咖打咖花了四五百塊,還創了一個 LOL 的歐服帳號角色,就是另外一個故事了。

這種東西原本都是放臉書上的,但最近這裡都沒什麼更新,也沒什麼靈感,只好把一些廢文搬過來湊個數。


沒錯,又到了程式導師實驗計畫開始招生的時候了。

這一期一樣有把資訊更新到網站上面,如果想要看比較完整的資訊的話建議到底下的網站觀看:

如果嫌網站資訊量太多(?)的,也可以參考這篇,我會大概講一下這在幹嘛以及跟上一期的差異。

計畫詳情

這個計畫的目標是:

六個月內,把你培養成一個找得到工作的網頁工程師(前端或後端)

教的東西很多,想看課綱可以參考:簡化版的課綱(適合外行人觀看),詳細版的可以去 GitHub 上面看:https://github.com/Lidemy/mentor-program-5th。由於這一期課綱應該會跟前一期差不多,所以目前第五期課綱是直接完全複製第四期的,在第五期開始之前還會再做調整,大方向會是一致的,只是課程的安排會再想一下,這點請大家注意。

課程的強度其實很高,上一期如果要報 …

Huli

重度拖延症患者,興趣是光想不做,有很多想做的事,卻一件都沒有執行。無聊的時候喜歡寫文章,發現自己好像有把事情講得比其他人清楚的能力。相信分享與交流可以讓世界更美好。Medium 文章列表請參考:https://aszx87410.github.io/blog/medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store