Google Apps Script 操作試算表資料庫防駭技巧﹍防止程式碼注入攻擊
![Google Apps Script 操作試算表資料庫防駭技巧﹍防止程式碼注入攻擊](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM0NRRB8kGEiKE1QIz0wGVmJAvyMhal98XiflzDGOKW3fxqNxHT5LR6XPdjWHW_B7Ibun0xOUz4Trj7Sqxl0C3eeUcy6wxekzEdeJxTq9-3yEhhJAV7vlKJL8_qXdCeG9ygvmxIgtKB1Ew/s0/google-apps-script-sheet-js-injection-protection.jpg)
過去曾介紹過一系列利用「 Google Apps Script 操作試算表資料庫 」的文章,如果這樣的簡單資料庫只是私用,自然不必考慮安全性。然而如果資料公開的話,防駭反而是第一要務,比學習任何 Google Apps Script(簡稱 GAS) 程式技術都更重要。 本站的「...
繼續閱讀全文嘗試徹底解決 Line、FB 手機 APP 無法正確開啟網頁的困境
![嘗試徹底解決 Line、FB 手機 APP 無法正確開啟網頁的困境](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_0EcQfwV5C4WeTd6fwx64xojlub_8Yx0VP-PQoI0Lb04ArZNEjhBTNy_4XfS-u66J9u1oXUS62dOGygItUQIXa8NrG_3jDOsfGSOvKAhAERh2hgCLeVhTCFZtCj903FFOTT891pmdU4xB/s0/fb-line-app-webview-mobile-js-solution.jpg)
前幾年曾寫過「 用 Line、FB 手機 APP 開啟網頁對前端工程師的困擾﹍JS 辨識內建瀏覽器(webView)的方法 」,除了解釋 "什麼是內建瀏覽器"、"為何 APP 要用 webView"、"內建瀏覽器會產生什麼問題&q...
繼續閱讀全文Sublime Text 檢測 JS 最佳工具 ESLint﹍安裝 + 設定技巧
![Sublime Text 檢測 JS 最佳工具 ESLint﹍安裝 + 設定技巧](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTFSKWQStGYJkflClGEPiMDI8t9nimHhWvQjLLZemo3XIt3LDp32STReCl5eNywOzuCoz8dCcagccwYt-GQBX_OkamQmXsjkXhj1Vb3efQmtLhi2FZZfw9X24ojFCdhqCK0NeulKGuNIuW/s0/sublime-text-js-syntax-linter-eslint.jpg)
一直以來使用 Sublime Text 3(簡稱 ST3)檢查 Javascript 錯誤的工具是「 JSHint Gutter 」,優點為執行快速、圖形介面操作友善、自訂參數完善,沒想過有可能要放棄他的一天。 基於網路環境所發展的技術實在進展太快,也可說是變化...
繼續閱讀全文使用 JS 追蹤訪客﹍裝置指紋辨識原理 + 實用工具介紹
![使用 JS 追蹤訪客﹍裝置指紋辨識原理 + 實用工具介紹](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc811peVAYdrrUfb5AngoNTCz2T7kVapMtCk5T5MTkz17RIOac3oQFdPuTppn4r8P_U0W30JAhLBhPfytNMDFlPwF0Ohn79oUL6sY45O17A6OC17OGty3k4QT5SkP9tZf7Eh1KH9EjPgdi/s0/js-track-user-device-fingerprint.jpg)
現在消費者已越來越能接受線上付費觀看影音服務,例如官方提供的職業運動直播(NBA、MLB 等),以及各種追劇平台(Netflix、Line TV、愛奇藝等)。而消費者總是希望花錢的效益最大化,如果買一個帳號能在三台裝置收看,則可能找三個人合資分攤費用。 站在影音平台的立場,技術...
繼續閱讀全文前端 JS 如何避免 callback 地獄?Fetch API 及 Promie 使用技巧
![前端 JS 如何避免 callback 地獄?Fetch API 及 Promie 使用技巧](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzPfwj8_c13r27BL3aeNA0NYZ3PDvBJ1ItHQV85imFkCND8AyprFlBRGvyedAVjlDQ6qz3fgW16HxnOelR2ehgTYDPhBDKmnfW-4wIsIU8YFAfzImVB25zN9h1-KQG0dFffBxOn_qAH9KZ/s0/js-asynchronous-callback-hell-fetch-promise-api.jpg)
由於早期 Javascript 設計上的缺陷,一方面使用 Ajax 送出 http 請求時,舊時代的 API 異常繁複,非得使用 JS 框架操作 Ajax 才比較方便,例如 jQuery。 一方面 Ajax 是非同步(Asynchronous)執行緒,會造成前端工作一些麻煩,例...
繼續閱讀全文如何讓新版 Blogger 按 Enter 能建立換行符號
![如何讓新版 Blogger 按 Enter 能建立換行符號](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRzC14nKdFYOjuSijiXGMlQSO06c0VMA68jzQbeOphkBs3qRpajNsIQvfLNWgSAQCglZCEpf7o8tcgPq0rRAiPU60t36YK2twLsrWbk1C3ULwoi0aecyoMCXZscR0GKvQzy1mSfHfeLoo9/s0/blogger-enter-break-line-skill.jpg)
Blogger 推出新版後台介面後,原本我一直是手動切回舊版來操作,以規避新版介面產生的各種問題。但是前幾天官方已消滅了舊版後台,也就是強制一律只能使用新版介面,這下真的沒輒只能硬著頭皮使用。 其實這段期間以來,新版很多問題都已反應給官方,有些是有改進,但官方沒有動作的部分想必...
繼續閱讀全文前端使用 JS 裁切圖片並壓縮再存到後端﹍Croppie 實作範例
![前端使用 JS 裁切圖片並壓縮再存到後端﹍Croppie 實作範例](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX-TQYNVTF7-ThBCx8IeZlFCaO13UW1boHZm_fsDxygiEaulpAJ-0F-fcyG5-h2hdeSuY7OmpkSKpx6_k_3CzfBlnGEvWfj3S9fqx71iJ9G1D5__rWiLJ1gSCZ7VpdRm3rVszmeRtErn_q/s1600/jquery-croppie-image-cropper.jpg)
最近接到一個需求,希望使用者上傳圖片時,可先在前端進行裁切,以免存到後端的圖片尺寸比例不對,也可避免檔案過大。 之前寫過一篇「 前端如何使用 JS 先壓縮圖片尺寸大小再進行上傳 」,其實也能處理前述大部分需求,但稍有不足之處: 只能對上傳的圖片等比例縮小 不能防止 使用...
繼續閱讀全文Javascript 字串加密解密範例研究
![Javascript 字串加密解密範例研究](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ1Ld7Bjs4-0TcXQHRvuTfe6RP9giYHelVJPzYUcJJiDfp7ETo7tuDJ9Luh18EHJ3NZEz3qer4ofxTb01dzvdSqf4MvV6fyVPN9TmHvZ22OPe53Y4FEVZDSL2sSMOfDdmqjXSJWfvTMq95/s1600/js-string-encryption-decryption-aes.jpg)
最近需要用 JS 保存一些,不想被很容易就判讀出來的資料,因此研究了一下 JS 如何對字串進行加密及解密。 結果搜尋發現網路上這方面的實用工具不多,原因大致是: JS 是攤在陽光下的語言,加密解密流程會被看到 因此很少純前端進行加密與解密,大多是配合後端進行運算,一邊加...
繼續閱讀全文JavaScript 四合一工具:壓縮+加密+混淆+美化
![JavaScript 四合一工具:壓縮+加密+混淆+美化](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi6CdtOCFQCEr2ACGkUzTB8qvH7YI-P4HOZkZTsRiIjM0GJBqT52lCOPa4EA2mBECX8W1LJSONMjTDrtz0C2sWv8Jr37U2h0Cm6FBPFJI-n6OPaqYyE0TKC-dU0u9jAlv-sz_qXn61o6vq/s1600/js-tools-4-in-1-minifier-packer-obfuscator-beautifier.jpg)
前一篇介紹了「 Javascript 壓縮、混淆、加密、解密工具及原理 」,也說明了 JS 加密混淆不容易被破解的處理流程,此流程需要開啟三個線上工具的網頁來進行。 重複三次「等待編碼、複製、貼上」的時間不算長,但工程師思維就是會想辦法簡化所有重複流程,我長久以來一直想做個前...
繼續閱讀全文Javascript 壓縮、混淆、加密、解密工具及原理
![Javascript 壓縮、混淆、加密、解密工具及原理](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAegXoztueYzeNF4ldPxBGMvzFF5P-F3WR9S1saMDkxx2oate0VKww-uMHe-WzKwHmhVx6ehJmaIya4v7ZWEQg6u8gRsM7m7hGDIx_MGnECIZgb9t06ob8dRjl7RzdO_MEeXE2FrPm4o9R/s1600/js-encrypt-obfuscator-tool.jpg)
網頁前端的程式語言 Javascript,由於攤在陽光下誰都看得到,不如後端來得安全。因此除了機密性的程式碼別放前端,最好網頁上的 JS 也需要經過處理,除了降低可讀性,也可避免被盜用。 常見的處理方式有壓縮、加密、混淆等等,如果做得太簡化,使用某些破解工具就能還原。因此本篇...
繼續閱讀全文Javascript 產生偽隨機數字的方法及應用
![Javascript 產生偽隨機數字的方法及應用](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSY_LmZb50-ZatQQmY3RD26P07RqmafqpcWy_6Xh7lbbWHzxXlPRsrpc0EmFkMO0fyxoq6PBOplhpMUyEEnk3KjXRk4duLt5bD1AVutopbFi8EHCKMxUCpMdp3N7Ex0-erE4BBsxBNztBb/s1600/js-fake-random-numbers.jpg)
最近接到一個需求,想在網站顯示虛構的線上人數。一般來說,顯示線上訪客數有很多免費的第三方服務,不過案主會有這樣的需求,代表網頁顯示的數字想要膨風一點。 用 JS 產生隨機數字其實很簡單,但如果隨機產生的線上人數太離譜,一眼就被看穿的話,對網站聲譽其實不太好,所以這功能也不是那...
繼續閱讀全文前端如何使用 JS 先壓縮圖片尺寸大小再進行上傳,有效節省儲存空間﹍實作範例
![前端如何使用 JS 先壓縮圖片尺寸大小再進行上傳,有效節省儲存空間﹍實作範例](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7zUt1ooE-3uJp-yz3_yKQtWO_wWX2SzeD-8OVGaB29OEwcRj1Mur6oHVHjkijPdC85hQaUD6ADYNYA4onQp2jv70Ag0_sXAg4mzT2GGQ5lv11nvDBjKkQfZRvQuju2ocuyhSXd2EuIjPF/s1600/js-compress-resize-image-canvas.jpg)
以前處理過一個客製系統,有多處需要註冊會員上傳圖片: 會員頭像 證件留底 設施環境介紹照片 由於使用者各種年齡層都有,不是每個人都網路世代,懂得先壓縮 JPG 檔再上傳,那麼上傳的圖片檔案可能會超出工程師想像。大部分中高齡使用者可能直接從手機選了圖片就上傳,也不會知道...
繼續閱讀全文如何用 Javascript 複製文字﹍跨瀏覽器相容 iOS
![如何用 Javascript 複製文字﹍跨瀏覽器相容 iOS](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRQRZhm5VI8P4Wpx2M5wveGt2s7F0FT1ZdnWAXq3-V_PnfaUo3E8rmz3pyij7W5HjaGWz3J1TGchM-eml3Zhb5I14OL0avrtYTW6rJdp3W9_304QSZZSOEC14a53gr8r87yLbdNkmqv2ab/s1600/js-copy-text-ios.jpg)
最近接到的需求類似「點擊按鈕後自動複製折價券代碼」這樣的功能,因此研究了一下如何實現前端利用 Javascript 複製文字。 多年前曾在「 如何用語法保護網頁文章著作權 」多篇系列文寫相關功能,但這些年網頁技術進展很快,HTML5 新的 api 讓複製文字變得相當簡單。 ...
繼續閱讀全文手機分享到 Line 的連結,如何強制用預設(外部)瀏覽器開啟?
![手機分享到 Line 的連結,如何強制用預設(外部)瀏覽器開啟?](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu_IBNLTarAbOwhpd_clGSVU7q6aDKUCv4C5IsIqwPiQwhJDd0hemEEPEPzWeNyaJsFN4ER1vfc1awwWzL5rHbkWmzT09XUoCsnXifTbikExRvFidf8xZJhtv1vw1nfnHBllbC4UStaabg/s1600/line-link-open-external-browser.jpg)
在這篇「 分享到 Line 會遇到的問題整理 」有讀者留言詢問: 請問貼到LINE裡的超連結,能設定呼叫預設瀏覽器APP來開啟嗎? 這個現象來自於 Line 某次改版後,只要用手機點擊連結,一律會在 Line 內部開啟,不會另外呼叫手機瀏覽器,例如 Chrome、Safar...
繼續閱讀全文使用跨域代理伺服器(CORS PROXY),解決讀取第三方網站資料問題﹍實作範例
![使用跨域代理伺服器(CORS PROXY),解決讀取第三方網站資料問題﹍實作範例](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidFlfAs_-gQjDxZaGgVJSQLG8SWr51XrgHCEdb2zc7GzD-2-j1vPzedDmqrsXRZ3qv3KNFLTrotfDwoCthrHi-X-Bl6JnpJ875BFa5NsMwPD2DOQtoV35gWyR2KxKX9fCcnuGasViaHpy_/s1600/cors-proxy.jpg)
前端開發人員寫 JS 遇到需要串接第三方 API,或是想存取第三方網站的資料時,遲早會遇到跨域限制的問題。 跨域(Cross-Origin Resource Sharing)的原理可參考這篇「 跨來源資源共用 」,因為安全性考量,網站主幾可設定收到 HTTP 請求時,是否允許...
繼續閱讀全文解決 Chrome 下 Javascript 中文排序問題
![解決 Chrome 下 Javascript 中文排序問題](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjrB8h102USTtX7dEvGQtGLrDpG-o3jnjgCj18oBNATRv6VWV33iglqcddG2jv8v1su_u6sTmN_EJQ4DkC8oWVIdOjZ06NLAQ4bOwt49xwl0ERtPMsg-Mi7bcUg4W5AvatuDS-TW6Mu6DF/s1600/js-chinese-sort.jpg)
最近客戶反應,網頁上的中文排列順序,變得跟以前不太一樣,例如: 原本會按 "上午"、"下午"、"晚上" 排序,現在變成 "上午"、"晚上"、"下午" 原本...
繼續閱讀全文偵測網頁 DOM 新增節點(元素)最方便的方法﹍利用 CSS 動畫技巧
![偵測網頁 DOM 新增節點(元素)最方便的方法﹍利用 CSS 動畫技巧](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9NcMNqhYFscCGOloTclf1TiuMoibXCeFlOYOqBqZE4FZEC2AZ_LIr2VQkDgtw2LArD6-lFjjN_4Ywg26OOFvrT8s-Mht7CD7eklVAhPh4mlDuPcdtkJawFZrZV08TGFURs7r9Fyp_-RCh/s1600/dom-watch-node-added-css-animation.jpg)
最近這個案例比較特殊,幫客戶改付費範本次數一多,某些比較貴的範本,作者為了不想讓別人看懂程式碼,雖然 JS 沒有使用混淆 (obfuscate),但是壓縮、重組得不成人形,導致完全無法去閱讀解析這些 JS 程式碼。很多動態生成的區塊,最終只能等 DOM 完整成形後,再來寫 JS ...
繼續閱讀全文防止網頁圖片被下載的密技
![防止網頁圖片被下載的密技](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX0y4Rh1aUePL6ZZXRbTzzLkn5-5PIQFOUeXk8YF3sNvG6m5NVLUnSEIp6yUlxoRDNFuS69rioF6wcUT-jI0nN29T09UNm0r3nyCLJJTXO9RvtAMPMoUZPbkvfF1ioBox0yxVu3EqzHOdp/s1600/web-image-prevent-download.jpg)
最近接到一個需求,由於案主網站的圖文常被中國網站、或農場網站盜取,所以希望能夠讓網頁上的圖片,不要那麼容易被下載。 當然我也跟案主說了,任何方法都不可能阻止圖片被取得,最簡單的按一下 Print Screen 鍵就拿走了,所以不如做好浮水印比較實在。 不過案主的出發點是,...
繼續閱讀全文用 Line、FB 手機 APP 開啟網頁對前端工程師的困擾﹍JS 辨識內建瀏覽器(webView)的方法
![用 Line、FB 手機 APP 開啟網頁對前端工程師的困擾﹍JS 辨識內建瀏覽器(webView)的方法](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-_v-pYzb6HxfdqMTu76o0JQZL_uMo1Hx8iZrRTX2g0UhHjyY9npU0FlKcQsX5SZaHxMfPIFO17p-4mxn1B1W-MYBCruJoZ1B1cheU2ssYhmgxkaLQR7G9H1rLkTeqNEzOcKJ9wM9W9q5I/s1600/mobile-detect-webview-fb-line-in-app.jpg)
前陣子的一個專案,客戶反應很多使用者用手機操作時,網頁會有錯誤導致無法註冊。但我手機實測的結果又沒有發生任何問題,於是請客戶提供使用者的操作環境,例如 Android 或 iOS 系統,瀏覽器版本等等。 結果都不是這些原因,最後才發現是因為使用者在 Line 上面開啟網站連結...
繼續閱讀全文Iframe 跨域傳值在 iOS 失效的解法﹍利用網址 + localStorage + cookie 並用
![Iframe 跨域傳值在 iOS 失效的解法﹍利用網址 + localStorage + cookie 並用](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVBRzzRIgbi7hI9d6lnfyP3IByPTw0K-1EucGXHKZY7PdEy4CaXAJ4s7H0eRLaw3Gy2WciojqsEQPstEusvSfY8fGGZ62VgkJ9uHpxkb_U1ZxtjOl40Vn3aNl0NoUccofFkYlK_udCzwQH/s1600/iframe-cross-domain-postmessage.jpg)
上一篇「 利用隱藏的 Iframe 跨域傳送訊息實作 」,很可惜在前端開發人員的大魔王(iOS)面前又失效了,在 iPhone 鬼打牆了很久才瞭解: iOS 禁止 localStorage 跨域傳值 iOS 的 Safari 設定中,預設關閉 cookie iOS 的 C...
繼續閱讀全文