看了這張圖以後,覺得線條粗細一致而且線條幾乎都有分開,而且最近都在玩 SVG,突然靈機一閃,想把這張圖做成動畫, 於是經過兩個小時的努力,就變成下面這樣了:
See the Pen oSolve Team Drawing Animation by tonilin (@tonilin) on CodePen.
下面簡單描述一下怎麼把一張非向量的圖做成這樣的效果
這邊我用到的方法是 Potrace 他可以將一般的 Bitmap 圖片轉成向量圖,但是 Potrace 不支援 PNG,所以在做之前要先將 PNG 轉成 PNM 再處理。
1 2 |
|
出來的結果像這樣,可以看到跟原圖的相似度非常高:
因為 Potrace 產生出來的 SVG 並不會由畫畫的順序排列 Path,理想的情況是畫完一顆頭再畫另一顆,所以這邊把 SVG 做一點簡單的分類, 三顆頭和下面的文字:
另存新檔以後 Path 就會依照這個順序排列了。
這邊使用到 SVG Path 的動畫原理,詳細的原理可以參考 How SVG Line Animation Works | CSS-Tricks
1 2 3 4 5 6 7 8 9 |
|
使用 css animation 對 svg 做動畫的效果:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
|
應該會注意到我沒有上 animation time 和 animation delay,是因為寫在 scss compile 出來太龐大了,所以這邊會用 Javascript 來處理:
1 2 3 4 5 6 7 8 9 10 11 |
|
上面的 css 指定 svg.animated
下的 Path 才會有動畫效果,最後這邊只要加上 animated 的 class 就完成了!
1
|
|
看起來效果還不錯!最近常常在玩 SVG,還滿有成就感的,最近 oSolve 的新產品 Worknow 打工趣 的首頁也有用到 SVG 來呈現動畫效果,有興趣也可以連過去看。
See the Pen oSolve Team Drawing Animation by tonilin (@tonilin) on CodePen.
]]>可是在文章在 render markdown 的時候非常慢,在觀察之後,發現只有在有 fenced code 的頁面才會特別慢,
在仔細看,原來是使用者沒有輸入正確的語言格式(誤把檔案名稱當語言):
1 2 3 |
|
正確的寫法應該是
1 2 3 |
|
第一種錯誤的寫法會讓回應時間多了 200ms,如果一個頁面裡面有 5 個這種寫錯的 fenced code,就至少會慢 1000ms,而且使用者一定會有出錯的時候。
來看看 Pygments.rb Highlight 的 code,非常簡單,正確的語言進去就直接 render 出來,錯誤的會 raise exception,把 lexer 用 text 傳進去,確保不支援的語言也會顯示出來。
1 2 3 4 5 |
|
速度既然是慢在不支援的語言噴錯以後 rescue 非常慢,現在要做的就是 Pygments 不支援的語言不要傳進去,於是去翻 Pygments.rb 的 code 發現一個方法,可以尋找 Pygments 支援的語言
1
|
|
試了一下這個 method,就算傳進錯誤的或不存在的語言,速度也非常快。
於是解決方法就出來了,只要先判斷再 Highlight 就好了:
1 2 3 4 5 6 7 |
|
寫了一個簡單的 script 來測試一下兩種方法的速度
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
|
可以看到差異是非常大的:
1 2 3 4 5 6 7 8 9 10 |
|
TDD is dead. Long live testing
RailsConf 2014 got underway earlier this week and as always some interesting stuff has come out of the keynotes, particularly DHH’s statements on the weakness of test driven development.
Ruby on Rails 4.1 Release Notes
Highlights in Rails 4.1: Spring application preloader, config/secrets.yml, Action Pack variants, Action Mailer previews
OpenSSL Severe Vulnerability in TLS Heartbeat Extension (CVE-2014-0160)
Ruby is affected when statically compiled against a vulnerable version of OpenSSL through the standard library OpenSSL C extension.
Real-time Rails Partials
WGif is a command line tool for creating animated GIFs from YouTube videos.
Filename sanitization for Ruby
Rack middleware for blocking & throttling
Font‑To‑Width (FTW!) is a script by Nick Sherman and Chris Lewis that takes advantage of large type families to fit pieces of text snugly within their containers. Unlike other text-fitting tools like FitText.js.
A great JavaScript OCR demo by Konrad Dzwinel that uses some modern technology and libraries.
jQuery plugin to tagging like a charm!
A great tutorial by Oleg Solomka on how to animate SVG paths and animate along them.
Published already some time ago, this is a really useful resource of patterns and modules for responsive emails.
An inspiring collection of really good email designs by Matthew Smith.
160+ sites, apps & books that I recommend any designer should check out.
The Most Useful Websites and Web Apps
If you haven’t come across this yet: A fantastic collection of links to web tools that do at least one job. Collected by Amit Agarwal. Definitely one for the bookmarks.
]]>Mail-in-a-Box helps individuals take back control of their email by defining a one-click, easy-to-deploy SMTP+everything else server: a mail server in a box.
1
|
|
application.rb 的 code 佷簡單:
1 2 3 4 5 |
|
以前不會出錯,為什麼現在會呢?於是 Google 了一下,發現 Rails 4.1.0 會將 I18n.config.enforce_available_locales
預設為 true
在 enforce_available_locales
為 true
的情況下,只要將 locale
設為不包含在 available_locales
內的值,就會報錯。
解法佷簡單就直接在 application.rb
裡面把 enforce_available_locales 改為 false:
1 2 3 4 5 6 7 |
|
如果想用 enforce_available_locales 但又不希望報錯呢?試著加入 available_locales 看看:
1 2 3 4 5 6 7 |
|
依然還是會出現一樣的錯誤 :zh is not a valid locale
,奇怪,我設定的是 :"zh-TW"
,怎麼會報 :zh
不允許呢?
找了很久,發現在 production.rb
裡面有一行 i18n fallback:
1 2 3 |
|
把 i18n fallbacks 設為 true
,在找不到 :"zh-TW"
的 locale 的時候,會接著尋找 :zh
,:zh
找不到才會接著找 :en
。
於是解決方法就很清楚了,只要連 :zh
一起 available 就可以了:
1 2 3 4 5 6 7 |
|
從出社會以後的第一間公司離職以後,就一直跟朋友說著要創業,我們有很多想法和想做的點子,卻一直都沒有行動,沒有行動的原因是覺得自己學的東西還不夠,因此決定繼續工作,學習經驗。但是有人跟我說,創業家永遠不會滿足於自己所學,永遠都有學不完的東西,於是我離開了公司,開始跟朋友一起創業。
台灣有非常多的接案公司,使用 Ruby on Rails 開發的卻很少,更可惜的是使用 Ruby 開發 Server 配合 Mobile APP 的公司卻連一家都找不到。就我所知,Ruby 有很多方便的 Gem,可以使開發 API Server 變得非常迅速而且有系統,而大部分的 APP 都是需要跟 Server 做溝通的,如果在 Server 端的開發有 Ruby 的加持,可以節省非常多時間,讓客戶的產品能在最快的時間上線。
於是我們公司提供了 Rails + Mobile APP 開發的解決方案,主要的服務項目是:
如果有這方面的需求,可以在 oSolve 最下面的表單聯絡我們,我們會儘快跟你聯絡。
]]>play ► — your company’s dj
A Toolkit To Create 8-bit Flavored Application
Finds next / previous Active Record(s) in one query
A ruby gem to liberate content from Microsoft Word documents
API and message handling for wechat in rails environment
https://wri.pe source code
A small clone of 1024
the last carousel you’ll ever need
Laverna is a JavaScript note taking application with Markdown editor and encryption support. Consider it like open source alternative to Evernote.
Let’s Chat: Self-hosted chat app for small teams
JavaScript Engine for Building Pixel Isometric Element with HTML5 Canvas
This could take a while
]]>A CSS course for web developers who want to be magicians.
Break Apart Documents into Images, Text, Pages and PDFs
Continuation of CanCan, the authorization Gem for Ruby on Rails.
E164 international phone number normalizing, splitting, formatting.
Form Objects for ActiveModel
Get screenshots of the websites in different resolutions
enjoy live editing (+markdown)
read from clipboard data in different browsers
Doing More with Icon Fonts
An interactive shell for git
<hr />
for your terminal
A website you join via pull request
]]>For Mac users who would like to create screencasts super quickly.
有鑑於每次產生出來以後還要做很多事情,所以,最近用了 Rails Apps Composer 製作了自己的 Rails template,可以一行指令就產生我自己常用的 Gems, Settings, Views…等等:
1
|
|
( project_name
可以換成你想要的專案名稱。)
因為是自己的 Best Practice 所以就裡面只會問你資料庫帳號密碼,其他一律是用我習慣使用的,不會用一堆命令行問你資料庫想用哪種,要不要裝 Devise 之類的。如果不是你習慣用的可以 fork tonilin / rails-recipe 回去改,或是用比較有彈性的 Rails Composer 或 RailsBricks。
有興趣自己寫 template 的,改天會開一篇文章教大家如何用 Rails Apps Composer 產生自己習慣的 Rails template。
使用 Rails Apps Composer 可以讓 recipe 看起來很乾淨,看 code 就可以知道包含了什麼,所以參考 https://github.com/tonilin/rails-recipe/blob/master/roachking.rb%EF%BC%8C%E5%A4%A7%E6%A6%82%E5%8F%AF%E4%BB%A5%E7%9F%A5%E9%81%93%E5%8C%85%E4%BA%86%E4%BB%80%E9%BA%BC%E6%9D%B1%E8%A5%BF%E9%80%B2%E5%8E%BB%E3%80%82
]]>這麼熟悉的數字一看就知道溢位了 Orz ,用 mysql 的話把欄位改成 BIGINT 就沒問題了,Rails 的修改方式:
1 2 3 4 5 |
|
至於為什麼是 limit 8,
Mysql:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
|
Postgresql:
1 2 3 4 5 6 7 8 |
|
http://example.com/users/1
,這樣的網址沒有意義,會讓競爭對手知道你有多少 Record,而且要寫爬蟲也非常簡單,一直遞增數字就可以把整個網站爬完了。
為了解決這個問題,通常會產生 Slug 來當做 record 的識別,一般的用法是這樣:
1 2 3 4 |
|
如果 slug 是唯一的,就可以用 http://example.com/users/roach-king
來讀取到唯一的 record,而不會有醜醜的網址:
1 2 3 4 5 6 |
|
可是這個 Gem 的設計會使用 ActiveSupport 的 parameterize,把非 a-z,0-9,-
的字元全部變成 -
,於是中文字就會被吃掉了:
1 2 3 |
|
為了解決這個問題,可以用另外一個 Gem babosa 來配合,他可以把 UTF-8 字元處理好,而不是都消滅:
1
|
|
跟 FriendlyId 配合只要把 normalize_friendly_id
override 就可以了:
1 2 3 4 5 6 7 8 9 |
|
Speeds up jQuery event delegation by using SelectorSet for matching event targets.
Build a Google Map for your website in just a few clicks.
SUPER CUSTOMIZED CHECKBOXES AND RADIO BUTTONS FOR JQUERY & ZEPTO
A positioning engine to make overlays, tooltips and dropdowns faster
A library for creating elements for use with Tether
An intuitive credit card form
Guide your users through a tour of your app
a web components gallery for modern web apps
JavaScript library to rotate elements by mouse or touch gestures.
Faster I18n Backend for Ruby Written in C
Faster I18n Backend for Ruby Written in C
Manage application specific business logic.
Super simple conversion of hashes into plain Ruby objects.
A toolkit for building Null Object classes in Ruby
]]>Logos made simple
Errors, more of them, and better. For sprockets, specifically sprockets-rails.
A Deeper Look at Ruby’s Enumerable
Ruby’s Enumerable module gives you a way of iterating over collections in a lazy manner, loading only what you need, when you need it. But it gives us so much more than that.
A Ruby gem to help extract the dominant colors from an image.
Give your pages some headroom. Hide your header until you need it.
Keep multiple browsers & devices in sync when building websites.
drop in zoom anything
Exploring canvas drawing techniques
Learn about canvas drawing techniques in this interactive tutorial by Juriy Zaytsev.
A jQuery plugin for extracting dominant colors from images and applying it to its parent.
A general purpose library for building credit card forms, validating inputs and formatting numbers.
The jQuery slider that just slides.
Simple overlay instructions for your apps.
jQuery animate number plugin
Javascript library for precise tracking of facial features via Constrained Local Models
A simple physics simulation/meditation/relaxation experiment.
Unveil one fantastic creation each day this month in this second edition of the fabulous Christmas experiments.
interactive slides exploring CSS 3D Transforms
SVG Tabs (Using an SVG Shape as Template)
In this great tutorial, Chris Coyier shows how to use SVG tabs on your website.
Startup Design Framework contains components and complex blocks which can easily be integrated into almost any design.
Really Simple Responsive HTML Email
]]>When all you need is a really simple HTML email template.
bundle install
的速度。
根據 https://github.com/bundler/bundler/pull/2481 這個 pull requst 來看,在 gem 的數量很多的時候,速度是相差非常大的:
1 2 |
|
首先要確定自己的 bundler 版本是不是大於 1.4:
1
|
|
如果不是的話請先升級 bundler:
1
|
|
確認自己 cpu 有幾個核心(以 osx 為範例):
1
|
|
我是用 macbook air,是四核,下面都以 4 核為範例。
升級 bundler 後就可以使用 parallel 了,只要在後面加上 -j4,4 代表 4 個 jobs:
1
|
|
也可以 global 更改預設的 jobs 數:
1
|
|
這樣就不用每次都打 -j4
。
如果在 capistrano 的 deploy.rb
是使用 require "bundler/capistrano"
,只要在 deploy.rb
裡面加上:
1
|
|
這樣在跑 cap deploy
的時候, bundle install
就會加上 -j4
了。
Users::RegistrationsController
去繼承 Devise::RegistrationsController
,然後把整個 method copy 過來一次:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
|
但是這樣的寫法非常髒,而且如果 devise 有什麼修改,這邊有可能會壞掉。
今天在翻 Devise registrations_controller 的時候發現,在 3.2.1
版以後,create action 裡面多了一行:
1
|
|
於是,如果想要在 create user 的前後做一些事情,只需要:
1 2 3 4 5 6 7 8 9 |
|
仔細看會發現 update、destroy 也有這一行,所以也可以如法炮製用在 update、destroy user 上。
]]>Observed is a framework for polling various applications/middlewares/services running locally or on remote servers like ones in your production environment. It is designed with extensibility in mind.
Audit activerecord models like a boss
Artoo makes robotics Simple and Extensible.
SchemaPlus provides ActiveRecord support for foreign keys, database defined validations and associations.
Rails application preloader
The Ruby Style Guide
Flexible Ruby on Rails breadcrumbs plugin.
Easy method to handle logic behind active links
Quickly create responsive HTML emails that work on any device & client. Even Outlook. http://zurb.com/ink
Simpsons characters in pure CSS
Collection of high resolution web browser logos with transparent backgrounds
A lightweight and modular front-end framework for developing fast and powerful web interfaces.
A Visual Type Scale Calculator
Automatically display online/offline indication to your users.
Creating responsive pie charts for any device is a piece of pie.
A javascript library for multi-touch gestures.
JavaScript Style Guide
Use a Google Spreadsheet as your JSON backend
Use a Google Spreadsheet as your JSON backend
A JavaScript book series born from Kickstarter
Yet another megamenu for Bootstrap 3
Auto complete plugin from dictionary with no external dependencies
Simulating raindrops falling on a window
A jQuery plugin to fade in images beautifully on your website
Web Components specifications
Resumes generated using the GitHub informations
Advanced HTML5 Hybrid Mobile App Framework
Defeat censorship. Give or get access to the open internet with people around the world through your social network.
Keyboard symbols in English Chinese Japanese
How to say ~!@#$%^*;“… in English, Chinese and Japanese?
GIVING BACK LITTLE GIFTS OF CODE FOR CHRISTMAS
]]>Doodles from Startup School 2013
先來重現一下一開始的情境:
一開始先有一個 comment 的 Controller,裡面有一個 Destroy 的 Action,在使用者送 DELETE 到 /posts/1/comments/1
時,會刪除 ID 為 1 的 Comment,接著 redirect 到 /posts/1
。
1 2 3 4 5 6 7 |
|
接著使用 jQuery ujs,送出 DELETE Form 到 post_comment_path(1, 1):
1
|
|
這個時候覺得每次刪除 comment,都會重新刷新畫面,太擾人了,想改用 Ajax 來完成,於是我們把 HTML 多了一個, :remote => true
:
1
|
|
Controller 則是維持不變。
這樣會發生什麼事情呢?如果你也覺得只會刪除 comment 那就掉入陷阱了。
按下 Delete comment 會發生什麼事情呢?首先會刪除 comment,這應該沒有什麼問題。那接下來遇到的 redirect 會發生什麼事情呢?
如果送過來的不是 ajax,他會直接 redirect 到 /post/1
也就是 post_controller 的 show action,很理所當然的 show 出 post 內容。
但如果是 Ajax 呢?他一樣會 redirect 到 /post/1
,但是卻會用 DELETE
,所以是丟到 post_controller 的 destroy action,於是你的 post 就會被刪除了XDDD
為什麼會這樣呢?我也不知道XDDD,改天有空研究再另外 PO 一篇。
其實只要依照不同的要求,回應不同的處理方法就好:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
但是如果非常有自信得只改前端,肯定會掉入陷阱。第一次掉進去的時候,還真的嚇到我了,還好是在開發環境,沒刪到什麼重要資料,學了 Rails 半年多,到現在還是能給我驚奇 >////<
]]>button_link_to
helper 來解決 button_to
和 link_to
的問題。
寫完以後發現不同專案要用到這個 method,我都要複製一次太麻煩了XD,於是就把它包成 Gem 了。
Github: https://github.com/tonilin/button_link_to
如果想要看 Demo 可以到這: http://button-link-to.herokuapp.com/
把下面這行加入 Gemfile
1
|
|
把下面這兩行加入 app/assets/javascript/application.js
1 2 |
|
就跟 link_to 一樣用法,詳細可以參考 http://button-link-to.herokuapp.com/
]]>Create engaging, interactive HTML5-based designs and motion graphics that can run on any device.
An interactive experience exploring the many eras of Mario. Turn on the audio and click around to find hidden interactions!
Nyan Cat inspired RSpec formatter!
A Ruby logger that uses OS X notifications.
Ruby on Files & Directories
Weather in your terminal, with ANSI colors and Unicode symbols
The missing link between spreadsheets and vector graphics.
Shumway is an HTML5 technology experiment that explores building a faithful and efficient renderer for the SWF file format without native code assistance.
A powerful little tool for managing CSS animations
Less//Css classes for fancy page load
Dropzone is an easy to use drag’n’drop library. It supports image previews and shows nice progress bars.
An HTML5 remake of the original Super Mario Brothers – expanded for wide screens.
Transition numbers with ease
A robust Javascript library for capturing keyboard input
A set of javascript tools for working with files. Multiupload, drag’n’drop and chunked file upload. Images: crop, resize and auto orientation by EXIF
Bootstrap Multiselect is a JQuery based plugin to provide an intuitive user interface for using select inputs with the multiple attribute present
Add Github like mentions autocomplete to your application.
Get caret postion and offset from inputor
Sir Trevor is rich content editing entirely re-imagined for the web: an intuitive editor for web content which does not presuppose anything about how it will be rendered.
Automatically detect when a browser is offline
Quick introduction to masking and clip paths in CSS.
擬人化CSS リファレンスサイト
Animated Checkboxes and Radio Buttons with SVG
Proof-of-concept for adding some fancy “check” animations to form inputs
If you work with Font Awesome, you can train you knowledge about each icon’s name with this nice game and also help provide feedback for icon naming.
Window control with simple, customizable keyboard shortcuts.
]]>Seene lets you capture, share and discover 3D photos easily and instantly, all on your iPhone.
remote => true
的方式,使連結變成 Ajax 的方式送出去:
1
|
|
這樣的好處是不用另外寫 Ajax ,就可以輕鬆得送出 Ajax。
如果不指定 remote => true
只有指定 method
,在點擊連結以後 jquery-ujs 會幫你產生一個表單,這個表單會放在 <body>
裡面,而且馬上送出去,如此,可以讓連結不只有 GET ,更可以做到 RESTful的效果。
1
|
|
但是這樣的方法卻會產生一些 issue。
以上兩個方法產生出來的 HTML 是一般的 <a>
tag:
1
|
|
這樣看起來似乎不會有什麼問題,但如果使用者對連結做了開新視窗的動作:
CMD
,再點連結相當於:
1
|
|
這樣的行為是發出 GET
到 CommentsController 的 index action,跟原本的發 DELETE
到 destroy action 是不相同的,使用者達不到刪除的效果,而且如果 index 沒東西,那就會造成 500。
在 Rails 有一個 button_to 的 helper:
1
|
|
用 button_to 雖然可以解決部份的問題,但仔細看一下他產生的 html:
1 2 3 4 5 6 7 |
|
這樣的 HTML 會產生幾個問題:
<form>
所以不能在 <form>
裡面使用,HTML 是不允許 nested form 的。<form>
預設是 display:block
,跟原本的 <a>
,表現方式不一樣,需要 overide style。<input>
value 裡面不能塞 HTML,所以如果這個按鈕有 icon 之類的 tag 就無法放進去(這個問題在 Rails 4.0有修正)。這個問題真的很惱人,原本很好用的小技巧,變成天天被 Airbrake 轟炸的原兇,所以就寫了一個 button_link_to helper:
1 2 3 4 5 6 7 8 9 10 11 12 |
|
這個方法跟 link_to
使用的方式一模一樣,產生出來的是 <button>
tag,而且是單純的 tag,不會有 <form>
包在外面:
1
|
|
1
|
|
預設的 jquery-ujs,按到這個 button,就已經會自動發 ajax 出去,但是這邊應該要讓按中鍵也會跟按左鍵有一樣的效果,於是要加上下面的 js:
1 2 3 4 5 6 |
|
但是如果沒有 :remote => true
,只有指定 method
,照原本的規則應該在 <body>
裡面塞 form,並自動送出去,所以要再加入:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
|
這樣一來 button_link_to 就可以做到 ajax send 和 form submit 的功能了!
原本的 <a>
和 <button>
樣式是不一樣的,一個是文字,一個是按鈕。
這時候只要加上 Twitter Bootstrap 的 btn-link
class 就好了:
1
|
|
因為使用的是 button 而不是 input,所以也可以塞 HTML 進去,Icon 就可以正常運作了,使用跟 link_to 一樣的方式丟入 block:
1 2 3 |
|
1 2 3 4 5 6 7 8 9 10 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
|
這邊我把會用到的 code 總結起來,把這些 code 貼到 application_helper.rb
和 application.js
裡面,接著把 link_to 改成 button_link_to,再修一下 style 就可以了!
1 2 3 4 5 6 7 8 9 10 11 12 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
|
Filepicker 是一個非常好用的 File upload service,它可以讓你用簡單的 Javascript,就能做出超好用的圖片上傳,Backend 完全不用寫 Code,就可以讓使用者把圖片傳到 S3 上,詳細的介紹可以參考官網,這篇主要介紹 Filepicker 安全性問題。
Filepicker 只要簡單的一小段 code,就可以讓使用者挑選檔案,並傳到 S3:
1 2 3 4 5 6 7 8 9 |
|
但如果稍微想一下,就會發現 maxSize 和 path 都寫在前端,那如果稍微懂點 Javascript 的使用者,把這兩個變數塞別的數值進去,那他就可以傳任意大小的檔案到任意的路徑。
Filepicker 提供一個 Security 機制,可以避免這個問題,流程如下:
App Secret
policy
,並用 Base64 加密。App Secret
加密 policy
,產生出 signature
policy
和 signature
做驗證。但是官網提供的 Security文件 是用 python 做範例,這邊我們用 ruby 來一步一步教學。
App Secret
到官網後台的左邊選單 App Secret
處,就可以申請一個 Secret:
注意,上面的 Use Security
勾選以後,前端送出的 request 就全部都要送 policy 和 signature,不然會失敗。
policy
Policy 就是定義使用者可以用哪些功能、上傳多大的檔案、上傳路徑為何 …,詳細的 options 可以參考官網文件。
用 Ruby 先定義簡單的 policy:
1 2 3 4 5 6 |
|
接著用 Base64 幫 policy 加密:
1 2 |
|
有了 encoded_policy 和 app secret 就能產生 signature
1 2 |
|
Filepicker 會檢查加密後的 policy 和 Signature 是否一致,而且只有我們和 Filepicker 才知道 App Secret
是什麼,第三方如果沒有 App Secret 是沒辦法產生出 Signature 的。
接著就可以把產生出來的 signature 和 encoded_policy 塞進 Javascript:
1 2 3 4 5 6 7 8 9 10 11 |
|
我們把 Server side Policy 的 maxSize 設成 1kb:
1 2 3 4 5 |
|
在 Javascript 那邊假裝惡意使用者,把 maxSize 設成 10mb:
1 2 3 4 5 6 7 8 9 10 11 |
|
接著上傳一個超過 1kb 的檔案,可以看到錯誤訊息:
用了 Security 以後,就可以對網站不一樣的使用者,做不一樣的權限控管,未付費會員不能上傳檔案,因此就不產生 signature 給他,以及各種 User 檔案上傳大小限制之類的。不會因為是寫在 Javascript,而被輕鬆破解。
]]>