Front-end

[Web] Next.js (React 全端框架) 開發指南

NickBack-end, Front-end, JavaScript, NodeJS, Web Server

Intro Next.js by Vercel – The React Framework Next.js 是一個開源的 React 全端框架，後端基於 Node.js。它支援多種渲染方式 (Rendering)，包括伺服器端渲染 (SSR)、靜態站點生成 (SSG) 以及用於客戶端渲染 (CSR) 的 React 原生渲染模式。 安裝 Next.js Node.js 安裝指南 Next.js 需要依賴 Node.js，以下 Next.js 官網安裝指南會說明欲安裝版本對應的 Node.js 最低需求版本。 How to set up a new Next.js project […]

Read more

[Web] Browser Developer Tools 技巧

NickDEV Tools, Front-end, JavaScript, Network

Intro Web development tools / devtools – Wikipedia 本篇將以 Chrome 瀏覽器為主，介紹 Developer Tools 的實作技巧 Window.open() 新視窗監測 現行要監測某個 button click 會開啟轉導去哪，在前端框架下從 JS code 很難找出目的，若又是 window.open 效果則無法持續透過 developer tool 監測 Network 歷程 比較簡單暴力的做法是在該 web page 的 console 覆寫 window.open() 看要 console.log() 出來還是改成 […]

Read more

[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

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

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

Read more

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

NickJavaScript, PHP

HTML HTML Meta Refresh 效果同於 JS location.replace()，Browser 不會產生新的 history.state: <meta http-equiv="refresh" content="0;url=http://code.yidas.com" /> Example HTML page: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="refresh" content="0;url=http://code.yidas.com" /> <title>Redirection</title> </head> <body></body> </html> Front-End Javascript Replace – 轉導取代 history.state (Moved Permanently) <script>location.replace("http://code.yidas.com");</script> […]

Read more

[NodeJS] Gulp with plugins 前端完整解決方案教學

NickFront-end, NodeJS, Tools

Gulp基本安裝 安裝NodeJS至目前OS上，將使用NodeJS的NPM管理套件(Command Line) 查看版本：node -v , npm -v 先在全域(Global)安裝Gulp： npm install -g gulp Gulp.js on Github 進入到專案資料夾，進行NPM專案初始化： npm init 主要目的是建立package.json，以便繼續安裝Packages。 進入到專案資料夾，進行Package安裝(Dev Mode)： npm install gulp –save-dev 查看版本： gulp –version 建立gulpfile.js於專案資料夾： var gulp = require('gulp'); gulp.task('hello', function(){ console.log('Hello Gulp.js'); }); 使用指令 […]

Read more