如果沒有接觸過 commonJs 這類可以將 js 模組化為檔案的開發者，剛開始寫 Nodejs 時可能會有點不懂 module.exports 與 exports 的差別 舉例來說： 有一個 player.js 這樣就產生了一個 player.js 這個模組 如果今天 main.js 想要使用這個模組，就可以透過 require 來引入模組 如： 再來我們看看使用 exports 新增一個 removePlayer 的方法 原因是在模組裡面其實會預先幫你做 預設當我們使用 exports 其實也代表更改了 module.exports 。 但當直接使用 module.exports = {…} 其實也就更改了模組對外公開的物件，因此更改 exports 時無法更改到 module.exports。 參考資料： https://program365.wordpress.com/2015/07/02/understanding-module-exports-and-exports-in-node-js/
[test] Nightwatch.js debug 血淚史
前情提要: 本篇使用 [email protected] ((3.5.0以上會有不同的問題… 使用 Nightwatch.js 寫前端的 E2E test一段時間了…踩了不少雷 Nightwatch 底下還是使用 selenium 與 支援各瀏覽器的 webdriver ，其實大多狀況都是發生在各 web driver 跟 selenium….啊(嘆~ 來記錄一下使用 Nightwatch.js 遇到的幾個問題~ selenium： Error retrieving a new session from the selenium server Connection refused! Is selenium server started? …. 最常出現以上這個訊息，可以先試著單獨開啟 selenium 在預設 port 4444，透過瀏覽器手動創建 session 確認 selenium 有正常運作。 java -jar selenium-server-standalone-{VERSION}.jar 另外，如果要透過 nightwatch.js 自動開啟 selenium，記得要將 nightwatch.json 設定檔中的 selectium start_process 設為 […]
[javascript] 清空 array 的方法介紹與比較(new、pop 及 shift…等)
紀錄一下幾個 javascript 清空陣列的方法比較。 指派一個新的空陣列 reference arr = []; ps. 如果有其他變數仍然指到原本的陣列，會造成占較多 memory，以至於效能不佳。 長度設為 0 arr.length = 0; splice 移除 arr.splice(0, arr.length); 迴圈 pop 清空 迴圈 shift 清空 來看看上面這幾個清空陣列的 jsperf 效能比較：https://jsperf.com/array-destroy/40 在多數瀏覽器，pop 和 shift 的方法最有效率，但在 firefox new 的方法效率遠大於其他方法。 參考資料： http://www.jstips.co/en/javascript/two-ways-to-empty-an-array/
[javascript] throttle 與 debounce，處理頻繁的 callback 執行頻率
在 javascript 的程式碼執行，採的是非同步的 callback 函式。 因此時常會是一個 event 觸發 callback 執行，但有時可能會頻繁的觸發事件(比如說瀏覽器的 resize 或 scroll 等等事件) 這時候如果每次觸發都執行 callback 可能不是這麼必要，甚至導致程式碼執行效率不佳 我們就可以透過 underscore.js throttle 或 debounce 的方法去優化這些 callback 的執行時間點。 debounce： 把短間隔時間(自行設定微秒)內重複觸發的事件合併為一個(自行設定觸發時間點)，只呼叫一次 callback。 像是當瀏覽器 resize 時，會頻繁觸發 resize 事件，使用 debounce 就可以達到視窗最後改變時再觸發 callback。 下面例子，試著把滑鼠頻繁的在 Trigger area 中移動，可以看到 debounce 函數的實際效果。 See the Pen Debounce. Trailing by Corbacho (@dcorb) on CodePen. 上面這個例子，可以看到當你在 Trigger area 頻繁移動滑鼠(400微秒內)時，僅會觸發一次的 […]
[webpack] webpack HMR(Hot Hodule Replacement) 應用於 django 搭配 react-hot-loader
前陣子剛換工作時，剛好部門內使用的後端為 django，前端為 react，然後使用 webpack 做編譯、打包及壓縮等佈署的動作。 但在開發前端 react 時必須要重複以下流程，更改程式碼 => 儲存 => 重新整理 想說既然有用 webpack ，就試著利用 webpack 所提供的 HMR(Hot Module Replacement) 來做 hot reload，開發會更快一點。 以下是當初設定的步驟~ dajngo 設定部分： 安裝 django-webpack-loader pip install django-webpack-loader 設定 settings.py 讓 django 預設會抓取 assets/bundles 與 asset/static 這裡個位置的靜態檔案， webpack BUNDLE_DIR_NAME 設為 ”，讓 webpack-loader 也至以上兩個路徑抓取靜態檔。 在 django 使用的 tempalte 中引用 wepack-loader module 上面這段( render_bundle […]
[test] 單元測試的好幫手 rewire，讓你更容易測試 private 方法及變數
前一陣子在寫單元測試(unit test)時，遇到一些問題，經過同事的提點，看到了 rewire 這個 github repo 當在寫測試時，我們可能會分許多檔案去管理我們的模組，然而模組內可能有一些 private 的方法，這時候如果想測試模組內的 private 方法該如何測試呢? 以往可能的作法： 設定環境變數(例如：test: true)，在測試環境時才 export prviate 方法。 但 rewire 這個 npm package 提供一層更方便測試 private 的方法。 接下來看看實際用法吧~ 比如我們有 test.js index.js 則會 require(‘test.js’); 這個模組 當我們要寫 unit test 時會發現 test.js 的 add() 因為沒有 export 所以無法被測試，或是當在測試 test 模組時，也沒辦法把 add 做 stub(因為 js 在 function 會是 call by value) 這時候我們可以使用 rewire […]
[mysql] start: Job failed to start invoke-rc.d: initscript mysql, action “start” failed. ，完整移除並重新安裝
剛好同事遇到 mysql 無法正常開啟，但重裝(sudo apt-get install mysql-server-5.6)時卻一直顯示 start: Job failed to start invoke-rc.d: initscript mysql, action “start” failed. dpkg: error processing mysql-server-5.5 (–configure): subprocess installed post-installation script returned error exit status 1 或是 Unable to set password for the mysql “root” user….. 嘗試執行 mysql 也會寫著服務的 socket 未開啟 ERROR 2002 (HY000): Can’t connect to local MySQL server […]
[security] X-XSS-Protection
X-XSS-Protection 是一個在早期瀏覽器並不支援 CSP 時，IE 所開發出預防 XSS 攻擊的 header，後來 chrome 與 sarfari 等瀏覽器也開始支援。(不過目前瀏覽器幾乎都支援 CSP 1.0 了，根本上還是設定 CSP (Content-Seciruty-Policy) 較安全。 畢竟這個 header 偵測 XSS 攻擊有一套過濾的方法 (IE 預設開啟)，僅有限程度的防範，並不完全可以防止 XSS。 目前支援度為下圖，有部分瀏覽器(如：firefox)並不支援。 這邊簡單介紹用法，通常我們會在支援早期(如：ie8)瀏覽器時設置，其餘則設定 CSP 會更有效的防止 XSS 開啟 XSS filter 過濾，當偵測到 XSS ，阻擋頁面載入。 <?php header(“X-XSS-Protection: 1; mode=block”); ?> 開啟 XSS filter 過濾，當偵測到 XSS ，過濾此資源載入。 <?php header(“X-XSS-Protection: 1;”); ?> 關閉 XSS filter 過濾 […]
[security] CSP level2 對於 inline 程式碼的 hash 與 nonce 處理方法
之前介紹過 CSP 1.0 時，有提到目前部分瀏覽器有支援 CSP 2.0 支援度如下圖： 在 CSP level2 新增了部分的 directives 及屬性(如 web worker 針對 外部資源載入的 child-src) ，更多關於 CSP level2 的詳細內容． 這篇僅介紹 CSP level2 針對 inline 程式碼所規範的 hash 與 nonce，讓 inline 程式碼能較安全且彈性的執行． 我們先來看一個普通的 CSP demo 頁面 header(“Content-Security-Policy: script-src *;”); print “<h1>CSP demo</h1> <script src=’https://code.jquery.com/jquery-3.2.1.slim.min.js’></script> <script> var my_script = document.createElement(‘script’); my_script.setAttribute(‘src’,’https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js’); document.head.appendChild(my_script); </script>”; 實際執行的畫面： 可以看到設置了 CSP script-src * ，預設還是會擋掉 inline script ，在錯誤的訊息中，透露出可以設定 unsafe-inline, hash 及 nonce 來解決這個問題． […]
[security] Content-Security-Policy 增加網頁安全的 http header，防禦 XSS 跨站攻擊 script
Content-Security-Policy 為瀏覽器目前所實作的一個標準， 主要是用在防禦 XSS 攻擊的標準．((當然不可能完全防禦… 簡單解釋：利用 http header 去定義在 html 限制載入的跨站 script （例如 img-src, script-src…等可以載入外部資源的標籤)． Content-Security-Policy 普及的標準為 1.0 版本 Content-Security-Policy level2 (增加了進階的 inline script 執行限制，child-src…等等，請參考MDN介紹) Content-Security-Policy level3: 撰寫本文時還在草案中… 以下將 Content-Security-Policy 簡稱 CSP 接下來簡單介紹 CSP 1.0 的幾個常見用法 比如我們可以新增一個 test.php 檔案加上標頭(這邊是為了 demo 方便，通常是會設在 webserver 上) header(“Content-Security-Policy: default-src ‘self'”); print “<h1>CSP demo</h1> <script src=’https://code.jquery.com/jquery-3.2.1.slim.min.js’></script> <iframe src=’https://www.w3schools.com’></iframe> <img src=’https://www.w3schools.com/tags/smiley.gif’> <script>alert(‘test’);</script>”; 試著執行看看： 打開 F12 […]