2021/01/20

宮崎駿創作歷程 :: "這好難啊"，但如果你跟我說幹嘛乾脆就不要做了，我會跟你說 "閉嘴"

Chrome SameSite Cookie Policy Causes Problem :: Logout When Direct To External Website Then Back Own Site

Recently I am working on a function, when user submits the form then it will direct to the external website, and we will give a return URL via the form, let the external website can lead the users back to our website after finish their manipulation.

Then I encountered a problem, the users will be automatically logged out when the external websites redirect to our website.

After debugging, I discovered that the session ID is different from the origin session ID when users direct back to our website, and it only occurs in Chrome, Safari, IE, Edge, firefox works fine.

Why? It turns out that Chrome enforces set SameSite = LAX cookies, so we need to set the SameSite = 'None', that Secure will be available on a third-party website.

So, Let's start to edit the SamSite attribute,
First, you may want to know "Is that the logout reason really was caused by SameSite ?"
That's fine, we can test it w/o modifying code.
Enter chrome://flags/ in the URL bar,
search "Samesite" then turn it as disabled,
press the button "Relaunch" to relaunch the setting on the bottom right corner.

To test the users will log out or not.
If it works, then the problem definitely is SameSite.

However, that's impossible to ask every user to change the setting,
that's all right we have a couple of methods to solve the problem,

1. Set the header

If your PHP version < 7.3.0

header('Set-Cookie: cross-site-cookie=name; SameSite=None; Secure');

or

header('Set-Cookie: cookie2=name; SameSite=None; Secure', false);

If your PHP version >= 7.3.0

setcookie('cookie2', 'name', ['samesite' => 'None', 'secure' => true]);

or

setcookie('cross-site-cookie', 'name', ['samesite' => 'None', 'secure' => true]);

Use the name of 'sessionID' to replace 'name'

If you setting success you will see the context which was wrapped by red line.

2. Set the .htaccess

Header always edit Set-Cookie ^(.*)$ "$1;HttpOnly;Secure;SameSite=None"

3. Set the httpd.conf

Header always edit Set-Cookie ^(.*)$ "$1;HttpOnly;Secure;SameSite=None"

Remember to reload the apache after setting up

2020/07/31

英文我知道聽讀寫，不知道怎麼開口說

此篇主要是分享關於增進英文口說能力以利應徵職缺、閒聊和辦公的一些個人經驗；不保證完全適用於每個人，但如果因此可以幫到你那就太好了。

＊注意 : 因本人主要是應徵英國職缺，所以推薦相關教材會以英國的為主，但不影響如何精進

一、每天都要接觸英文，不管是用哪種方式，讓自己習慣

最好學習某種語言的方式，就是讓自己浸盈在那個語言的環境中 ; 但我們現在不在使用那個語言的國家的時候，可以怎麼做呢?

1.1 查資料、看菜單時等等都先看英文說明再對照中文

1.2 看影集時練習聽力

其實也不一定要是影集，也可以是電影、Youtube 影片、Podcast、音樂等，選擇自己有興趣的，不要硬逼自己一定要看新聞或科技新知什麼的，做自己沒興趣的事情沒辦法維持太長久。

第一次看時隱藏字幕用聽的，第二次看時開啟英文台詞，看自己剛剛聽不懂的地方單字和句型是什麼，第三次開啟中文台詞，看自己理解的內容正不正確

重複朗誦影片中人的台詞，學習英語母語者講話的腔調。

看教學、新聞影片時一邊列下大綱和關鍵字，最後用自己的話總結影片中的內容。

看訪談影片，假裝自己是受訪者回答問題。

推薦影片 :

推薦影集 :

The good place: 演員咬字清晰，對話很實用，非常適合練習口說
F is for the family: 可以學到生活化的用語，~~和不少髒話~~

What Is The Difference Between Session, Cookie, SessionStorage and LocalStorage?

Type	session	cookie	sessionStorage	localStorage
Storage location	Server-side	Client-side	Client-side	Client-side
Maximum data size	1024KB	4K for one cookie, max 20 cookies for a website	5M	5M
Expired Time	If the user doesn’t active for a long time which over expires time, the server-side will delete the session to save the space	* Users can set the expiration time for each cookie. * It will expire after closing the browser if it set on client-side	The data clear automatically when the browser is closed	The data WILL NOT be deleted when the browser is closed until the user clear through JavaScript, browser cache / locally stored data
Scope	No	Changes made are saved and available for all same-origin page	Changes made are saved and available for the current page	Changes made are saved and available for all same-origin page
Security	High	Low	Low	Low
Usability	Easy to use	The API is difficult to use	Has method setItem, getItem, removeItem, clear that easy to use
HTTP Request		The data is sent back to the server for every HTTP request which causes performance problems	The data is NOT sent back to the server for every HTTP request
Application	Login	Login, shopping cart, game scores	Form	Shopping cart

類型	session	cookie	sessionStorage	localStorage
存儲	服務端	瀏覽器端	瀏覽器端	瀏覽器端
存儲容量	默認大小一般是 1024k	單個 cookie 保存資料不能超過4k，且很多瀏覽器限制一個網站最多保存20個 cookie	5M	5M
失效時間	設置一個失效時間，當距離客戶端上一次使用 session 的時間超過這個失效時間時，服務器就可以認為客戶端已經停止了活動，才會把 session 刪除以節省存儲空間	* 一般由伺服器生成，可設置失效時間。 * 如果在瀏覽器端生成Cookie，默認是關閉瀏覽器後失效	當前瀏覽器關閉前有效	始終有效，即使視窗或瀏覽器關閉也一直有效，除非用戶手動刪除，其才會失效
作用域	無	在所有同源視窗是共用的	不在不同的瀏覽器窗口中共用	在所有同源視窗是共用的
安全性	較高	較低	較低	較低
易用性	有很大的隨意性，可隨時呼叫，不需要開發者做精確地處理	原生 API 不如 storage 友好，需要自己封裝函數	Web Storage 擁有 setItem, getItem, removeItem, clear等方法
與伺服器端通信		每次都會攜帶在HTTP頭中，如果使用cookie保存過多資料會帶來性能問題	僅在用戶端（即瀏覽器）中保存，不參與和伺服器的通信
應用場景	將某些資料放入session中，供同一使用者的不同頁面使用	帳號登入、購物車、遊戲分數	表單頁面	購物車

2020/04/09

Suffering From Perpetual Fernweh

Have you ever have a feeling that you wanna go to a place that you can't describe by the words which cause you to feel pain?
Do you have a true desire in the deep bottom of your heart that you wanna go to every unknown place in the world?
Will you see a photo then you feel woe that you haven't gone to that place in person?

Yeah, there are a word to describe this feeling calls "Fernweh" in German, we can translate it roughly as "An ache for distant places", it's an opposite word against to homesick, homesick is a sickness that missing home, but how can I have a feeling missing a place I don't even know?

Judith Thurman has said, "Every dreamer knows that it is entirely possible to be homesick for a place you've never been to, perhaps more homesick than for familiar ground."

This author describes the "Fernweh" properly, and not only she has a feeling like this, but there is also another author said about this feeling.

"If I find in myself desires which nothing in this world can satisfy, the only logical explanation is that I was made for another world."
- C.S. Lewis, Mere Christianity

I feel the pain that I wanna go to the place that I can't describe.
I have a true desire in the deep bottom of my heart that I wanna go to every unknown places in the world.
I feel woe that I see a photo that I haven't gone to that place in person.

I'm suffering from perpetual fernweh.

Mail : yschen25@gmail.com
Facebook: https://www.facebook.com/yschen25/
Twitter : https://twitter.com/yschen25
LinkedIn : https://www.linkedin.com/in/yschen25

2020/02/19

英國打工簽證 YMS - 線上申請和繳交資料，因應疫情如何處理相關事務

在今年 2020 年 1 月抽到英國的打工度假簽 (YMS) 後，
花了大把的時間查詢中籤後需要跑的流程，
僅供大家參考，如果有缺或是錯誤地方歡迎底下留言提醒我。

還在考慮轉職工程師要上哪間學校? 這裡推薦你免費的學習資源、書籍與素材

在考慮轉職前建議你先看看這篇文章 為什麼我說不要轉職成工程師的七大原因

如果你有以下困擾，歡迎參考此篇文章 :

1. 我是初學者，有沒有推薦的學習資源

2. 有沒有推薦的書籍

3. 想去實體店面翻書，有沒有推薦的店家

4. 原文書很貴，想買又不確定適不適合自己

5. 有沒有論壇可以和大家互相交流

6. 我想要問問題，是要直接把程式碼貼上去問嗎

7. 切版很需要素材，有沒有推薦的網站

而網路上已經有很多為什麼要轉職前端工程師、如何轉職成前端工程師的文章，這邊也有一篇 2021 年成為 Web 開發人員的路線圖可以參考來決定方向 (每年會更新可以自己查閱)，這邊就不複述了。

這篇主要是寫給對於前端有興趣的「初學者」、「非本科想轉前端」的人，可以利用哪些網站來幫助自己學習；因為我個人是非本科轉前端，到現在差不多兩年多了，想分享些自己當初到現在用過覺得不錯的學習資源、書籍與素材。