Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

10. 進入瀏覽器

39 views

Published on

script標籤基本特性
認識async與defer
初探同源策略與CORS
認識ES6前的模組管理
使用ECMAScript模組

Published in: Technology
  • Be the first to comment

  • Be the first to like this

10. 進入瀏覽器

  1. 1. 10.進入瀏覽器 • 學習目標 – script標籤基本特性 – 認識async與defer – 初探同源策略與CORS – 認識ES6前的模組管理 – 使用ECMAScript模組 2
  2. 2. 初探script標籤 • prompt()與alert()是瀏覽器上全域物 件提供的函式 • 在瀏覽器中,全域物件就是window物件, 代表瀏覽器視窗,為Window的實例 3
  3. 3. • 現代Web應用程式,建議使用UTF-8編碼 4
  4. 4. • HTML4規範了script標籤的type屬性, 必須設定它的值 • type在HTML5中為選用,若沒有指定,預 設為"text/javascript“ – "module" – "text/jscript" – "text/vbscript" – 其他自訂值 5
  5. 5. 文件解析與script標籤 • 在瀏覽器載入HTML檔案後,必須先解析所 有HTML標籤 • 建立各標籤對應的DOM(Document Object Model)物件並組成DOM樹 • 最後依DOM樹結構來呈現畫面 6
  6. 6. • 預設情況下,瀏覽器在遇到script標籤時, 會停止文件解析,先執行完標籤間定義的 JavaScript,再繼續之後的文件解析 7
  7. 7. • 在過去,JavaScript程式碼經常將script 放在head標籤之間 8
  8. 8. • 瀏覽器處理head間的JavaScript時,還沒 有解析body標籤,試圖操作body中標籤對 應的DOM物件就會出錯 9
  9. 9. • 可以將script標籤放在整份HTML文件之 後,</body>之前 10
  10. 10. • window.onload事件,在HTML網頁的 「全部資源」載入後會發生 11
  11. 11. • 「全部資源」載入不單只是DOM樹建立完 成,還包含了HTML頁面鏈結的CSS、圖片 等都載入完成 • HTML5標準化了DOMContentLoaded事 件,會在DOM樹建立之後就觸發 12
  12. 12. 開發人員工具 13
  13. 13. 14
  14. 14. 15
  15. 15. 引用.js原始碼 16
  16. 16. 17
  17. 17. 原始碼編碼 • 保持.js原始碼編碼與HTML檔案的編碼一致 • 如果HTML是UTF-8,那麼.js檔案也應該設 為UTF-8 • 瀏覽器會假設HTML與.js編碼兩者是一致的 18
  18. 18. noscript標籤 • 在無法執行 JavaScript 時出現,提供替代 的頁面內容 19
  19. 19. • 引用外部.js檔案,瀏覽器會暫停頁面解析、 「同步地」下載.js檔案,下載完成後執行 程式碼,執行完成後再繼續頁面解析 • HTML5為script標籤增加async與 defer屬性,這兩個屬性只在透過src引 用.js檔案才有作用 20
  20. 20. async屬性 • 只要出現async屬性就可以了 • 「非同步地」下載.js檔案(使用瀏覽器執行緒) • 下載完成前,不阻斷後續資源下載與頁面剖析 • 下載完成,瀏覽器就會暫停頁面剖析, JavaScript引擎執行.js的程式碼後,再繼續處 理頁面剖析 • 執行順序也就無法預測 21
  21. 21. • 如果程式庫檔案容量比較大,然而與初始 頁面處理沒有立即相關性 • 頂層程式碼不多或執行迅速,與其他程式 庫也沒有相依性 • 可以試著在script標籤上設置async屬性, 看看效果是否符合需求 22
  22. 22. defer屬性 • 只要出現defer屬性就可以了 • 瀏覽器會「非同步地」下載.js檔案,不會 阻斷後續資源下載與頁面剖析 • 下載完成後也不會馬上執行程式碼,而是 在DOM樹生成、其他非defer的.js執行完 後,才執行被加上defer屬性的.js • 如果有多個defer屬性的.js,會按照「頁 面上出現的順序」執行 23
  23. 23. • 如果程式庫檔案容量比較大,必須在剖析 完DOM之後執行 • 與其他程式碼間有順序上的相依性 • 就可以試著在script標籤上設置defer屬 性,看看效果是否符合需求 24
  24. 24. 初探安全 • 原始碼中的敏感資訊 • XSS • 認識安全弱點 25
  25. 25. XSS • 如果Web應用程式的輸出中,會包含使用 者的輸入字串,永遠都要假設使用者並不 會輸入你期望的格式 • 請求10.1.5中的hello8.html,輸入「Name: <input>」會如何呢? 26
  26. 26. • HTML5規定,innerHTML被指定的字串若 有script標籤,不會被執行 • 10.1.2的hello3.html,若是在輸入方塊中 鍵入「<script>alert('Hello, XSS')</script>」會如何呢? 27
  27. 27. 認識安全弱點 • OWASP TOP 10 • CWE(Common Weakness Enumeration) • CVE(Common Vulnerabilities and Exposures) 28
  28. 28. 29
  29. 29. • CVE-YYYY-NNNN • 2017年底的CPU「推測執行」 (Speculative execution)安全漏洞 – CVE-2017-5754 – CVE-2017-5753 – CVE-2017-5715 30
  30. 30. 同源策略與CORS • 同源指的是請求的資源與目前文件來源, 具有相同的協定、埠號以及位置 • http://caterpillar.onlyfun.net/ – https://caterpillar.onlyfun.net – http://openhome.cc – http://192.168.0.1 – http://caterpillar.onlyfun.net:8080 31
  31. 31. 同源策略 • 無法取得src為非同源的iframe相關資訊 • 預設也無法以XMLHttpRequest或Fetch API等,請求非同源的資源,瀏覽器會禁止 JavaScript取得結果 32
  32. 32. • 子網域的資源,預設視為非同源 • JavaScript在瀏覽器中,可以透過 document.domain設定子網域為同源 – 可以設為頂層網域,然而不能設其他網域 • 不同來源的.js檔案在HTML頁面中執行時, 是以該HTML頁面來源作為同源依據 33
  33. 33. 簡介CORS • Cross-Origin Resource Sharing • 基於HTTP標頭的跨來源資源共享協議 • 瀏覽器發出非同源的跨域請求時,會附上 HTTP標頭Origin • 伺服端若同意跨域請求,回應中要包含 Access-Control-Allow-Origin標頭,值 可以是*或某一網域名稱 • 瀏覽器收到回應時,若回應中沒有Access- Control-Allow-Origin標頭,或者它的值 既非*也不符合目前文件來源,就不會交出收 到的資源 34
  34. 34. • 遵照CORS – XMLHttpRequest或Fetch API – ECMAScript模組的匯入 – script標籤若設定crossorigin屬性 35
  35. 35. 36
  36. 36. 37
  37. 37. 38
  38. 38. 39
  39. 39. 名稱空間管理 • ES6以後才有了模組語法 40
  40. 40. 物件名稱空間 41
  41. 41. 運用IIFE • 先前例子還是在全域佔用了validate名稱 42
  42. 42. 43
  43. 43. 44
  44. 44. 45
  45. 45. 名稱管理程式 46
  46. 46. 47
  47. 47. 48
  48. 48. 49
  49. 49. 50
  50. 50. 51
  51. 51. 從CommonJS到AMD • 自2005年JavaScript逐漸被人們廣為應用 之後,當年倉促定義的語言特性也因而曝 露出許多缺點 • 在避免全域名稱這方面,也發展出物件階 層、IIFE等各種模式 • 過去許多程式庫上,像是Dojo、YUI、 jQuery等,都可見不同名稱空間管理模式 之實現 52
  52. 52. • 為了在瀏覽器環境之外構築出JavaScript生 態系,2009年1月,Mozilla的開發者Kevin Dangoor發起了ServerJS專案 • JavaScript必須得有個模組的標準規範,同 年九月專案更名為CommonJS,顯示其不 想僅侷促於伺服端的意圖 • Node.js曾經遵循著CommonJS來實現模組 管理 53
  53. 53. • 就Node.js來說,一個.js就是一個模組 54
  54. 54. • 有人試圖將CommonJS的模組規範往前端 推進,希望能一統前端模組管理的混亂 • Node.js的主打特性是非同步,require() 函式在載入模組時卻是同步的 • 這意謂著require()某模組時,會阻斷瀏 覽器對後續頁面的處理 55
  55. 55. • 非同步模組定義AMD(Asynchronous Module Definition) • 定義模組時使用define() • 載入模組時雖然也採用require(),然而 為了不影響頁面的後續處理,載入過程是 非同步 • AMD最為人所知的實現,正是RequireJS 56
  56. 56. script標籤與模組 57
  57. 57. • 預設具有defer的特性 • 引用模組時,.js不能來自本機 58
  58. 58. 59
  59. 59. • 每個模組定義的名稱,僅在模組內可見 60
  60. 60. • type設為"module"並引用外部模組時, 可以附加async屬性 • 如果引用的模組非同源,就會遵守CORS 61
  61. 61. 62
  62. 62. • 支援模組的瀏覽器,會忽略<script nomodule></script> 63
  63. 63. 模組語法入門 64
  64. 64. 65
  65. 65. • import的來源可以使用./開頭指定相對路 徑,或者是以/開頭指定絕對路徑 • 也可以是http://、https://開頭 • 對於非同源的模組來源,必須遵循CORS 66
  66. 66. • 被匯入的模組在解析後,會執行其頂層程 式碼 • 同一模組無論import幾次,都只會下載、 解析、執行一次,不會重複匯入 • 可以為import的名稱取個別名 67
  67. 67. • 模組公開的名稱,都會是Module物件上的 唯讀特性 • import時指定的名稱,相當於const宣告 的名稱 68
  68. 68. 69
  69. 69. 70
  70. 70. 71
  71. 71. • 要公開的名稱必須使用{}包含 • import時必須使用{}表示要匯入的是名稱 72
  72. 72. • export的是變數,不是被export時當時 參考的值 73
  73. 73. • 匯入名稱之後,在目前模組直接公開 74
  74. 74. • 如果打算提供模組的預設公開「值」 • export default公開的是值 75
  75. 75. • 模組可以有多個export,但是只能有一個 export default • export default可以讓模組的客戶端, 在不知道模組中匯出了哪些名稱的情況下, 就能取用模組功能 76
  76. 76. 77
  77. 77. 78
  78. 78. • 此方式並不建議 79
  79. 79. • export default本質上是使用default 作為公開名稱 80

×