jQuery

[Web] 資料過濾與驗證指南 – Data Validation & Filter (XSS, nl2br)

NickDatabase, JavaScript, jQuery, MySQL, PHP

Intro 防範XSS、SQL Injection以及驗證資料已經是基本開發流程，但要如何標準化的去做團隊開發就是一門學問。 資料驗證 顧名思義，就是在寫入Datebase之前處理Input資料驗證。 以MVC架構來說，Validator最佳的實踐流程點是在Model/Entity上，也就是Model已定義好驗證規則，所以所有經過此Model寫入的資料都會是經過經過規則驗證通過的，提供絕佳的共用性與嚴謹度。 Yii 2 – Validating Input (Yii 2 透過Model定義Validator實踐開發) CodeIgniter/Model – Validation (CI擴充框架中，一樣透過Model定義整合Validator實踐開發) Filter前處理or後處理 以XSS來說，到底要前處理還是後處理? 兩個都沒錯，這全看你後端/資料庫那個欄位到底是定義成Plain Text還是HTML Content。 平均開發上，只要一開始寫資料庫沒特別定義，不外乎都是Plain Text，意即做後處理比較直覺(畢竟過往資料都寫進去了)。 後處理缺點 每次在前端(HTML)顯示時都須謹記後處理，漏一個沒處理就中了廣義XSS 前處理缺點 因為資料預設就是HTML，所以應付前端不須處理；相反的在需要Plain Text(例如Excel Plain Text)時就需要在後處理反轉回來 無法保障資料驗證，因為輸入過濾將影響驗證一致性，例如最大字數通過過濾的不確定性造成不精準 遇到textarea給值時需要Decode回來 (歸類input，正規給值方式value或jQuery val()，用html不標準) 綜合以上，優缺點是一體兩面的，取決於需求。 例如80/20法則，前端顯示開發較多、Plain Text顯示開發較少，那選前處理絕對較省成本，且較嚴謹(畢竟反轉與否不影響安全性)，所以依照專案與團隊自行評估即可。 我個人對於Pattern來說會選擇後處理為主，因為儲存資料定義為原始輸入資料(Plain […]

Read more

[JS][jQuery] Events Hooking – 元件觸發事件開發

NickJavaScript, jQuery

Intro JS基本的Callback這篇就不多談，現在主要是開發JS元件的Events Pattern。 例如Bootstrap Modal Events Pattern 以jQuery實作，自定義Event Namespace 利用jQuery Event及jQuery Trigger <a>Ancher</a> <!– jQuery required –> <script> $(“a”).click(function(){ alert(‘Click’); var e = $.Event(“namespace”); $(this).trigger(e); // Or directly `$(this).trigger(“namespace”);` }); $(“body”).on(“namespace”, function(){ alert(‘A’) }) $(“body”).on(“namespace”, function(){ alert(‘B’) }) $(“a”).on(“namespace”, function(){ […]

Read more

[jQuery] AJAX跨網域 | AJAX Cross Domain Request withCredentials (Access-Control-Allow-Origin)

NickJavaScript, jQuery, PHP

做個AJAX跨網域可是容易忘記細節的，這就來篇Note， 後端部分，Server Header請開啟(以PHP動態Header為例)： header(“Access-Control-Allow-Origin: *”); header(“Access-Control-Allow-Credentials: true”); Cookie夾帶 如需夾帶Cookie則前端的AJAX需開啟Credentials，JQuery為例： $.ajax({ xhrFields: { withCredentials: true }, type: “GET”, url: “http://www.example.org/ajax.php” }).done(function (data) { console.log(data); }); xhrFields中withCredentials要開啟，這就是亮點！

Read more

[JS][jQuery] AJAX Cross Domain Request – CORS | AJAX跨網域應用

NickJavaScript, jQuery

Intro 跨來源資源共享（英語：Cross-origin resource sharing，縮寫：CORS），用於讓網頁的受限資源能夠被其他域名的頁面存取的一種機制。 跨來源資源共享標準描述了，新的HTTP頭部在瀏覽器有權限的時候，應該以如何的形式傳送請求到遠端URLs。雖然伺服器會有一些校驗和認證，但是瀏覽器有責任去支援這些頭部以及增加相關的限制。 實作 做個AJAX跨網域可是容易忘記細節的，這就來篇Note， 後端部分，Server Header請開啟(以PHP動態Header為例)： header("Access-Control-Allow-Origin: *"); header("Access-Control-Allow-Credentials: true"); 若要包含跨域請求的認證資訊 (如 cookies)，則前端 Ajax call 得設定 withCredentials 屬性，JQuery為例： $.ajax({ xhrFields: { withCredentials: true }, type: "GET", url: "http://www.example.org/ajax.php" }).done(function (data) { console.log(data); }); References jQuery.ajax() | jQuery […]

Read more