灰色後門

去年 2018 過年想有些新意 所以跟家人安排了一趟北海道過年自助旅行 雖然前年也有過跟家人一起到北海道自助旅行 不過跟夏季的經驗是截然不同的，相同點只有都是美好的經驗 對台灣日常生活難得體驗雪國日常的我們，也有了很多不同的準備跟體會

相信很多 Web 開發人員在 local 的開發環境用的設定跟產品一樣是 HTTPS 不過畢竟 production 用的 TLS  certificate 不是簽給 localhost 用的 所以若沒調整則在瀏覽器會看到 Your connection is not private 的訊息 Chrome 的網址列也會顯示連線不安全 這個當然不是什麼問題，點個忽略警告大家還是可以照常開發 不過開發人員也可以選擇在 local 產生一張簽給 localhost 的 self-signed certificate 調整過後可以從此不需要再去點忽視警告 然後開發時看到的瀏覽器網址列的提示也會是安全連線，視覺爽度加分 這篇說明怎麼在 Windows 環境生效，以下開始步驟

現在 HTTPS 已經是網站的標準要求了 如果不想花錢買付費憑證，那麼免費的 Let's Encrypt 是個很好的選擇 以下紀錄如何在 Linux 完成憑證申請，並且套用自動更新

這是偶然間看到的一篇文章 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 是最近發現好用的功能之一 官方說明 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 替代原始內容 如此就能用來驗證錯誤的原因跟找出合適的處理方法了