跳到主要內容

發表文章

北海道北國冬季旅行準備經驗談

去年 2018 過年想有些新意
所以跟家人安排了一趟北海道過年自助旅行
雖然前年也有過跟家人一起到北海道自助旅行
不過跟夏季的經驗是截然不同的,相同點只有都是美好的經驗

對台灣日常生活難得體驗雪國日常的我們,也有了很多不同的準備跟體會

讓 Windows 環境的 localhost 啟用 HTTPS 連線

相信很多 Web 開發人員在 local 的開發環境用的設定跟產品一樣是 HTTPS
不過畢竟 production 用的 TLS  certificate 不是簽給 localhost 用的
所以若沒調整則在瀏覽器會看到 Your connection is not private 的訊息
Chrome 的網址列也會顯示連線不安全
這個當然不是什麼問題,點個忽略警告大家還是可以照常開發

不過開發人員也可以選擇在 local 產生一張簽給 localhost 的 self-signed certificate
調整過後可以從此不需要再去點忽視警告
然後開發時看到的瀏覽器網址列的提示也會是安全連線,視覺爽度加分
這篇說明怎麼在 Windows 環境生效,以下開始步驟

網頁連結的 target = _blank 的隱藏風險

這是偶然間看到的一篇文章
The Hidden Dangers You Have Never Noticed: target = "_blank" and "opener"
並進而找到討論這篇文章的 reddit 討論串

我一開始以為是英文閱讀,所以讓我沒有完全了解原文的感覺
不過看了 reddit 串也是很多人覺得作者的表達能力不好 XD
所以我覺得直接看 reddit 串中的其他人的討論跟摘要會更直接
簡單來說,可能導致的風險是讓使用者導入到偽造的釣魚網站

因為瀏覽器的跨網域保護政策
所以連結網頁中的 window.opener 只有受限的操作權力
目前的主流瀏覽器已經在這方面提供夠好的保護力
只不過在這有限的操作範圍中, opener 可以調用 location object 並操作
惡意的連結網頁藉此把原網頁跳轉到相似度極高的惡意釣魚網站
使用者關掉連結網頁後,很有可能沒注意到他回頭看的已經不是原本網頁而受害

所以如果開發者允許用戶用 target = _blank  的方式到外部連結
最好得加上防範措施免得夜長夢多
原文跟 reddit 串有不少考量的理由的說明,以下直接講建議方式

<a href="https://an.evil.site" target="_blank" rel="noopener noreferrer nofollow">...

如果要用 JavaScript 開啟的話則是
var newTab = window.open();
newTab.opener = null;
newTab.location = url;

Chrome Dev Tool 的好用功能 - overrides

Chrome Dev tool 隨著開發演進也增加了很多方便的功能
overrides 是最近發現好用的功能之一
官方說明 https://developers.google.com/web/updates/2018/01/devtools#overrides

有時候會一些網頁錯誤的原因可能是網路因素
如果這錯誤是網頁一載進來就會發生
而且又不好在 local 重現,那麼在過去還真是不好處理

過去的常見做法可能是我們撰寫用 setTimeout 模擬延遲的程式
只是缺點是:
1. 用猜測的參數撰寫的模擬並不能完全表示出實際狀況,所以不一定能解決實際問題
2. 撰寫模擬的 code 有可能會很多且複雜

Chrome 在 65 版後加入這個功能
讓我們可以在實際的線上環境中套用自己的修改測試問題
直接面對實際狀況比過去的方式好用多了
啟用步驟可以直接看Google文章的說明
在 Google dev tool 的 source 頁籤裡的子頁籤的 Page / FileSystem 那邊多了一個子頁籤 overrides
選擇並給予 Chrome 權限能存取並建立修改紀錄在指定的 local 檔案
記得把 Enable Local Overrides 打勾後就能正式啟用
source 裡能修改,完成後按 ctrl + s 儲存變更
之後即使頁面重新整理,Chrome也會使用編輯後的 code 替代原始內容
如此就能用來驗證錯誤的原因跟找出合適的處理方法了

JavaScript 監聽物件屬性變更

當程式越來越長,而且又是多人開發的狀況下
一定有時候是開發者會想著 "WTF,為什麼屬性XX被改成XXX"
特別是 JavaScript 因為設計因素,本身就很容易寫髒
監聽物件屬性變化還是有時候能幫助我們找出問題的好方法