上週台積電的合作公司網站檢測出現了這個 Content Security Policy（CSP）缺失項目要修正更新。 調整了第一版掛上去後，又檢測出第一版的設定不夠安全，要去除使用 script-src 中的 unsafe-inline 這個方法。 先前處理星展銀行的開發案都沒這麼嚴格勒！ 而且由於 …
閱讀全文〈[WordPress] 解決網站使用 Content Security Policy（CSP）後產生一些問題的解決方法〉
標籤彙整: JavaScript
[WordPress] 判斷使用者登入狀態的前後端開發方法
WordPress 程式開發中判斷使用者當前是否為登入狀態的這個需求其實滿常見的。像是登入後才可以看到完整文章內容，登入前看文章摘要、未登入前無法結帳需提示登入，登入後跳轉結帳頁面…等 要做到這樣的使用體驗可以從前後端下手！ 後端判斷登入狀態的方法可以使用： is_user_logged_in( …
[WordPress] 外掛或主題的 CSS 與 JavaScript 資源管理
因為總是有人非常在意 Google PageSpeed Insights 的分數，其中時常提到的就是這些 CSS, JavaScript 資源管理的部分。 無奈有一好沒兩好，WordPress 架構如果不使用任何外掛開發，那自然全掌控下想怎樣就怎樣，但如果使用外掛的話，還是有必要損失一點效能換取彈性 …
[JavaScript] 使用 HTML5 API 判斷上傳欄位資料的型態與大小
前端能處理的，後端就有機會節省資源，所以前端表單輸入的資料能夠先行驗證也比什麼都不檢查直接丟給後端來得好！ 但後端撰寫的精神永遠是保持懷疑，多做檢查 這筆記是剛好要處理一個上傳檔案的表單。如果前端能先判斷好上傳檔案型態與大小，就能避免等後端接收後才判斷，如果有問題可以當前頁面就處理好。 程式碼片段如 …
[JavaScript] 變更 input 元素檔案類型 file type 內容
這個答案：無法辦到，安全性因素。 沒用過還真沒注意到這個部分，以為可以用 JavaScript 把前處理的內容替換上後上傳。結果一用方法強制套上去就噴錯誤警告！ 這篇「How to set a value to a file input in HTML?」問答也滿不錯的。 想像一下如果 JavaSc …
[JavaScript] FileReader API 實作圖片預覽
前端實作表單如果有碰到需要上傳圖片幾乎都會有這需求：預覽。 作法有跟後端搭配，同步 AJAX 上傳後回傳連結套入預覽，或是今天這主題純前端搞定！ 使用 JavaScript FileReader API 要注意瀏覽器支援度，尤其是 IE.. ，不過整體來說支援度都還不錯。 HTML 結構： < …
[Google] 如何遞交一個搜尋友善的 JavaScript 程式網站
這是 Google I/O 2018 的影片的一些摘要、心得，建議是直接看影片是比較快拉～ＸＤ Deliver search-friendly JavaScript-powered websites (Google I/O ’18) 這個前端程式詮釋網站內容導致 SEO 問題其實也討論很久了，前陣子 …
[JavaScript] unload/beforeunload 離開頁面事件處理替代方案
這個功能早期大家一定不陌生，離開頁面前會彈跳視窗，不是跟你說要記得儲存就是提醒你別這麼快走，後面還有好康。 但最近這功能好像就沒怎麼看到了！？ 經朋友提起，研究一下，發現是 Chrome 51 版本後被拿掉了，原因就是：這功能大多是在詐騙網站使用的ＸＤ 所以現在有掛這功能都不給客製化訊息，由瀏覽器統 …
[Crawler] Google 與 Facebook 爬蟲觀察進度 – 它會叫了！（誤）
標題浮誇請忽略，主要是這兩邊蟲子最近都有人有新觀察。國外這篇文章「Googlebot’s Javascript random() function is deterministic」，作者觀察到 Google 爬蟲執行 JavaScript 有一個自己的「道理」，這塊有興趣自己看文章便知一二，而我的 …
[綠界] 金流介接新方式：站內付
參考：連結 注意他的「站內付」有個TM符號，是有註冊商標，先搶下名字的概念ＸＤ 其實就是把介接彈性又再打更開了，可以透過前端 JavaScript 完成跟綠界金流方溝通完成交易。更適合單一頁面導購方式，或是非一般購物車的交易流程形式快速結帳。 目前感覺是不錯，但就我個人如果是消費者的話反而會對此一操 …