顯示具有 電腦- 網頁設計-Javascript 技巧 標籤的文章。 顯示所有文章
顯示具有 電腦- 網頁設計-Javascript 技巧 標籤的文章。 顯示所有文章

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...

繼續閱讀全文
TOP