最近機器人學的有點煩，有些概念有點難了解， 想起之前還有這麼點花活，就拾起來看看。
Web安全基礎
JavaScript的實作包括以下3個部分：
1）核心文法：描述了JS的文法和基本對象。
2）文檔對象模型 （DOM）：處理網頁内容的方法和接口
3）浏覽器對象模型（BOM）：與浏覽器互動的方法和接口。
03-00 概述
03-00-1 在哪些地方可以運作Javascript？
-
将JS寫在HTML的<script></script>标簽之間
如：
1 <html> 2 <head> 3 <title>web安全</title> 4 </head> 5 <body> 6 <p id="CD"> 7 I'm Clivia Du! 8 </p> 9 <script> 10 function changetext(id) 11 { 12 id.innerHTML="Thanks!" 13 } 14 </script> 15 <h1 onclick="changetext(this)"> 16 請點選此處 17 </h1> 18 </body> 19 </html> -
把代碼直接寫到HTML的事件屬性中。
比如上文中的onclick=“xxxxx”
效果是點選“請點選此處”後，會變成“Thanks”
- 浏覽器的JS控制台中，可以執行JS代碼；如在Edge中，Ctrl+shift+J(Windows+Linux)；即可打開。
03-00-2JavaScript文法是否複雜？
JavaScript遵循ECMAScript标準，ECMA包含了文法規範等等。文法比較簡單，借用了C和Java的文法。
03-00-3 除了之前提到的動态效果，JS還用來做什麼？
來看03-01DOM👇
DOM和BOM相當于人的兩隻手，DOM控制HTML，BOM控制浏覽器。
03-01 DOM
當網頁被加載時，浏覽器會建立頁面的文檔對象模型（Document Object Model）。HTML DOM 模型被構造為對象的樹：
通過可程式設計的對象模型，JavaScript 獲得了足夠的能力來建立動态的 HTML。
那麼在HTML源碼已經完成的情況下，我們如果想在頁面操作HTML該怎麼辦？
這時候就需要用到JavaScript的HTML DOM函數，DOM是文本的一個對象模型。現在就來看一看具體是怎麼操作的。
03-01-1 查找元素：如何擷取一個HTML元素？
-
擷取元素
getElementById();通過ID擷取元素
（注意是aid的I，不是L，不是1）
-
擷取元素内容
.innerHTML：擷取元素内容
1 <html>
2 <head>
3 <title>web安全</title>
4 </head>
5 <body>
6 <p id="CD">
7 HELLO WORLD!
8 </p>
9 <script>
10 x = document.getElementById("CD");
11 alert("id 為 CD 元素的文本是"+x.innerHTML);
12 </script>
13 </body>
14 </html> PS：注意其中的alert方法，是在JS中表示彈出一個提示欄，可以用來展示資訊。
另外，我們還可以通過标簽名、類名查找HTML元素。
- 标簽名getElementsByTagName：
附上一張運作截圖，為了圖友善就在菜鳥上做的。1 <html> 2 <head> 3 <title>Web安全 4 </title> 5 </head> 6 <body> 7 <div id="main"> 8 <p> DOM</p> 9 <p>該例展示了 <b>getElementsByTagName</b> 方法</p> 10 </div> 11 <script> 12 var x=document.getElementById("main"); 13 var y=x.getElementsByTagName("p"); 14 document.write('id="main"元素中的第一個段落為：' + y[0].innerHTML); 15 </script> 16 17 </body> 18 </html>CTF入門學習5-> 前端JavaScript基礎 - 類名 getElementsByClassName：
CTF入門學習5-> 前端JavaScript基礎
03-01-2 如何修改一個HTML元素内容？
-
擷取元素
getElementByld();通過Id擷取元素
-
擷取元素内容
.innerHTML;通過Id擷取元素，并通過指派“=”進行修改。
1 <html>
2 <head>
3 <title>web安全</title>
4 </head>
5 <body>
6 <p id="CD">
7 HELLO WORLD!
8 </p>
9 <script>
10 x = document.getElementById("CD");
11 x.innerHTML=("改變！");
12 </script>
13 </body>
14 </html> 03-1-3 建立如何建立動态的HTML内容？
我們可以使用document.write()；可以直接寫到html頁面當中。
例如：
1 <html>
2 <head>
3 <title>web安全</title>
4 </head>
5 <body>
6 <p id="CD">
7 Hello World!
8 </p>
9 <script>
10 x = document.getElementById("CD");
11 document.write(Date());
12 </script>
13 </body>
14 </html> 通過document.write(Date())，寫入了目前時間，運作效果如下：
下面我們還可以通過控制台來直接寫入元素，進入https://home.cnblogs.com/blog/；打開控制台，我們輸入：
document.write(Date()); 至于上面的Tracking，是浏覽器跟蹤阻止了對URL存儲的通路，是一個浏覽器機制。目前其機制我們不做了解。
可以看到頁面出現了我們write的内容。
下面我們可以結合之前講過的html的架構iframe來試一試。
iframe是一個内聯架構，能夠将另一個HTML頁面嵌入到目前頁面中。
我們在https://home.cnblogs.com/blog打開控制台：
輸入：
document.write("<iframe src = 'https://www.cnblogs.com/Roboduster/'></iframe>") 可見架構裡出現預期效果，框裡出現了這個URL所指的頁面。
至于為什麼會有這麼多報錯？
是因為，我們使用的是HTTPS協定，這與HTTP又有所不同，前者是安全的HTTP（HTTP over Secure Socket Layer），是以安全為目标的 HTTP 通道，是以在 HTTPS 承載的頁面上不允許出現 http 請求，一旦出現就是提示或報錯：
Mixed Content: The page at ‘https://www.taobao.com/‘ was loaded over HTTPS, but requested an insecure image ‘http://g.alicdn.com/s.gif’. This content should also be served over HTTPS.協定一樣時是不會報錯的（這裡是因為後者部落格頁面引用了很多http的檔案是以報錯）
此外解決這個問題，我們可以強制将http更新為https，這個我目前還沒有深入了解。
參考：
- https頁面 和 http請求的問題
- https的頁面内嵌入http頁面報錯的問題
是以我們可以在https頁面打開https試一下:
在https://home.cnblogs.com/blog打開https://leetcode-cn.com/u/zzrs123/，我的力扣，可見這種協定不相容消失了，出現了理想的效果。
發現好了很多，報錯是因為浏覽器工具的問題。
03-1-4 如何讓頁面增加互動？
學習一下如何調用JavaScript的函數進行頁面的簡單動态。
1 <html>
2 <head>
3 <title>web安全</title>
4 </head>
5 <body>
6 <p id="CD">
7 HELLO WORLD!
8 </p>
9 <script>
10 function changetext(id)
11 {
12 id.innerHTML="Thanks!";
13 }
14 </script>
15 <h1 onclick="changetext(this)">
16 請點選
17 </h1>
18 </body>
19 </html> 效果：點選“請點選”，會改變成“Thanks！”
以上使用JavaScript通路和操作HTML就是JavaScript DOM的操作。DOM就像是連結Web和程式設計語言的一個橋梁(HTML的的程式設計接口)。
03-02 BOM
講BOM有一篇好文：JavaScript BOM(浏覽器對象模型)
BOM：Browser Object Model 是浏覽器對象模型。BOM提供了獨立與内容的、可以與浏覽器視窗進行互動的對象結構，BOM由多個對象構成，其中代表浏覽器視窗的window對象是BOM的頂層對象，其他對象都是該對象的子對象。
03-02-1 彈窗
- 警告彈窗：alert()函數
- 确認彈窗：confirm()函數
- 提示彈窗：prompt()函數
經常用于簡單的調試和資訊展示。比如XSS漏洞的測試。
03-02-2 Cookie擷取
在Web通信基礎 | URL & HTTP一文的HTTP是什麼中，我曾經把Cookie比方成
HTTP包含的Cookie就相當于能夠進入我們小區的憑證
那Cookie是什麼呢？是伺服器發送給使用者的一小段文本資訊，用來辨認使用者狀态。再打個更合适的比方：
還拿外賣小哥來舉例，第一次進入小區，（這樣假設）我們要告訴物業他可以進入，并假設給了他一個憑證，第二次再來時，就能夠識别出這個外賣并準許進入（/辦事）。
常見場景是使用者輸入使用者名和密碼成功登入網站後，網站會生成一個Cookie給使用者，當作使用者憑證，這個Cookie就相當于一個鑰匙，我們每次通路該網站都會帶上這個Cookie。
- 擷取Cookie：document.cookie
- 寫入Cookie：document.cookie = "寫入值"，再擷取Cookie時就會看到新增加的這個寫入值。但這個寫入值時發不到伺服器的。
03-02-3 其他操作
- 擷取螢幕資訊，(window.)screen
- 擷取控制目前使用者的URL：(window.)location
- 重新整理到新的頁面：(window.)location.href="新url"
-
擷取浏覽器資訊：
(window.)navigator
(window.)navigator.userAgent
- 操作浏覽器視窗：window open("new url"),close
稍作總結，類比DOM是頁面内容HTML與Js的接口，BOM就像是連結浏覽器和程式設計語言js的一個橋梁(浏覽器的的程式設計接口)。