spa需注意的議題.pdf

Transcript

1. SPA需注意的議題 AngularJS.tw第六次聚會
2. Senior Web Developer at YouMeb I am Blue
3. 為何要用SPA思維開發？ SPA關注議題
5. 因為懶 所以我們嘗試把事情變的更簡單
6. Back-end , MVC I hate
7. 不想每次做新專案都要重覆貼⼀一堆相同的程式碼 模組化
8. YouMebJS The PC system framework P: Package C: Controller
9. 跟Designers合作遇到的困難 當Front-end⽤用php,jade,ejs
10. 並不是每⼀一個Designer都會Coding 會⽤用html+css就已經很厲害了 ....
11. 我們⼯工程師就要幫他轉成php,ejs,jade... 每⼀一次Designer寫好html+css
12. 他們也希望⾃自⼰己寫的html+css也能夠直接看到成果 對於Designer來說
13. 1.盡可能減少request次數降低傳輸成本是重要的議題 對於系統架構來看 2.可以很輕鬆的去做測試
14. 整體⽽而⾔言，使⽤用SPA能達到： 能夠模組化開發 能夠減少雙⽅方⼯工程上重疊時間 能夠減少伺服器傳輸成本 能夠好測試
15. 如何快速建立SPA？ SPA關注議題
16. $npm install -g yo generator-angualr
17. $npm yo angualr 建⽴立⼀一個Angualr SPA $grunt server yeoman開發模式(LiveReload) yeoman產品線模式 $grunt build Minify your file(css, html ,js...) $grunt Include other js lib bower install _______
18. yeoman教學： http://begeeben.github.io/slides/manage-frontend-project-with-yeoman/
19. 假如你真的很想⽤用ui-router ⼜又不想每次yo angualr之後還要修改⼀一堆東⻄西 (bower install ui-router,setting config....Geight)
20. $npm install -g generator-angualr-ui-router https://github.com/iamblue/generator-angular-ui-router 歡迎Pull Request
21. SPA Header設計 SPA關注議題
22. GET /issue/?userid=234234 HTTP/1.1 HOST:127.0.0.1 User-Agent:Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-CN; rv:1.9.0.8) Gecko/2009032609 Firefox/3.0.8 Connection: Keep-Alive POST /index.php HTTP/1.1(CRLF) HOST:127.0.0.1 User-Agent:Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-CN; rv:1.9.0.8) Gecko/2009032609 Firefox/3.0.8 Content-Type: application/x-www-form-urlencoded Content-Length:22(CRLF) Connection: Keep-Alive Cache-Control:no-cache(CRLF) (CRLF) user=234&pws=hihing GET: POST:
23. W3C有制定了很多關於header的setting http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html
24. 如果你想要客製化你⾃自⼰己的Header $httpProvider.defaults.headers.common $httpProvider.defaults.headers.get $httpProvider.defaults.headers.post 讓全部程式預設都適⽤用(config) $http({ method: string, url: string, params: object, data: string or object, headers: object, cache: boolean or Cache object, timeout: number, withCredentials: boolean });
25. Angular $http在JSON做了⼀一些事情.... 亦即 如果你故意在JSON前加⼀一些奇怪的符號 ))[‘[‘kerker’,‘yoyo’] Angular會先把前⾯面的過濾掉： [‘kerker’,‘yoyo’] 這種case很常在設計GET api時出現 http://www.explainjs.com/explain?src=http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.0.8%2Fangular.js
26. .factory('newPost',function($resource){ return $resource("http://127.0.0.1:port/api/buildpage" , {port: ':3000'}); }) newPost.save({ 'title': this.newPostTitle, 'content': this.newPostContent, 'tag':this.newPostTag },function(e) { console.log(e); },function(response){ }) controller A newPost.get({ },function(e) { },function(response){ }) controller B $resouce把$http 封裝好
27. route SPA關注議題
28. 敬請期待12⽉月分享 route , SEO
29. 常見安全性議題 SPA關注議題
30. Browser(client端）安全性議題 SPA關注議題
31. 跨網站指令碼（Cross-site scripting，通常簡稱為XSS或跨站 指令碼或跨站指令碼攻擊）是⼀一種網站應⽤用程式的安全漏洞攻 擊，是代碼注⼊入的⼀一種。它允許惡意使⽤用者將程式碼注⼊入到網⾴頁 上，其他使⽤用者在觀看網⾴頁時就會受到影響。這類攻擊通常包含 了HTML以及使⽤用者端腳本語⾔言。 wiki: { } XSS Browser上的安全性議題：
32. XSS http://jsfiddle.net/ZfCbN/ http://hack.g0v.tw/people Browser上的安全性議題： {{{}.toString.constructor('alert(1)')()}} Angular的model:
33. ng-bind-html-unsafe ng-bind ng-bind-html include $sanitize $scope.imgurl = ‘<img src=”/img/youmeb.png”/>’; <div ng-bind="imgurl"></div> Output: 字串 Output: 圖⽚片 因為你相信這段程式碼，所以賦予直接執⾏行的需求 $scope.imgurl = ‘<img src=”/img/youmeb.png”/>’; <div ng-bind-html="imgurl"></div>
34. Sanitize http://docs.angularjs.org/api/ngSanitize 悲劇!!! $scope.imgurl = ‘<img src=”/img/youmeb.png”/>’; <div ng-bind-html="imgurl"></div> ng-bind-html
35. $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|file|blob):|data:image\//); Sanitize 預設只有幾個html tag可以通過 如果你想要做⼀一些上傳檔案.視訊....html5 API 東⻄西就會被擋掉 ⽩白名單 https://github.com/angular/angular.js/issues/3889 (Setting at config)
36. ng-bind-html-unsafe ng-bind ng-bind-html include $sanitize $scope.imgurl = ‘<img src=”/img/youmeb.png”/>’; <div ng-bind="imgurl"></div> Output: 字串 Output: 圖⽚片 因為你相信這段程式碼，所以賦予直接執⾏行的需求 $scope.imgurl = ‘<img src=”/img/youmeb.png”/>’; <div ng-bind-html="imgurl"></div>
37. ng-bind-html-unsafe was remove at angular 1.2+ If you want to do same as this Try $sce http://docs.angularjs.org/api/ng.$sce http://stackoverflow.com/questions/18340872/how-do-you-use-sce- trustashtmlstring-to-replicate-ng-bind-html-unsafe-in-angu
38. Server端安全性議題 SPA關注議題
39. ⽤用傳統server驗證遇到的安全問題XSRF， 當cracker熟悉某 網站api時... http://test.tw/user2131323123/post/2013_10_28a/delete user Id 把它的某篇⽂文章刪除
40. user2131323123 這是標題標題 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 點我看詳情 cracker可以設計⼀一個⾴頁⾯面讓 user2131323123 他開啟網⾴頁 http://test.tw/user2131323123/post/2013_10_28a/delete 傳統的驗證，⽐比如說只驗session.cookie...因為user這時已登⼊入，完全通過驗證，當cracker故意 讓user無意間執⾏行這些api時，就會產⽣生有害結果。 你無法⾼高度確認這隻API請求是否來⾃自user
41. CSRF解決⽅方案： 設計演算法hash⼀一組數字，讓每次api request的時候不只驗 證cookie/session也要驗證這組數字 Browser (login page) Server cookie/session hash(numer) hash(numer) API request後的結果
42. 但這樣，每⼀一次API都要重新跑這樣的流程很⿇麻煩
43. 現今常⽤用的API驗證模式 http://en.wikipedia.org/wiki/Cryptographic_nonce
44. Server Server nonce Browser hash(Server nonce , Clien nonce , password) (login page) username access token step1 step2 step3 check step4 hash(Server nonce , Clien nonce , password) hash(Server nonce , Clien nonce , password) 之後每⼀一次request只要丟回access token即可
45. acess token 要常更新，更新週期短 這樣的架構達到⾼高安全性必須： client nonce 是障眼法 除⾮非⼀一種狀況會有安全疑慮 使⽤用者access token被竊取且剛好在更新週期內被惡意使⽤用
46. .run(function($http,$cookies,$rootScope,$location){ }); .config(function(){ }); //Use this method to register work which needs to be performed on module loading. 因此，跟系統有關的相關服務配置都放在這ex. 判斷是否login only provider,constant
47. $httpProvider.responseInterceptors.push( );
48. var interceptor = function($rootScope,$location,$q){ var success = function(response){ if(sessionStorage.authenticated == 'true'){ if(sessionStorage.lasturl && $location.path() != '/login'){ $location.path(sessionStorage.lasturl); } if($location.path() == '/login'){ $location.path(sessionStorage.lasturl); } }else{ $location.path('/login'); } return response } var error = function(response){ if (!sessionStorage.authenticated && sessionStorage.authenticated != true){ delete sessionStorage.authenticated; $location.path('/login'); } return $q.reject(response) } return function(promise){ return promise.then(success, error) } }; $httpProvider.responseInterceptors.push(interceptor);
49. .run(function($http,$cookies,$rootScope,$location){ $rootScope.adminuser = sessionStorage.username; }); .config(function(){ }); //Use this method to register work which needs to be performed on module loading. //Use this method to register work which should be performed when the injector is done loading all modules.通常都是最後⼀一個開始執⾏行 因此，跟系統有關的相關服務配置都放在這ex. 判斷是否login only provider,constant not provider 常⾒見的配置：因為login所以我們的Username為....
50. ng模組化趨勢跟方向 SPA關注議題
51. Html +css 模組化 ng-hide ng-show ng-class ng-animate AngularJS⾃自⾝身的模組化api <div ng-show=”showit”></div> <div ng-class=”showit? ‘see ‘:’ ’”></div> $Scope.showit =true; http://slid.es/gsklee/animation-in-angularjs 但是 ... 這些還不夠! ng-include Include Html Template ng-view
53. Hello I am Blue
54. Hello I am Blue No...You are Red
55. Oops... 過去要解決這樣的問題 <iframe>...</iframe> Hello I am Blue No...You are Red
57. Html+JS(邏輯端) 模組化 service factory provider constant value DI Directive { } { } 宣告 使⽤用的⽅方法
58. https://github.com/iamblue/ngApi ngApi
59. 社群預告 SPA關注議題
60. 關於SPA還有許多重要議題 SEO Cache Mobile web 優化 敬請期待12⽉月分享
61. THANK YOU