分類
程式技術

fakeimg的https存取問題

今天在拉一個網頁畫面, 使用 fakeimg 進行測試, 想說網站都用 https 所以圖片也用 https 來進行連接, 結果還是發生安全性提醒.

原因不是 fakeimg 不支援 https, 而是用錯了. 像這樣: https://fakeimg.pl/100×100 少了最後的 /.

也就使用原來的連結被重導至 http://fakeimg.pl/100×100/ 這樣, 使得網頁上的圖片被改成使用 http 連接, 而出現的安全性警告.

所以記得使用 fakeimg 時, 若要使用 https, 則要把相關的網址打對, 也就是

https://fakeimg.pl/100×100/

才不會發生這個問題.

之前介紹 fakeimg 的文章在這裡: https://diary.tw/archives/1266, 可以參考看看.

分類
好用軟體

免費好用的網站監控-Monitor.us

自己架的網站, 有時候沒有什麼監控, 導致中斷也不知道, 往往到下次自己在使用的時候, 或是檢視 GA報表的時候才發現, 的確很囧.

使用免費的工具來自己監控, 以利能第一時間取得資訊. 這個網站服務提供了免費的監控服務, 大家可以試看看. 早期使用的免費工具, 大多是限制監控點的數量, 只有一個, 十分不便, 當然, 服務也是為了收費, 所以有一些限制很正常, 不過這個 monitor.us 提供的更多, 以下是他的付費與免費的比較:

(以上內容引用自官方網站: http://www.monitor.us/en/about-monitor-us/monitis-premium-product )

主要差異在於監控的頻率與保存的時間, 而沒有監控數量的限制(上面的monitor location指的是測試發起的地點, 不是監控項的數量), 不過若是個人或一般小型商業應用, 應該是很足夠的.

除了 WEB(HTTP、HTTPS) 的監控外還有許多免費監控項目, 如下:
Uptime monitors: Ping、DNS、FTP、TCP、SSH、SIP、UDP、SMTP、POP3、IMAP、MySQL、SOAP
Server/Device monitors: CPU、Memory、Drive、Linux load、Process、Server events、SNMP、Ping、HTTP、HTTPS

其他付費的還有 Application monitors, Cloud monitors 等, 真的很豐富.

而管理介面的圖表也十分易讀好管理, 最棒的地方, 是他還有手機版本可供管理及查詢(還有push notification通知訊息)

Android 版: https://play.google.com/store/apps/details?id=com.monitorus.android.mobile
iOS版: https://itunes.apple.com/us/app/monitor.us-free-web-server/id508012934?mt=8

快來建立一個自己的監控的服務吧.

分類
程式技術

雙斜線的使用方式

今天在幫一個網站處理加上 SSL 時, 發現有個使用 jQuery 的效果消失了, 經檢查後, 發現其實是因為該網頁使用了 http://code.jquery.com/jquery-latest.min.js 的 jQuery library.

為了解決這個問題, 當然就是再加上 https 就可以了. 不過有沒有更好的方式呢? 答案是有的, 使用 // 雙斜線來處理.

//code.jquery.com/jquery-latest.min.js

這樣的語法, 是告訴瀏覽器, 使用”繼承”的 protocol, 也就是說, 主 url 上使用是 http, 這裡就用 http, 而原本是走 https , 這裡就用 https.

簡單來說, 一種方式就是 library 就都用 https 的方式, (當然原本的 library 網站要有支援 https, 目前絕大部分的 cdn library 都有), 否則使用這種 double forward slash 也是很不錯的方式, 解決開發環境只用 http, 而 production 環境使用 https 的狀況.

分類
好用軟體

Live HTTP headers for firefox

之前介紹過 firebug 新的 network monitoring 功能(https://diary.tw/archives/485), 最近發現有時在追蹤 cache data 時, 不是很方便, 因為要在前方的 + 號展開, 而且比較麻煩的是要 check http status code 比較不方便, 他並沒有直接秀出狀態, 而是以顏色的方式區分, 於是再找找有沒有更單純的 headers 檢視功能, 找到了一個 Live HTTP Headers for firefox 的方便 Add-ons.

於是下載安裝了 (link), 發現該功能雖然單純, 不過十分方便, 就只有 headers 的部分會顯示出來, 而且也可以以 sider bar的方式 dock 在 firefox 的左側, 對於要常常在查 http 效能及 cache 狀態的我, 感到十分方便.

真的是一個還蠻實用的 http headers 的觀察器.

PS. HTTPS 也都可以正常觀察 headers 的部分哦(因為 headers 本來就沒有加密啦!! 當然原來的 firebug 的 network monitoring也都可以啦, 只是操作上麻煩一點)

下面是他的呈現結果:

分類
程式技術

Fiddler-HTTP Debugger

在寫 web 程式時, 常常需要除錯 http header 的時候, 或是要得到 browser 如何和 web server 溝通的過程時, 尤其是在寫 AJAX Code 的時候, 我們對於 packet level 的資訊會十分感興趣. 當然我們可以使用像是 sniffer 或是我常用的 ethereal 來進行封包的監聽, 再接著對這些監聽下來的封包分析. ethereal 可以利用一些 filter 或是關鍵字來進行封包的搜尋, 以方便在茫茫封包海中找到我們感興趣的資料.

有個方便的工具, 而且還是掛 microsoft 的工具, 是放在 Wininet 這個地方的監聽工具, Fiddler, 程式很小, 也很容易使用, 但因為是在 Wininet 這層, 所以只支援 IE, 像是 firefox 就是自行透過 socket 層實作 web request 就不支援, 另外像是 sleipnir 這種是用 IE 核心(其實也就是利用 Wininet 這組 api 進行 web reqeust) 的也支援, 簡單地說, 有用 Wininet 的 api 的應該都能用 Fiddler 來進行封包的監聽. (不過不包含 ftp, 僅有 wininet 的 http 部分)