整合營銷服務(wù)商

          電腦端+手機端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

          軟件測試 - 查看網(wǎng)頁的HTML源代碼

          在瀏覽器中瀏覽了網(wǎng)頁之后,下一步就是查看其HTML源代碼。盡管這種方法很簡單,但仍然非常值得去做。查看源代碼有兩項作用;它可以幫助你發(fā)現(xiàn)最明顯的安全問題,但最重要的是,它使你能夠為將來的測試建立一個比較基準。對攻擊失敗之前和之后的源代碼進行比較,你就能夠調(diào)整你是輸入,了解到哪些通過了,哪些沒有通過,并再次嘗試。

          解決方案

          我們推薦使用Firefox,你已經(jīng)在2.1節(jié)中學會了它的安裝。首先瀏覽應(yīng)用中你所感興趣的網(wǎng)頁。

          右擊,并選擇“查看源文件”或從菜單欄選擇“查看”→ "源文件"。

          我們推薦Firefox的主要原因是因為它的彩色顯示。如圖3-1所示,使用這種顯示方式,HTML標簽和屬性都要容易理解得多。相比之下,Internet Explorer在記事本中打開網(wǎng)頁。就會難讀得多。

          討論

          作為比較基準,訪問HTML源代碼會非常有幫助。最常見的Web漏洞涉及到向Web應(yīng)用提供惡意輸入以修改HTML源代碼。在測試這些漏洞時,驗證測試通過或失敗的最簡單的方法就是檢查源代碼是否被惡意更改。

          當心一切未經(jīng)更改就寫進源代碼中的輸入。我們將在第8章討論輸入驗證,然后許多應(yīng)用根本就不對輸入進行驗證。在開始討論更加復(fù)雜的內(nèi)容之前,不妨在源代碼中搜索你剛剛提供的輸入。然后,使者將可能的危險值作為輸入,比如HTML標簽或JavaScript,并注意它是否未經(jīng)修改就直接顯示在源代碼中。如果是這樣的話,那么這就是個警示信號。

          注意,你可以像搜索任何其他Firefox頁面那樣搜索HTML源代碼(根據(jù)具體情況,使用Ctrl+F或(Windows徽標鍵)+F)。

          在以后的秘訣和章節(jié)中,我們將使用工具來自動搜索、解析和比較源代碼。記住基本要點;通常,可以通過重復(fù)地手動檢查源代碼以檢查怎樣做才能使它通過篩選程序或編碼找出漏洞。

          注意:你在這里看到的靜態(tài)源代碼不能反映JavaScript或AJAX功能所做的任何更改。

          搜索微信公眾號:TestingStudio霍格沃茲的干貨都很硬核

          速生成 Html5 骨架

          在 Html 文件中輸入 html:5 按下回車鍵,可快速生成 HTML5 頁面模板:

          <!DOCTYPE html>
          <html lang="en">
            <head>
              <meta charset="UTF-8" />
              <meta name="viewport" content="width=device-width, initial-scale=1.0" />
              <title>Document</title>
            </head>
            <body></body>
          </html>

          html:5

          父子關(guān)系快速構(gòu)建

          在 html 文件中輸入 div#id>ul.list>li.item*5 按下回車鍵,可快速生成父子關(guān)系的結(jié)構(gòu):

          <div id="id">
            <ul class="list">
              <li class="item"></li>
              <li class="item"></li>
              <li class="item"></li>
              <li class="item"></li>
              <li class="item"></li>
            </ul>
          </div>

          父子關(guān)系構(gòu)建

          多個相同標簽

          重復(fù)元素: 使用 * 加上數(shù)字來創(chuàng)建多個相同的標簽。例如,p*3 后按 Tab 會產(chǎn)生三個 <p> 段落標簽。

          <p></p>
          <p></p>
          <p></p>

          類與 ID 的添加

          • : 在標簽名后加 . 再加上類名。如 div.container 生成帶有類 container 的 <div> 。
          <div class="container"></div>
          • ID: 使用 # 加上 ID 名。如 div#main 生成 ID 為 main 的 <div> 。
          <div id="main"></div>

          屬性快速插入

          • 屬性賦值: 在標簽后用方括號 [attr=value] 插入屬性。例如,a[href=https://example.com]。
          <a href="https://example.com"></a>

          組合使用

          • 復(fù)合示例: 結(jié)合上述技巧,可以創(chuàng)建復(fù)雜結(jié)構(gòu)。比如,nav>ul>li.item$*4>a[href=#]{Item $} 會生成一個導(dǎo)航欄,包含 4 個列表項,每個列表項都是一個鏈接,鏈接文本分別為 "Item 1" 到 "Item 4",且每個鏈接的 href 屬性指向不同的 ID。
          <nav>
            <ul>
              <li class="item1"><a href="#">item 1</a></li>
              <li class="item2"><a href="#">item 2</a></li>
              <li class="item3"><a href="#">item 3</a></li>
              <li class="item4"><a href="#">item 4</a></li>
            </ul>
          </nav>

          自定義 snippets(代碼片段)

          • 高級結(jié)構(gòu): 如果有特定的復(fù)雜結(jié)構(gòu)經(jīng)常使用,可以創(chuàng)建自定義的 Emmet snippets。轉(zhuǎn)到 "文件" > "首選項" > "用戶代碼片段",選擇或創(chuàng)建 HTML 片段文件,定義自己的縮寫和展開結(jié)構(gòu)。

          Emmet 命令

          • Emmet: Wrap with Abbreviation: 選中現(xiàn)有代碼后,使用此命令(通過命令面板 Ctrl+Shift+P / Cmd+Shift+P 調(diào)出并搜索 “Wrap with Abbreviation” ),可以快速將選中內(nèi)容包裹在指定標簽內(nèi)。

          個主要的互聯(lián)網(wǎng)瀏覽器都允許用戶查看任何網(wǎng)頁的HTML(超文本標記語言)源代碼。以下部分包含有關(guān)在每個主要瀏覽器中查看源代碼的多種方法的信息。

          引言

          查看網(wǎng)頁的源代碼時,服務(wù)器處理的信息和代碼不會出現(xiàn)。例如,搜索引擎處理服務(wù)器上的信息,然后在網(wǎng)頁上顯示結(jié)果。換句話說,你可以查看組成結(jié)果頁面的代碼,但不能查看搜索引擎的源代碼。

          此規(guī)則適用于所有服務(wù)器端腳本、SSI(服務(wù)器端包含)和編程代碼。因此,你無法查看搜索引擎、論壇、投票、聊天等中使用的腳本源代碼。此外,從源代碼復(fù)制信息可能會導(dǎo)致錯誤,或?qū)⒛阋龑?dǎo)回從中復(fù)制信息的頁面。

          谷歌瀏覽器

          要在Google Chrome中查看網(wǎng)頁的源代碼,請使用以下任一方法。

          僅查看源代碼

          方法一

          要僅查看源代碼,請按計算機鍵盤上的鍵盤快捷鍵Ctrl+U。

          方法二

          右鍵單擊網(wǎng)頁的空白部分,然后從彈出菜單中選擇“查看網(wǎng)頁源代碼”。

          查看包含元素的源代碼

          1、打開Chrome并導(dǎo)航要查看其源代碼的網(wǎng)頁。

          2、單擊瀏覽器窗口右上角的設(shè)置圖標。

          3、從下拉菜單中,選擇更多工具,然后選擇開發(fā)者工具。

          4、單擊屏幕底部左上角的“元素”選項卡。

          提示:在Chrome中,按F12或Ctrl+Shift+I也會打開交互式開發(fā)者工具。該工具提供了與源代碼和CSS設(shè)置的更多交互,允許用戶查看代碼中的更改如何立即影響網(wǎng)頁。

          Mozilla Firefox

          要在Mozilla Firefox中查看網(wǎng)頁的源代碼,請使用以下任一方法。

          僅查看源代碼

          方法一

          要僅查看源代碼,請按計算機鍵盤上的Ctrl+U。

          方法二

          右鍵單擊網(wǎng)頁的空白部分,然后從彈出菜單中選擇“查看網(wǎng)頁源代碼”。

          查看包含元素的源代碼

          1、打開Firefox并導(dǎo)航到要查看其源代碼的網(wǎng)頁。

          2、單擊屏幕右上角的菜單Firefox菜單圖標。

          3、在下拉菜單中選擇“更多工具”,然后從展開的菜單中選擇“Web開發(fā)者工具”。

          4、單擊屏幕底部部分左上角的“查看器”選項卡。

          提示:在Firefox中,按F12或Ctrl+Shift+I也會打開交互式開發(fā)者工具。該工具提供與源代碼和CSS設(shè)置的交互,允許用戶實時查看代碼中的更改如何影響網(wǎng)頁。

          查看網(wǎng)頁源代碼的一部分

          1、突出顯示網(wǎng)頁中要查看源代碼的部分。

          2、在高亮顯示的部分上單擊鼠標右鍵,然后選擇“查看選中部分源代碼”。

          提示:你可以使用Firebug插件查看和編輯頁面的源代碼,并通過瀏覽器實時查看更改。

          Microsoft Edge

          要在Microsoft Edge中查看網(wǎng)頁的源代碼,請使用以下任一方法。

          僅查看源代碼

          方法一

          要僅查看源代碼,請按計算機鍵盤上的Ctrl+U。

          方法二

          右鍵單擊網(wǎng)頁的空白部分,然后從彈出菜單中選擇“查看網(wǎng)頁源代碼”。


          查看包含元素的源代碼

          1、打開Microsoft Edge并導(dǎo)航到要查看其源代碼的網(wǎng)頁。

          2、單擊屏幕右上角的設(shè)置圖標。

          3、將鼠標移到下拉菜單中的“更多工具”上,然后從展開的菜單中選擇“開發(fā)人員工具”。

          4、單擊屏幕右側(cè)窗口頂部的“元素”選項卡。

          提示:在Microsoft Edge中,按F12或Ctrl+Shift+I也會顯示交互式開發(fā)人員工具。該工具提供與源代碼和CSS設(shè)置的交互,允許用戶實時查看代碼中的更改如何影響網(wǎng)頁。

          Microsoft Internet Explorer

          要在Microsoft Internet Explorer中查看網(wǎng)頁的源代碼,請使用以下任一方法。

          僅查看源代碼

          方法一

          要僅查看源代碼,請按計算機鍵盤上的Ctrl+U。

          方法二

          右鍵單擊網(wǎng)頁的空白部分,然后從彈出菜單中選擇“查看源”。

          查看包含元素的源代碼

          1、打開Internet Explorer并導(dǎo)航到要查看其源代碼的網(wǎng)頁。

          2、單擊右上角的工具Internet explorer工具圖標

          3、從下拉菜單中選擇“F12開發(fā)人員工具”。

          4、單擊開發(fā)人員工具菜單左上角的“DOM資源管理器”選項卡。

          提示:在Internet Explorer中,按F12鍵將顯示DOM工具。該工具提供與源代碼和CSS設(shè)置的交互,允許用戶查看代碼中的更改如何立即影響網(wǎng)頁。


          主站蜘蛛池模板: 国产在线精品一区二区| 香蕉免费一区二区三区| 日本一区二区三区在线视频 | 国产精品亚洲一区二区麻豆| 无码欧精品亚洲日韩一区夜夜嗨| 无码av中文一区二区三区桃花岛| 丰满爆乳一区二区三区| 国产伦精品一区二区三区免费下载 | 武侠古典一区二区三区中文| 亚洲AV日韩综合一区| 无码人妻精品一区二区三18禁 | 亚洲国产一区二区三区青草影视 | 制服中文字幕一区二区| 精品在线一区二区三区| 亚洲国产欧美国产综合一区 | 无码精品国产一区二区三区免费 | 亚洲高清一区二区三区电影 | 内射白浆一区二区在线观看| 国产未成女一区二区三区| 欧洲无码一区二区三区在线观看| 精品一区二区三区中文字幕| 三上悠亚国产精品一区| 久久久久国产一区二区三区| 视频在线一区二区三区| 无码精品人妻一区| 能在线观看的一区二区三区| 日韩精品一区二区三区毛片| 成人H动漫精品一区二区| 另类国产精品一区二区| 日韩在线视频一区| 日本一区二区高清不卡| 国产精品亚洲产品一区二区三区| 一区二区三区免费电影| 中文字幕一区二区三区在线播放| 久久影院亚洲一区| 国产精品日本一区二区在线播放| 日韩一区二区在线观看视频| 国产精品一区视频| 国产一区二区三区国产精品| 精品视频在线观看你懂的一区| 成人无码AV一区二区|