整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
今天在漏洞盒子找漏洞的時發現一個理財網站具體的就不透露了就試了試 結果發現竟然存在一個存儲性xss于是決定搞一搞。其實xss在互聯網當中是非常常見的，接下來我就給大家介紹下xss漏洞的原理以及實戰。
什么是XSS漏洞
XSS攻擊：跨站腳本攻擊(Cross Site Scripting)，為不和層疊樣式表(Cascading Style Sheets, CSS)的縮寫混淆。故將跨站腳本攻擊縮寫為XSS。XSS是一種經常出現在web應用中的計算機安全漏洞，它允許惡意web用戶將代碼植入到提供給其它用戶使用的頁面中。比如這些代碼包括HTML代碼和客戶端腳本。攻擊者利用XSS漏洞旁路掉訪問控制——例如同源策略(same origin policy)。這種類型的漏洞由于被駭客用來編寫危害性更大的phishing攻擊而變得廣為人知。對于跨站腳本攻擊，黑客界共識是：跨站腳本攻擊是新型的“緩沖區溢出攻擊“，而JavaScript是新型的“ShellCode”。
XSS攻擊的危害包括
XSS跨站腳本，是一種Web安全漏洞，有趣是是他并不像SQL注入等攻擊手段攻擊服務端，本身對Web服務器沒有危害，攻擊的對象是客戶端，使用瀏覽器訪問這些惡意地址的網民。
實戰環節
打開頁面點擊登陸
登陸完成后點擊設置
點擊后如下：
在理財目標出添加：" onfocus=alert`1` autofocus="true 創建一個聚焦事件
保存后鼠標放到理財目標出就會觸發。
我們是在一個矛盾的世界中，有矛就有盾。只要我們的代碼中不存在漏洞，攻擊者就無從下手，我們要做一個沒有縫的蛋。XSS防御有如下方式。
永遠不相信用戶的輸入。需要對用戶的輸入進行處理，只允許輸入合法的值，其它值一概過濾掉。
假如某些情況下，我們不能對用戶數據進行嚴格的過濾，那我們也需要對標簽進行轉換。
基于以上的講解，你明白了Xss了嗎？如還有問題請在評論區留言~
者：HXGNMSL來源：CSDN原文：https://blog.csdn.net/HXGNMSL/article/details/89076476
Javascript的歷史來源
94年網景公司 研發出世界上第一款瀏覽器。
95年 sun公司 java語言誕生
網景公司和sun合作。
Javascript ===> javascript
JavaScript和ECMAScript的關系
簡單來說ECMAScript不是一門語言，而是一個標準。符合這個標準的比較常見的有：JavaScript、Action Script（Flash中用的語言）
JavaScript的基本結構：
JavaScript的語法：
JavaScript的基礎語法
變量的聲明及使用
數據類型
運算符
邏輯控制語句
注釋
語法規則
變量的聲明語法：
var變量名；
例如：
Var num;
然后進行賦值：num = 10;也可以聲明時直接賦值：
Var num =10;
在JavaScript中，提供了常用的基本數據類型：
undefined 未定義；
null 空；
string 字符串類型；
boolean 布爾類型；
number 數值類型；
運算符：
算數運算符：+、-、*、/、%、++、–；
比較運算符：>、<、> =、< =、==、！=；
邏輯運算符：&&、||、！；
賦值運算符：=；
邏輯控制語句：
JavaScript的邏輯控制語句也分為兩類：條件結構和循環機構。
條件結構
條件機構分為if結構和switch結構：
If…else
Switch
循環結構
JavaScript的循環結構的執行順序與Java類似，主要包括以下幾種結構：
for循環
while循環
do…while循環
for…inx循環
示例：
for(var i=0;i<10;i++){
Document.write(“*”);
}
輸出結果：**********
循環中斷：
用于循環中斷的語句有以下兩種：
break.
continue.
與Java用法一樣，break是跳出循環,continue是跳入下一次循環。
函數
函數有兩種：一種是系統函數，一種是自定義函數。
常用的系統函數包括：
parseInt():轉換為整數。
parseFloat():轉換為浮點型。
isNaN():判斷非數字。
Eval():計算表達式值。
自定義函數：
自定義函數的語法
function 函數名（參數1,參數2,…）{
…//語句
Return 返回值;//可選
}
函數的調用：
函數的調用方式有以下兩種
事件名=函數名（傳遞的實參值），例如：
“函數名（）”
直接使用函數名（傳遞的實參值），例如：
var recult = add(2,3);
匿名函數
匿名函數的語法
var sumFun=function(num1,num2){
…
return(nun1,num2);
} ;
在語法中：
var sunFun=function(num1,num2)表示聲明一個變量等于某個函數體。
{…}；是把整個函數體放在變量的后面，并把末尾添加一個分號。
匿名函數的調用:
由于匿名函數定義的整個語句，可以像賦值一樣賦給一個變量進行保存，所以可以使用如下方式調用語法中的匿名函數：
var sum=sumFun(2,3)
BOM概述
使用BOM可以移動窗口，改變狀態欄中的文本，執行其他與頁面內容不直接相關的動作。它包含的對象主要有以下幾種;
Window對象
Window對象是指整個窗口對象，可以通過操作Window對象的屬性和方法控制窗口，例如，打開或關閉一個窗口。
History對象
瀏覽器訪問過的歷史頁面對應History對象，通過History對象的屬性和方法實現瀏覽器的前進或后退的功能。
Location對象
瀏覽器的地址欄對應Location對象，通過Location對象的屬性和方法控制頁面跳轉。
Document對象
瀏覽器內的網頁內容對應Document對象，通過Document對象的屬性和方法，控制頁面元素。
Window常用的屬性有：
history：有關客戶訪問過的URL的信息。
location:有關當前URL的信息。
Screen: 有關客戶端的屏幕和顯示性能的信息。
Window對象常用的方法：
prompt():顯示可提示用戶輸入的對話框。
alert():顯示帶有一段消息和一個人“確認”按鈕的警告框。
confirm():顯示帶有一段消息以及“確認”按鈕“取消”按鈕的對話框。
close():關閉瀏覽器窗口。
open():打開一個新的瀏覽器窗口，加載給定URL所指定的文檔。
setTimeout():用于在指定（以毫秒計）后調用函數或計算表達式。
setTneerval():按照指定的周期 （以毫秒計）數來調用函數或計算表達式。
Window對象常用窗口特征屬性
height、width:窗口文檔顯示區的高度、寬度，以像素計。
left、top:窗口的x坐標y坐標，以像素計。
toolbar:yes|no|1|0:是否顯示瀏覽器的工具欄，默認是yes。
scrollbars =yes|no|1|0:是否顯示滾動條，默認是yes。
locationyes|no|1|0:是否顯示地址欄，默認是yes。
status|no|1|0:是否添加地址欄，默認是yes。
menubar|no|1|0:是否顯示菜單欄，默認是yes。
resizable|no|1|0:窗口是否可調節尺寸，默認是yes。
Window對象的常用事件：
onload:一個頁面或一副圖像完成加載。
onmouseover:鼠標指針移到某元素之上。
onclick:單擊某個對象。
onkeydown:某個鍵盤按鍵被按下。
onchange:域的內容被改變。
History對象的方法：
back():加載History對象列表中的上一個URL。
forward():加載History對象列表中的下一個URL。
go():加載History對象列表中的某個具體URL。
Location對象的屬性：
host：設置或返回主機名和當前URL的端口號。
hostname:設置或返回當前URL的主機名。
href:設置或返回完整的URL。
Location對象的方法：
reload():重新加載當前文檔。
replace():用新的文檔替換當前文檔。
Document對象常用的屬性：
referrer:返回載入當前文檔的URL。
URL：返回當前文檔的URL。
Document對象的常用方法：
getElementById():返回對擁有指定id的第一個對象的引用。
getElementsByName():返回帶有指定名稱的對象的集合。
getElementsByTagName():返回帶有指定標簽名的對象的集合。
write():向文檔寫文本、HTML表達式代碼。
內置對象
系統的內置對象有Date對象、Array對象、String對象和Math對象等。
Date:用于操作日期和時間。
Array:用于在單獨的變量名中儲存一系列的值。
String:用于支持對字符串的處理。
Math:用于執行數學任務，包含了若干數字常量和函數。
Date對象：
1:創建日期對象
Date對象包含日期和時間兩個信息，創建日期對象的基本語法有兩種：
創建日期的基本語法1： var 日期實例化=new Date(參數);
創建日期的基本語法2： var 日期實例化=new Date();
Date對象的常用方法：
getDate():從Date對象返回一個月中的某一天，其值介于1到31之間。
getDay():從Date對象返回星期中的某一天，其值介于0到6之間。
getHours():返回Date對象的小時，其值介于0到23之間。
getMinutes():返回Date對象的分鐘，其值介于0到59之間。
getSeconds():返回Date對象的秒數，其值介于0到59之間。
getMonth():返回Date對象的月份，其值介于0到11之間。
getFullYear():返回Date對象的年份，其值為4位數。
getTime():返回自某一時刻（2010年1月1日）以來的毫秒數。
DOM概述
什么是DOM
DOM是文檔對象的縮寫，和語言無關。它提供了訪問、動態修改結構文檔的接口，W3C制定了DOM規范，主流瀏覽器都支持。
使用Core DOM操作節點
訪問節點：
使用getElement系列方法訪問指定節點。
getElementById():返回對擁有指定id的第一個對象的引用。
getElementsByName():返回帶有指定名稱的對象的集合。
getElementsByTagName():返回帶有指定標簽名的對象的集合。
使用層次關系訪問節點。
parenNode:返回節點的父節點。
firstChild:返回節點的首個節點。文本和屬性節點沒有父節點，會返回一個空數組，對于元素節點，若是沒有子節點會返回null。
lastChild:返回節點的最后一個子節點，返回值同firstChild。
操作節點屬性值
CoreDOM的標準方法包括以下兩種：
getAttribute(“屬性名”)：獲取屬性值。
getAttribute(“屬性名”,“屬性值”)：設置屬性值
創建和增加節點：
創建節點
createElement(tagName):按照給定的標簽名稱創建一個新的元素節點
appendChild(nodeName):向以存在節點列表的末尾添加新的節點。
inserBefore(newNode,oldNode):向指定的節點之前插入一個新的子節點。
cloneNode(deep):復制某個指定的節點。
刪除和替換節點
removeChild(node):刪除指定的節點。
replaceChild(newNode,oldNode):用其他的節點替換指定的節點。
Table對象的屬性和方法
屬性：
rows[]:返回包含表格中所有行的一個數組。
rows[]用于返回表格中所有行的一個數組。
方法：
inserRow():在表格中插入一個新行。
deleteRow():從表格中刪除一行。
數組
數組是具有相同數據類型的一個或多個值得集合
創建數組的語法：
var 數組名稱=new Array(size);
數組的賦值的兩種方式：
先聲明在賦值
var province = new Array(4);
province[0]=“河北省”;
province[1]=“河南省”；
索引也可以使用標識（字符串），例如：
var province=new Array(4);
province[‘河北省’]=“河北省”；
province[‘河南省’]=“河南省”；
聲明時同時初始化
var province=new Array(“河北省”,“河南省”，“湖北省”，“廣東省”)；
Array對象的常用屬性和方法：
屬性：
length:設置或返回數組中元素的數目。
方法：
join（）:把數組的所有元素放入一個字符串，通過一個分隔符進行分割。
sort():對數組的元素進行排序。
于TypeScript的先天優勢，TypeScript越來越受歡迎。那問題來了：TypeScript 和 JavaScript 究竟哪個更好？JavaScript真的會敗北嗎？
作者 | Mahdhi Rezvi
譯者 | 明明如月，責編 | 郭芮
以下為譯文：
你以前可能曾聽說過“TypeScript”這個詞。到現在 2019年，TypeScript 在 GitHub 最常用編程語言排行榜排名第 7 位，在增速最快的編程語言排行榜中占第 5 位。
TypeScript (TS) 是微軟開發的一種開源編程語言，可以編譯成 JavaScript (JS) 代碼。自 2012 年發布以來，這門語言一直保持活躍發展并且越發受歡迎。
在早期，開發社區就將 TypeScript 和 Angular 緊密聯系在一起。盡管用 JS 也不是不行，但是 Angular 強迫你使用 TypeScript。
TypeScript 和 JavaScript 的區別是什么？
Typescript 是 JavaScript 的超集，可以被編譯成 JavaScript 代碼。 用 JavaScript 編寫的合法代碼，在 TypeScript 中依然有效。 Typescript 是純面向對象的編程語言，包含類和接口的概念。 程序員可以用它來編寫面向對象的服務端或客戶端程序，并將它們編譯成 JavaScript 代碼。
TypeScript和 JavaScript的關系，圖源：GeeksforGeeks
TypeScript 引入了很多面向對象程序設計的特征，包括：
interfaces 接口
classes 類
enumerated types 枚舉類型
generics 泛型
modules 模塊
主要不同點如下：
TS 是一種面向對象編程語言，而 JS 是一種腳本語言（盡管 JS 是基于對象的）。
TS 支持可選參數， JS 則不支持該特性。
TS 支持靜態類型，JS 不支持。
TS 支持接口，JS 不支持接口。
為什么要用 TypeScript ？
TS 在開發時就能給出編譯錯誤， 而 JS 錯誤則需要在運行時才能暴露。
作為強類型語言，你可以明確知道數據的類型。代碼可讀性極強，幾乎每個人都能理解。
TS 非常流行，被很多業界大佬使用。像 Asana、Circle CI 和 Slack 這些公司都在用 TS。
為什么不該用 TypeScript ？
TS 需要編譯。TS 得通過編譯才能變成 JS 代碼。
隨著時間的推移，類型可能變得非常復雜。當項目不斷變大時這種情況十分常見。
盡管 TS 是類型安全的，在有些情況下編譯器也有檢查不出任何錯誤的情況。當我們修改編譯后的 JS 代碼時，錯誤就不可檢測了。不過隨著編譯器不斷改進，這種情況會越來越少。
摘要
| JavaScript | TypeScript | |
|---|---|---|
| 語言 | 腳本語言 | 面向對象編程語言 |
| 學習難度 | 靈活易學 | 需要有腳本編程經驗 |
| 類型 | 輕量級解釋編程語言 | 強類型的面向對象編程語言 |
| 客戶端/服務端 | 客戶端服務端都有 | 側重客戶端 |
| 拓展名 | .js | .ts 或 .tsx |
| 耗時 | 更快 | 編譯代碼需要些時間 |
| 數據綁定 | 沒有類型和接口的概念 | 使用類型和接口表示數據 |
| 注解 | 不需要注解 | 使用注解才能最大限度發揮 TypeScript的特性 |
| 語法 | 所有的語句都寫在腳本標簽內。瀏覽器將腳本標簽內的文本識別為腳本 | 一個 TypeScript 程序由模塊、方法、變量、語句、表達式和注釋構成。 |
| 靜態類型 | JS 中沒有靜態類型的概念 | 支持靜態類型 |
| 模塊支持 | 不支持模塊 | 支持模塊 |
| 接口 | 沒有接口 | 支持接口 |
| 可選參數方法 | 不支持 | 支持 |
| 原型 | 沒有這種特性 | 支持原型特性 |
| 開發者社區 | JS 使用范圍很廣，被編程社區廣泛接受和使用 | TS 比較新，編程社區相對較小 |
| 參考選擇 | 小型項目 | TS 是一種面向對象語言，代碼更簡潔，可讀性和復用性強。因此 TS 更適合大型項目。 |
表格來自：Edureka
結論
那問題來了：TypeScript 和 JavaScript 哪個更好？
由于 TS 的先天優勢，TS 越來越受歡迎。但是請記住，TS 最終不可能取代 JS，因為 JS 是 TS 的核心。
選擇 TypeScript 還是 JavaScript 要由開發者自己去做決定。如果你喜歡類型安全的語言，那么推薦你選擇 TS。 如果你已經用 JS 好久了，你可以選擇走出舒適區學習 TS，也可以選擇堅持自己的強項，繼續使用 JS。
本文到此結束，希望你能有所收獲，輕松快樂的學習。
原文：https://medium.com/javascript-in-plain-english/is-typescript-the-way-forward-659caa2cb10f
作者：Mahdhi Rezvi，移動開發工程師，曼徹斯頓大學計算機專業本科生，熱衷學習新技術。譯者：明明如月，知名互聯網公司 Java 高級開發工程師，CSDN 博客專家。
本文為 CSDN 翻譯，轉載請注明來源出處。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
