$30 off During Our Annual Pro Sale. View Details »

spa需注意的議題.pdf

blue chen
October 28, 2013
650

 spa需注意的議題.pdf

blue chen

October 28, 2013
Tweet

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