《Web前端黑客技術揭祕》筆記一

阿新 • • 發佈：2019-02-06

最近在研究《Web安全權威指南》這本書，然而看到了中間部分時感覺有些吃力，找原因還是基本知識不紮實，因為沒有系統的學習過python，php，JS等知識。於是很是苦惱，發現了這本書《Web前端黑客技術揭祕》，其中對基礎知識的講解感覺很全面，以下是一些筆記。

1、URL格式

對於網站

http://www.foo.com/path/f.php?id=1&type=cool#new

對應關係為：

<schema> - http

<netloc> - www.foo.com

<path> - /path/f.php

<query> - id=1&type=cool

<fragment> - new（錨鏈接）

使用者名稱和密碼也可以直接放入URL中，如

http://username:[email protected]ww.foo.com/

2、HTTP協議

補充兩點：

HttpOnly標誌預設沒有，但如果有則說明Cookie不能被客戶端讀取；

Secure標誌預設沒有，但如果存在說明協議為HTTPS

3、HTML

（1）DOM樹：HTML文件就是一個DOM樹，只不過形式不同而已。

（2）iframe ：很多網站一般通過iframe來內嵌第三方介面（如廣告等），但其中容易產生安全問題（如XSS）

（3）一些內嵌指令碼的形式：

4、JavaScript DOM樹操作

（1）獲取HTML中的隱私資料

<html>
<head>
    ...
</head>
<body>
    ...
    <div id="private_msg">
    </div>
    ...
</body>
    ...
</html>

其中 private_msg包含了敏感資訊，其中的資料可以通過

document.getElementById('private_msg').innerHTML;

來獲取。

若ID未標識，則假設該包含敏感資訊的<div>標籤為DOM樹的第三個標籤，可通過

document.getElementByTagName('<div>')[2].innerHTML;

來獲取。

（2）獲取瀏覽器的Cookies資料

可以通過 document.cookies 來獲取

（3）獲取URL地址中的資料

可以通過 window.location 來獲取

未完待續

《Web前端黑客技術揭祕》筆記一

最近在研究《Web安全權威指南》這本書，然而看到了中間部分時感覺有些吃力，找原因還是基本知識不紮實，因為沒有系統的學習過python，php，JS等知識。於是很是苦惱，發現了這本書《Web前端黑客技術揭祕》，其中對基礎知識的講解感覺很全面，以下是一些筆記。1、URL格

《Web前端黑客技術揭祕》學習筆記第二章（二）

Dom樹： <html>是樹根，其他是樹的每個節點標籤節點以<xxx>表示,屬性節點以@xxx表示，而文字節點以xxx表示隱私資料可能儲存在： HTML內容中瀏覽器本地儲存中，如Cookies等 URL地址中很多網站通過ifram

Web前端--黑客技術揭祕（菜鳥知識）

一，Web安全的關鍵點 1.同源策略是眾多安全策略的一個，是Web層面上的策略，非常重要。 2.同源策略規定：不同域的客戶端指令碼在沒明確授權的情況下，不能讀寫對方的資源。 3.同域要求兩個站點同協議，同域名，同埠。 4.當然，在同一個域內，客戶端指令碼可以任意讀寫同源內的

web前端黑客技術揭秘

tro cnblogs bsp 數據策略 -1 images 1.2 web 1.1　　數據與指令 1.2　　瀏覽器的同源策略 1.3　　信任與信任關系 web前端黑客技術揭秘

web前端黑客技術揭秘 4.前端黑客之CSRF

.com nbsp 前端揭秘技術分享 cnblogs -1 log 技術 web前端黑客技術揭秘 4.前端黑客之CSRF

web前端黑客技術揭秘 9.Web蠕蟲

類型 logs mage strong png xss web前端技術分享 bsp 9.1　　Web蠕蟲的類型 9.2　　XSS蠕蟲 web前端黑客技術揭秘 9.Web蠕蟲

一張圖掌握移動Web前端所有技術（大前端、工程化、預編譯、自動化）

移動前端 web 工程化 webpack 你要的移動web前端都在這裏！大前端方向：移動Web前端、Native客戶端、Node.js、大前端框架：React、Vue.js、Koa跨終端技術：HTML 5、CSS 3、JavaScript跨平臺框架：React Native、Cordova前端

極客學院Web前端開發技術實戰視頻教程初級入門+高級實戰++專家課程+面試指導

inpu IT 添加 BE works 表達引入 lap loop ===============課程目錄===============├<初級中級>│ ├<1. HTML5開發前準備>│ │ ├1.HTML5開發前準備.mp4│ │ └

資料隱藏技術揭祕筆記

資料隱藏技術揭祕筆記 2018年02月14日 11:03:06 可樂1997 閱讀數：227 標籤：資料隱藏技術更多個人分類：筆記資料隱藏技術揭祕筆記第一章密寫術的發展

web前端之框架面試筆記

Angular AngularJS是什麼？ AngularJs（簡稱ng）是一個用於設計動態web應用的結構框架。首先，它是一個框架，不是類庫，是像EXT一樣提供一整套方案用於設計web應用。它不僅僅是一個Javascript框架，因為它的核心其實是對HTML標籤的增強。何為HTML標籤增強

web前端學習技術之對HTML5 智慧表單的理解

Html5新增input的form屬性，用於指向特定form表單的id，實現input無需放在form標籤之中，即可通過表單進行提交。 <FORM id=xinzeng> … </FORM> <INPUT … form="xinzeng"> type新增屬性：

web前端開發技術之淺談對HTML5 智能表單的理解

提示 goods 表單加載完成空格日期和時間 url 顯示指向 Html5新增input的form屬性，用於指向特定form表單的id，實現input無需放在form標簽之中，即可通過表單進行提交。 <FORM id=xinzeng> … </FO

web前端課程技術內容之如何做一個簡單的手機端頁面的翻頁

【如何做一個簡單的手機端頁面的翻頁】第一步：建立移動端頁面內 HTML + CSS 【注】可用彈性佈局但需要注意的是外層盒子的定位第二步：思考問題要實現怎樣的效果？手指滑動時觸發事件【左右】兩個方向 2.點選footer部分的下標實現切換效果 3.點選footer部分的下標實

web前端課程技術分享之關於rem佈局和vw佈局的理解

通過rem來實現響應式佈局：首先來看，什麼是rem單位。rem是一個靈活的、可擴充套件的單位，由瀏覽器轉化畫素並顯示。與em單位不同，rem單位無論巢狀層級如何，都只相對於瀏覽器的根元素（HTML元素）的font-size。預設情況下，h

web前端課程技術分享之關於rem布局和vw布局的理解

phone 都是 vma 通過改變之前控制 wid font 通過rem來實現響應式布局：首先來看，什麽是rem單位。rem是一個靈活的、可擴展的單位，由瀏覽器轉化像素並顯示。與em單位不同，rem單位無論嵌套層級如何，都只相對於瀏覽器的根元素（HTML元素）的fo

web前端課程技術總結Node.js 使用方法及相關方法分析

測試一個 ejs 強制 req != server 跨域 ade Node.js 使用方法及相關方法分析首先我們要了解什麽是node.js？官方解釋是：node.js是一個基於Chrome v8引擎的javascript 運行環境。Node.js使用了一個事件驅動、非

教你正確的學習web前端開發技術的方法分享

近幾年IT業可謂是發展火熱，而且新生了很多的職業。例如安卓開發工程師、iOS開發工程師。在這眾多的新生職業中備受矚目的當屬web前端工程師了，前端工程師薪資高，就業發展前景好，更多的人選擇了這一職業成為自己的發展方向，想要自己成為一名合格的web前端工程師，web前端開發學習路線圖值得大家去看看。

web前端進化之路（一）——小程式開發

最近學習前端感覺很多知識學起來容易，但是很多知識點很容易忘記，想做一個工具來方便自己來學習，正好結合小程式，分享給大家。照顧初學者，可能講的比較細，理解哈。準備工具小程式一個已申請（名稱是：we

web前端CSS框架Bootstrap筆記

Bootstrap筆記前言：bootstrap的核心： 1.媒體，即需要對雖然柵格系統是響應的，但是有些文字之類的不是響應的，所以需要進行單獨適配 @media screen and (max-width: 785px) { body { background-color:lightbl

web前端知識技術棧梳理

寫這篇文章的目的就是對自己半年來的學習成功進行以下梳理，文采有限。爭取做到結構明朗，語言合理吧。本篇主要以梳理為主，具體知識點後續會寫。 web前端的整體概念 HTML：搭建結構 CSS：美化頁面（佈局） JavaScript：實現動態的效果第一階段 HTML CSS

《Web前端黑客技術揭祕》筆記一

相關推薦