JavaScript – YIDAS Code

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

2018-12-132018-12-21 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 […]

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

2018-08-302019-01-11 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(){ […]

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

2018-02-13 NickJavaScript, Network

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

[PHP][HTML][JS] 網頁自動轉址/導向頁面範例 301 & 302

2018-01-162018-01-16 NickJavaScript, PHP

HTML <meta http-equiv=”refresh” content=”0;url=http://code.yidas.com” /> Javascript <script>location.href=”http://code.yidas.com”;</script> PHP 302 暫時轉址 header(‘Location: http://code.yidas.com’); 預設就是302 301 永久轉址 header(“HTTP/1.1 301 Moved Permanently”); header(“Location: http://code.yidas.com”); 301轉址只能為Web Server端註記

[JS] HTML5 Geolocation – 取得地理位置定位資訊 (GEO)

2017-07-192017-08-01 NickJavaScript

以下範例Code： if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(res){ console.log(res.coords); }, function(error){ console.log(error); }); } else { console.log(“Geolocation is not supported by this browser.”); }

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

2017-05-252017-09-28 NickJavaScript

情境 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

2017-05-042017-05-04 NickJavaScript

使用情境 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

2017-02-122017-02-12 NickJavaScript

問題情境在做 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

[JavaScript][GA] Google analytics – 兩組帳號、多帳號並存一網站 (通用分析)

2017-02-052017-02-05 NickJavaScript

看以下Code即可： <script> (function(i,s,o,g,r,a,m){i[‘GoogleAnalyticsObject’]=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,’script’,’//www.google-analytics.com/analytics.js’,’ga’); ga(‘create’, ‘UA-12345678-1’, ‘auto’); //建立第一個帳號 ga(‘create’, ‘UA-87654321-2’, ‘auto’, ‘secondGA’}); //建立第二個帳號 ga(‘require’, ‘displayfeatures’); //啟用客層和興趣報表 ga(‘send’, ‘pageview’); //送出第一個帳號PV ga(‘secondGA.send’,’pageview’); //送出第二個帳號PV </script> Refer:https://developers.google.com/analytics/devguides/collection/analyticsjs/creating-trackers

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

2016-12-192016-12-19 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要開啟，這就是亮點！