Google Apps Script 操作試算表資料庫防駭技巧﹍防止程式碼注入攻擊
過去曾介紹過一系列利用「 Google Apps Script 操作試算表資料庫 」的文章，如果這樣的簡單資料庫只是私用，自然不必考慮安全性。然而如果資料公開的話，防駭反而是第一要務，比學習任何 Google Apps Script(簡稱 GAS) 程式技術都更重要。 本站的「...
繼續閱讀全文嘗試徹底解決 Line、FB 手機 APP 無法正確開啟網頁的困境
前幾年曾寫過「 用 Line、FB 手機 APP 開啟網頁對前端工程師的困擾﹍JS 辨識內建瀏覽器(webView)的方法 」，除了解釋 "什麼是內建瀏覽器"、"為何 APP 要用 webView"、"內建瀏覽器會產生什麼問題&q...
繼續閱讀全文Sublime Text 檢測 JS 最佳工具 ESLint﹍安裝 + 設定技巧
一直以來使用 Sublime Text 3(簡稱 ST3)檢查 Javascript 錯誤的工具是「 JSHint Gutter 」，優點為執行快速、圖形介面操作友善、自訂參數完善，沒想過有可能要放棄他的一天。 基於網路環境所發展的技術實在進展太快，也可說是變化...
繼續閱讀全文使用 JS 追蹤訪客﹍裝置指紋辨識原理 + 實用工具介紹
現在消費者已越來越能接受線上付費觀看影音服務，例如官方提供的職業運動直播(NBA、MLB 等)，以及各種追劇平台(Netflix、Line TV、愛奇藝等)。而消費者總是希望花錢的效益最大化，如果買一個帳號能在三台裝置收看，則可能找三個人合資分攤費用。 站在影音平台的立場，技術...
繼續閱讀全文前端 JS 如何避免 callback 地獄？Fetch API 及 Promie 使用技巧
由於早期 Javascript 設計上的缺陷，一方面使用 Ajax 送出 http 請求時，舊時代的 API 異常繁複，非得使用 JS 框架操作 Ajax 才比較方便，例如 jQuery。 一方面 Ajax 是非同步(Asynchronous)執行緒，會造成前端工作一些麻煩，例...
繼續閱讀全文如何讓新版 Blogger 按 Enter 能建立換行符號
Blogger 推出新版後台介面後，原本我一直是手動切回舊版來操作，以規避新版介面產生的各種問題。但是前幾天官方已消滅了舊版後台，也就是強制一律只能使用新版介面，這下真的沒輒只能硬著頭皮使用。 其實這段期間以來，新版很多問題都已反應給官方，有些是有改進，但官方沒有動作的部分想必...
繼續閱讀全文前端使用 JS 裁切圖片並壓縮再存到後端﹍Croppie 實作範例
最近接到一個需求，希望使用者上傳圖片時，可先在前端進行裁切，以免存到後端的圖片尺寸比例不對，也可避免檔案過大。 之前寫過一篇「 前端如何使用 JS 先壓縮圖片尺寸大小再進行上傳 」，其實也能處理前述大部分需求，但稍有不足之處： 只能對上傳的圖片等比例縮小 不能防止 使用...
繼續閱讀全文Javascript 字串加密解密範例研究
最近需要用 JS 保存一些，不想被很容易就判讀出來的資料，因此研究了一下 JS 如何對字串進行加密及解密。 結果搜尋發現網路上這方面的實用工具不多，原因大致是： JS 是攤在陽光下的語言，加密解密流程會被看到 因此很少純前端進行加密與解密，大多是配合後端進行運算，一邊加...
繼續閱讀全文JavaScript 四合一工具：壓縮+加密+混淆+美化
前一篇介紹了「 Javascript 壓縮、混淆、加密、解密工具及原理 」，也說明了 JS 加密混淆不容易被破解的處理流程，此流程需要開啟三個線上工具的網頁來進行。 重複三次「等待編碼、複製、貼上」的時間不算長，但工程師思維就是會想辦法簡化所有重複流程，我長久以來一直想做個前...
繼續閱讀全文Javascript 壓縮、混淆、加密、解密工具及原理
網頁前端的程式語言 Javascript，由於攤在陽光下誰都看得到，不如後端來得安全。因此除了機密性的程式碼別放前端，最好網頁上的 JS 也需要經過處理，除了降低可讀性，也可避免被盜用。 常見的處理方式有壓縮、加密、混淆等等，如果做得太簡化，使用某些破解工具就能還原。因此本篇...
繼續閱讀全文Javascript 產生偽隨機數字的方法及應用
最近接到一個需求，想在網站顯示虛構的線上人數。一般來說，顯示線上訪客數有很多免費的第三方服務，不過案主會有這樣的需求，代表網頁顯示的數字想要膨風一點。 用 JS 產生隨機數字其實很簡單，但如果隨機產生的線上人數太離譜，一眼就被看穿的話，對網站聲譽其實不太好，所以這功能也不是那...
繼續閱讀全文前端如何使用 JS 先壓縮圖片尺寸大小再進行上傳，有效節省儲存空間﹍實作範例
以前處理過一個客製系統，有多處需要註冊會員上傳圖片： 會員頭像 證件留底 設施環境介紹照片 由於使用者各種年齡層都有，不是每個人都網路世代，懂得先壓縮 JPG 檔再上傳，那麼上傳的圖片檔案可能會超出工程師想像。大部分中高齡使用者可能直接從手機選了圖片就上傳，也不會知道...
繼續閱讀全文如何用 Javascript 複製文字﹍跨瀏覽器相容 iOS
最近接到的需求類似「點擊按鈕後自動複製折價券代碼」這樣的功能，因此研究了一下如何實現前端利用 Javascript 複製文字。 多年前曾在「 如何用語法保護網頁文章著作權 」多篇系列文寫相關功能，但這些年網頁技術進展很快，HTML5 新的 api 讓複製文字變得相當簡單。 ...
繼續閱讀全文手機分享到 Line 的連結，如何強制用預設(外部)瀏覽器開啟？
在這篇「 分享到 Line 會遇到的問題整理 」有讀者留言詢問： 請問貼到LINE裡的超連結，能設定呼叫預設瀏覽器APP來開啟嗎? 這個現象來自於 Line 某次改版後，只要用手機點擊連結，一律會在 Line 內部開啟，不會另外呼叫手機瀏覽器，例如 Chrome、Safar...
繼續閱讀全文使用跨域代理伺服器(CORS PROXY)，解決讀取第三方網站資料問題﹍實作範例
前端開發人員寫 JS 遇到需要串接第三方 API，或是想存取第三方網站的資料時，遲早會遇到跨域限制的問題。 跨域(Cross-Origin Resource Sharing)的原理可參考這篇「 跨來源資源共用 」，因為安全性考量，網站主幾可設定收到 HTTP 請求時，是否允許...
繼續閱讀全文解決 Chrome 下 Javascript 中文排序問題
最近客戶反應，網頁上的中文排列順序，變得跟以前不太一樣，例如： 原本會按 "上午"、"下午"、"晚上" 排序，現在變成 "上午"、"晚上"、"下午" 原本...
繼續閱讀全文偵測網頁 DOM 新增節點(元素)最方便的方法﹍利用 CSS 動畫技巧
最近這個案例比較特殊，幫客戶改付費範本次數一多，某些比較貴的範本，作者為了不想讓別人看懂程式碼，雖然 JS 沒有使用混淆 (obfuscate)，但是壓縮、重組得不成人形，導致完全無法去閱讀解析這些 JS 程式碼。很多動態生成的區塊，最終只能等 DOM 完整成形後，再來寫 JS ...
繼續閱讀全文防止網頁圖片被下載的密技
最近接到一個需求，由於案主網站的圖文常被中國網站、或農場網站盜取，所以希望能夠讓網頁上的圖片，不要那麼容易被下載。 當然我也跟案主說了，任何方法都不可能阻止圖片被取得，最簡單的按一下 Print Screen 鍵就拿走了，所以不如做好浮水印比較實在。 不過案主的出發點是，...
繼續閱讀全文用 Line、FB 手機 APP 開啟網頁對前端工程師的困擾﹍JS 辨識內建瀏覽器(webView)的方法
前陣子的一個專案，客戶反應很多使用者用手機操作時，網頁會有錯誤導致無法註冊。但我手機實測的結果又沒有發生任何問題，於是請客戶提供使用者的操作環境，例如 Android 或 iOS 系統，瀏覽器版本等等。 結果都不是這些原因，最後才發現是因為使用者在 Line 上面開啟網站連結...
繼續閱讀全文Iframe 跨域傳值在 iOS 失效的解法﹍利用網址 + localStorage + cookie 並用
上一篇「 利用隱藏的 Iframe 跨域傳送訊息實作 」，很可惜在前端開發人員的大魔王(iOS)面前又失效了，在 iPhone 鬼打牆了很久才瞭解： iOS 禁止 localStorage 跨域傳值 iOS 的 Safari 設定中，預設關閉 cookie iOS 的 C...
繼續閱讀全文