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

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

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

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(){ […]

[Network] Coin-Hive (coinhive.com) Block – 惡意廣告挖礦防範

Coin-Hive猖狂了Javascript惡意挖礦市場,實在令人看不下去。 想要體驗測試被挖礦的話,可以到這篇網頁:http://blog.xuite.net/jason_kuso/kuso/556581915 進入後即可查看CPU使用量;最後測試日期:2018-02-13 Hosts解法 C:\Windows\System32\drivers\etc: 127.0.0.1 coinhive.com 瀏覽器擴充套件解法 畢竟Coinhive只是其中一間做這種的,要防範多種還是得靠社群的力量: uBlock Origin AdBlocker Ultimate

[JavaScript] 類別物件寫法 (建構&靜態物件) – Class Object Coding Style (constructor & static class)

情境 JavaScript如何達到靜態類別設計? https://github.com/yidas/js-design-patterns/blob/master/class/ Constructor Class var Class = function (options) { this.render = function () {} }; var object1 = new Class(); object1.render(); Literals Object JavaScript靜態物件的第一個想法, var Class = { render : function () {} }; Class.render(); 架構不錯,缺點為在物件內無法宣告區域變數(亦即達不到private變數或方法)。 若在物件方法中再次用到function,且須使用this指到物件本身就會有瓶頸,得每次帶入物件‵this‵本身,而無法從物件那層定義個物件區域變數代表this。 Static […]

[Javascript] HTML to CSV – Charset UTF-8 BOM – 完美匯出CSV

使用情境 Javascript在匯出EXCEL有ASCII Code瓶頸不能完美支援,所以匯出CSV是較佳的選擇。 CSV匯出的亮點會在於Charset,例如支援中文而使用BOM。 技術亮點 var csvContent = “欄位A,欄位B\n值A,值B”; var link = window.document.createElement(“a”); link.setAttribute(“href”, “data:text/csv;charset=utf-8,%EF%BB%BF” + encodeURI(csvContent)); link.setAttribute(“download”, “upload_data.csv”); link.click(); 其中Link格式,使用UTF-8 with BOM: “data:text/csv;charset=utf-8,%EF%BB%BF” + encodeURI(csvContent) JSFiddle

[Javascript] HTML固定頭部擋到表單錨點 – HTML5 input required is blocked by Fixed Header/Navbar

問題情境 在做 HTML5 input required 送出檢查時,網頁錨點捲動是以物件做TOP定位點,可能會被 Fixed Header/Navbar 擋到。 解決方法 使用scrollIntoView override方法: var elements = document.querySelectorAll(‘input,select,textarea’); for (var i = elements.length; i–;) { elements[i].addEventListener(‘invalid’, function () { this.scrollIntoView(false); }); } jsfiddle

[CSS] RWD文繞圖方法 – Response Image Float

使用情境 多行文字中,圖片align或float置左或右的文繞圖方是很常見,進入RWD模式後小寬度時照樣文繞圖並不妥。 解決方法 用CSS的media來生效或取消圖片float吧: /* Response Image Float */ @media only screen and (max-width : 599px) { .img-float-left, .img-float-right { float: none; } } @media only screen and (min-width : 600px) { .img-float-left { float: left; } .img-float-right { float: […]