spa需注意的議題.pdf

Transcript

1. SPA需注意的議題
   AngularJS.tw第六次聚會
   

   View Slide

2. Senior Web Developer at YouMeb
   I am Blue
   

   View Slide

3. 為何要用SPA思維開發？
   SPA關注議題
   

   View Slide

4. View Slide

5. 因為懶
   所以我們嘗試把事情變的更簡單
   

   View Slide

6. Back-end ,
   MVC
   I hate
   

   View Slide

7. 不想每次做新專案都要重覆貼⼀一堆相同的程式碼
   模組化
   

   View Slide

8. YouMebJS
   The PC system framework
   P: Package
   C: Controller
   

   View Slide

9. 跟Designers合作遇到的困難
   當Front-end⽤用php,jade,ejs
   

   View Slide

10. 並不是每⼀一個Designer都會Coding
    會⽤用html+css就已經很厲害了 ....
    

    View Slide

11. 我們⼯工程師就要幫他轉成php,ejs,jade...
    每⼀一次Designer寫好html+css
    

    View Slide

12. 他們也希望⾃自⼰己寫的html+css也能夠直接看到成果
    對於Designer來說
    

    View Slide

13. 1.盡可能減少request次數降低傳輸成本是重要的議題
    對於系統架構來看
    2.可以很輕鬆的去做測試
    

    View Slide

14. 整體⽽而⾔言，使⽤用SPA能達到：
    能夠模組化開發
    能夠減少雙⽅方⼯工程上重疊時間
    能夠減少伺服器傳輸成本
    能夠好測試
    

    View Slide

15. 如何快速建立SPA？
    SPA關注議題
    

    View Slide

16. $npm install -g yo generator-angualr
    

    View Slide

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 _______
    

    View Slide

18. yeoman教學：
    http://begeeben.github.io/slides/manage-frontend-project-with-yeoman/
    

    View Slide

19. 假如你真的很想⽤用ui-router
    ⼜又不想每次yo angualr之後還要修改⼀一堆東⻄西
    (bower install ui-router,setting config....Geight)
    

    View Slide

20. $npm install -g generator-angualr-ui-router
    https://github.com/iamblue/generator-angular-ui-router
    歡迎Pull Request
    

    View Slide

21. SPA Header設計
    SPA關注議題
    

    View Slide

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:
    

    View Slide

23. W3C有制定了很多關於header的setting
    http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html
    

    View Slide

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
    });
    

    View Slide

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
    

    View Slide

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 封裝好
    

    View Slide

27. route
    SPA關注議題
    

    View Slide

28. 敬請期待12⽉月分享
    route , SEO
    

    View Slide

29. 常見安全性議題
    SPA關注議題
    

    View Slide

30. Browser(client端）安全性議題
    SPA關注議題
    

    View Slide

31. 跨網站指令碼（Cross-site scripting，通常簡稱為XSS或跨站
    指令碼或跨站指令碼攻擊）是⼀一種網站應⽤用程式的安全漏洞攻
    擊，是代碼注⼊入的⼀一種。它允許惡意使⽤用者將程式碼注⼊入到網⾴頁
    上，其他使⽤用者在觀看網⾴頁時就會受到影響。這類攻擊通常包含
    了HTML以及使⽤用者端腳本語⾔言。
    wiki:
    { }
    XSS
    Browser上的安全性議題：
    

    View Slide

32. XSS
    http://jsfiddle.net/ZfCbN/
    http://hack.g0v.tw/people
    Browser上的安全性議題：
    {{{}.toString.constructor('alert(1)')()}}
    Angular的model:
    

    View Slide

33. ng-bind-html-unsafe
    ng-bind
    ng-bind-html include $sanitize
    $scope.imgurl = ‘’;
    
    Output: 字串
    Output: 圖⽚片
    因為你相信這段程式碼，所以賦予直接執⾏行的需求
    $scope.imgurl = ‘’;
    
    

    View Slide

34. Sanitize
    http://docs.angularjs.org/api/ngSanitize
    悲劇!!!
    $scope.imgurl = ‘’;
    
    ng-bind-html
    

    View Slide

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)
    

    View Slide

36. ng-bind-html-unsafe
    ng-bind
    ng-bind-html include $sanitize
    $scope.imgurl = ‘’;
    
    Output: 字串
    Output: 圖⽚片
    因為你相信這段程式碼，所以賦予直接執⾏行的需求
    $scope.imgurl = ‘’;
    
    

    View Slide

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
    

    View Slide

38. Server端安全性議題
    SPA關注議題
    

    View Slide

39. ⽤用傳統server驗證遇到的安全問題XSRF， 當cracker熟悉某
    網站api時...
    http://test.tw/user2131323123/post/2013_10_28a/delete
    user Id 把它的某篇⽂文章刪除
    

    View Slide

40. user2131323123
    這是標題標題
    這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容
    這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容
    這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容
    這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容
    這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容
    這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容
    這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容 這是內容
    這是內容 這是內容 這是內容 這是內容 這是內容
    點我看詳情
    cracker可以設計⼀一個⾴頁⾯面讓 user2131323123
    他開啟網⾴頁
    http://test.tw/user2131323123/post/2013_10_28a/delete
    傳統的驗證，⽐比如說只驗session.cookie...因為user這時已登⼊入，完全通過驗證，當cracker故意
    讓user無意間執⾏行這些api時，就會產⽣生有害結果。
    你無法⾼高度確認這隻API請求是否來⾃自user
    

    View Slide

41. CSRF解決⽅方案：
    設計演算法hash⼀一組數字，讓每次api request的時候不只驗
    證cookie/session也要驗證這組數字
    Browser
    (login page)
    Server
    cookie/session
    hash(numer)
    hash(numer)
    API request後的結果
    

    View Slide

42. 但這樣，每⼀一次API都要重新跑這樣的流程很⿇麻煩
    

    View Slide

43. 現今常⽤用的API驗證模式
    http://en.wikipedia.org/wiki/Cryptographic_nonce
    

    View Slide

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即可
    

    View Slide

45. acess token 要常更新，更新週期短
    這樣的架構達到⾼高安全性必須：
    client nonce 是障眼法
    除⾮非⼀一種狀況會有安全疑慮
    使⽤用者access token被竊取且剛好在更新週期內被惡意使⽤用
    

    View Slide

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
    

    View Slide

47. $httpProvider.responseInterceptors.push( );
    

    View Slide

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);
    

    View Slide

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為....
    

    View Slide

50. ng模組化趨勢跟方向
    SPA關注議題
    

    View Slide

51. Html +css 模組化
    ng-hide
    ng-show
    ng-class
    ng-animate
    AngularJS⾃自⾝身的模組化api
    
    
    $Scope.showit =true;
    http://slid.es/gsklee/animation-in-angularjs
    但是 ... 這些還不夠!
    ng-include
    Include Html Template
    ng-view
    

    View Slide

52. View Slide

53. Hello I am Blue
    

    View Slide

54. Hello I am Blue
    No...You are Red
    

    View Slide

55. Oops...
    過去要解決這樣的問題
    ...
    Hello I am Blue
    No...You are Red
    

    View Slide

56. View Slide

57. Html+JS(邏輯端) 模組化
    service
    factory
    provider
    constant
    value
    DI
    Directive
    { }
    { }
    宣告 使⽤用的⽅方法
    

    View Slide

58. https://github.com/iamblue/ngApi
    ngApi
    

    View Slide

59. 社群預告
    SPA關注議題
    

    View Slide

60. 關於SPA還有許多重要議題
    SEO
    Cache
    Mobile web 優化
    敬請期待12⽉月分享
    

    View Slide

61. THANK YOU
    

    View Slide