跳到主要內容

[野人獻曝] 將Cloudfront的資源加上防外連機制

最近因為 Cloudfront 的流量費用越來越可怕了,
所以牙一咬就決定擋掉圖片的所有外連圖個減少開銷。

Cloudfront 正好有提供 Signed URL 這個玩意可以達成我的要求。

這玩意簡單來說就是在所要求的資源(如:圖片、檔案等)的網址後面多加一串 Query String。
例如:http://www.example.com/a.txt經過改造後會變成http://www.example.com/a.txt?blahblah
而Server只要認那串 Query String 就可以決定是否要出所要求的內容,
就可以控制不必要的外連。

那接著就不提廢話,直接實作吧!

第一步要先到 AWS 的 Security Credentials
然後頁面往下拉找到一個 Key Pairs 的 tab,
接著點擊 Create a new key pair
他會產生一組pem檔並且要求下載,
請把這個檔案下載儲存。
同時頁面上也會顯示一組 Axxxxxxxxxx 的 key ,
請務必把這組字串複製下來。

第二步要寫出一個產生 Signed URL 的 function,
內容大概如下

<?php
/**
  * $resource:要處理的檔案網址  例如http://www.example.com/a.txt
  * $expire:過期的時間,單位是秒,這裡我預設有效時間為一個小時
*/
function create_signed_url ($resource, $expire = 3600)
{
    $aws_key = 'Axxxxxxxx';  // 就是上述所提到的key
    $pem_file = '';   // 剛才下載的pem檔案放置路徑
    $expire_time = time() + $expire;  // 這裡的值是個 Unix timestamp
    // 以下是 Cloudfront 的存取策略,內容基本上是個json string
    // 但是千萬不要用json_encode這個函式去編出內容,因為格式會不一樣
    // 詳細可以參考:
    // 以下是指特定的檔案(即$resource)在$expire_time之後即無法取得內容
    $policy = '{
        "Statement":[{
            "Resource":"' . $resource . '",
            "Condition":{
                "DateLessThan":{
                    "AWS:EpochTime":'. $expire_time . '
                }
            }
        }]
    }';
    // 接下來要利用openssl的相關函式產生所需的簽章內容
    $private_key_content = file_get_contents($pem_file);

    // 先把內容丟到openssl_get_privatekey算出私鑰
    $pkey = openssl_get_privatekey($private_key_content);
    // 接著呼叫openssl_sign取得簽章內容
    // $policy是上面設定的讀取策略,產生的結果會放在$signature中
    openssl_sign($policy, $signature, $pkey);
    // 接著釋放這組key內容
    openssl_free_key($pkey);

    // 然後要真正產生簽章過的URL
    // 請注意:Policy和Signature的內容要用base64_enocde編碼外,還要把特定的三個符號替換掉    // 否則產生的url也會無法取得資源
    return $resource."?".http_build_query(array(
        'Policy'            =>  str_replace(
            array('+', '=', '/'),
            array('-', '_', '~'),
            base64_encode($policy)
        ),
        'Key-Pair-Id'       =>  $aws_key,
        'Signature'         =>  str_replace(
            array('+', '=', '/'),
            array('-', '_', '~'),
            base64_encode($signature)
        ),
    ));

}
?>

然後在網頁上用到該資源的連結/圖片全部用這個function處理後,
輸出的url應該就會有一長串的Query String了。

但是這樣作還不夠,
我們還要進去 Cloudfront 的控制台設定哪些項目需要被限制存取。
所以進入控制台後請選擇目標項目後點擊 Distribution Settings
接著選擇 Behaviors
如果沒意外的話有一組 Path Pattern 為 Default(*) 的項目,
請點擊他後按下Edit。
出現編輯畫面後請往下拉,
找到 Restrict Viewer Access (Use Signed URLs) 並選擇 Yes 後儲存。
這樣這個項目內所有資源就會被限制存取。
(當然也可以設定什麼樣的檔案才要被限制,這個設定可以寫在 Path Pattern 中)

上面的動作做完後,等 Cloudfront 佈署完成後應該就會生效了。
你應該會發現沒加一長串簽章的網址全部都出現 Access Denied 或是其他之類的錯誤訊息,
而有一長串簽章的網址都應該是可以正確讀取,
這樣表示就一切正常了。

留言

這個網誌中的熱門文章

[野人獻曝] Google Picker

昨天空閒時刻在 Google API 頁面逛著逛著看到 Google Picker 這個玩意。 仔細看了頁面說明, Google Picker 這玩意的首頁就直截了當說了: Google Picker is a "File Open" dialog for the information stored in Google servers. With Google Picker, your users can select photos, videos, maps, and documents stored in Google servers. The selection is passed back to your web page or web application for further use. 既然他這麼好用, 想當然爾就刺激了我的技術魂, 所以昨天晚上稍微看一下文件後就寫了一個簡單的Sample了。 如果想試玩的話,請往 這裡 。 ======以下技術解析一下===== 基本上要用這玩意,實在是非常簡單。 只要先開這兩行: <script src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load('picker', '1', {'language':'zh-TW'});</script> 這樣就會先把Google Picker的程式碼先引入了。 然後以Google所提供的慣例中所展示的, 他是在頁面loading完後跳出對話框。 但是以我的sample言, 是在每一個連結被點擊時才觸發, 這點要先注意一下。 接著就是寫被觸發後的處理, 基本上都是以 google.picker.PickerBuilder 物件為主, 因此我們可以這麼寫: var picker = new google.picker.PickerBuilder().addView(google.picker.ViewId.IMAGE

[野人獻曝] 利用 IFTTT Maker 自訂自己的特殊需求(?)

大家應該都知道 IFTTT 是什麼樣的東西, 所以我就不多解釋了。 雖然一般而言, 我們確實只要在某個服務的狀態發生時, 才需要讓 IFTTT 幫我們做些事, (像是我們收藏 Flickr 上某張照片時就自動下載到 Dropbox 之類的。) 但通常可以選的服務就是檯面上有名號的服務。 一旦要做些比較特殊的事時, 嗯......通常直覺下都是自己刻東西來做, 老實說有點麻煩啦...... 所以後來 IFTTT 推出 Maker 這個玩意。 她可以接收來自使用者端的請求, 也可以把請求轉發到另外一個地方, 對某些特殊需求而言, 就不大需要額外刻東西。 以下簡介一下使用流程: 首先先到  https://ifttt.com/maker 找到你的 API Key 並且記下來。 接著你就可以到 Create Recipe 中選擇 Maker 後再選擇 Make a web request 開始新增你的食譜了。 記得 Event Name ,這個東西會在呼叫時用到 另外 Receive Request 只收以下這些參數:v alue1、value2 及 value3   這些參數,其他東西會無視。 發出 request 直接使用 POST https://maker.ifttt.com/trigger/{Event Name}/with/key/{API Key} 然後就看你要讓 IFTTT 接到哪裡即可。 不過要注意一點:因為上面的 Request 只收 value[1-3] 這三個參數,所以你也只能在 Ingridents 選擇這三項東西來用。這個就比較麻煩一點...... 使用大致上應該沒啥問題, 反正就是簡單的 POST 機制, 做些比較沒有敏感性的事情其實還蠻方便的。 不過要拿來控制你家的電氣系統就可能要再三思了(茶

[野人獻曝] 實作 Clef 的 2-factor 登入

Clef 是一套算是方便的簡單登入機制,宣稱只要三個步驟就能讓你簡單登入: 點擊支援網站的登入按鍵,此時會出現 Clef 的登入畫面(其實就是一個 GIF 條碼而已) 打開安裝在手機上的 Clef APP ,掃描該 GIF。 若是第一次造訪該網站可能會要求你填寫額外資料。這樣就完成登入作業了。 要在自家網站使用這個服務,得先去他們網站註冊,並開啟一個新 Application ,接著就是要改一下 Code 了。 以下是 PHP 使用 CI 所寫出的範例 Code(這裡只實作登入部份,登出部份之後再另寫一篇說明): 如果要玩玩看實際的操作流程,可以連到 這裡 看看。