CTF入門學習5-> 前端JavaScript基礎

climerecho發表於2022-02-08
前端JavaScript

Web安全基礎

JavaScript的實現包括以下3個部分：

1）核心語法：描述了JS的語法和基本物件。

2）文件物件模型 （DOM）：處理網頁內容的方法和介面

3）瀏覽器物件模型（BOM）：與瀏覽器互動的方法和介面。

03-00 概述

03-00-1 在哪些地方可以執行Javascript？

  1. 將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>

  2. 把程式碼直接寫到HTML的事件屬性中。

    比如上文中的onclick=“xxxxx”

    效果是點選“請點選此處”後，會變成“Thanks”

  3. 瀏覽器的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 模型被構造為物件的樹：

DOM HTML tree

通過可程式設計的物件模型，JavaScript 獲得了足夠的能力來建立動態的 HTML。

那麼在HTML原始碼已經完成的情況下，我們如果想在頁面操作HTML該怎麼辦？

這時候就需要用到JavaScript的HTML DOM函式，DOM是文字的一個物件模型。現在就來看一看具體是怎麼操作的。

03-01-1 查詢元素：如何獲取一個HTML元素？

  1. 獲取元素

    getElementById();通過ID獲取元素

    （注意是aid的I，不是L，不是1）

  2. 獲取元素內容

    .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元素。

  1. 標籤名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>

    附上一張執行截圖，為了圖方便就在菜鳥上做的。

  2. 類名 getElementsByClassName：　　

 

 

 

 

03-01-2 如何修改一個HTML元素內容？

  1. 獲取元素

    getElementByld();通過Id獲取元素

  2. 獲取元素內容

    .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，這個我目前還沒有深入瞭解。

參考：

  1. https頁面 和 http請求的問題

  2. 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的頂層物件，其他物件都是該物件的子物件。

img

img

03-02-1 彈窗

  1. 警告彈窗：alert()函式

  2. 確認彈窗：confirm()函式

  3. 提示彈窗：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的一個橋樑(瀏覽器的的程式設計介面)。

 

相關文章