[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 […]

Continue reading


[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 […]

Continue reading


[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 […]

Continue reading


[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 過濾 […]

Continue reading


[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 來解決這個問題. […]

Continue reading


[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 […]

Continue reading


[mac] 更改 apache root 資料夾位置,userdir 設置

之前寫了一篇如何在 mac 安裝 phpmyadmin, php 及 mysql 應該許多人使用預設的 apache 的根目錄( /Library/WebServer/Documents/) 會想要更改為自訂的路徑或是使用者資料夾. 更改 apache 根目錄路徑: vim /etc/apache2/httpd.conf 將以下內容更改為自訂的資料夾路徑,如: DocumentRoot “/Users/Camel/www” <Directory “/Users/Camel/www”> apachectl -k restart 這樣就可以更改 apache 的根目錄資料夾至 [camel] 使用者家目錄下的 www 資料夾. 如果你想幫每個使用者都設置一個 apache 根目錄資料夾,可以開啟 apache 的 userdir 模組 如下步驟:  vim /etc/apache2/httpd.conf 將以下這兩行開頭的 # 刪除 LoadModule userdir_module libexec/apache2/mod_userdir.so Include /private/etc/apache2/extra/httpd-userdir.conf vim /etc/apache2/httpd-userdir.conf 將以下這行開頭的 # 刪除 Include /private/etc/apache2/users/*.conf 檢查 […]

Continue reading


[mac] 安裝 mysql, php, phpmyadmin

前一陣子剛入門使用了 mac,也花點時間學了一些 mac 的快捷鍵就是 ….. 藉此機會紀錄一下在 mac 安裝 mysql, php及 phpmyadmin 我剛拿到的 macOS 版本是 10.12.3,可能有些東西比舊版預裝好了. 以下都會使用 brew 套件管理工具來安裝,我拿到這台電腦時已經預裝好 brew 了 還沒裝的可以參考官網說明安裝 首先先把 brew 的套件清單及套件更新: brew update brew upgrade 安裝及啟動 mysql: brew install mysql mysql.server start ps. mysql 的相關設定檔會在 /usr/local/opt/mysql/ mac 本身已經安裝了 apache 及 php,但 php 模組預設不開啟 開啟 apache 伺服器: apachectl start 這時候可以先試著連線 http://localhost/ 將 php […]

Continue reading


[Javscript] insertAdjacentHTML、insertAdjacentText,vanilla.js 就支援的插入 HTML 及文字

最近才知道 HTML 元素有 insertAdjacentHTML  insertAdjacentText這兩個方法,讓插入 HTML 或文字位置時可以比較有彈性。(類似 jQuery prepend 或 append 等等) 以下就來介紹他的用法吧~ insertAdjacentHTML(position, text) 及 insertAdjacentText(position, text) position: beforebegin: 插入在元素標籤前(外層) afterbegin: 插入在元素標籤內的開頭 beforeend: 插入在元素標籤內的結尾 afterend: 插入在元素標籤後(外層) text: 期望插入的 HTML 字串或純文字。 ps. insertAdjacentText 與 insertAdjacentHTML 差別就在 insertAdjacentHTML 僅允許插入純文字。 直接來看看程式碼或許會更理解囉~ 參考資料: https://developer.mozilla.org/zh-TW/docs/Web/API/Element/insertAdjacentHTML https://developer.mozilla.org/zh-TW/docs/Web/API/Element/insertAdjacentText

Continue reading