如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
今天來看看怎么實現炫酷的打字機效果。即把一段話一個字一個字的顯示出來。
效果圖：
實現思路：
首先規定好顯示字數的速度即settimeout執行間隔用來控制每個字之間輸出速度。再把判斷段落的總字數，循環段落總字數來實現一個字一個字的輸出。
js代碼：
var theNewsNum;
var theAddNum;
var totalNum;
var CurrentPosion=0;
var theCurrentNews;
var theCurrentLength;
var theNewsText;
var theTargetLink;
var theCharacterTimeout;
var theNewsTimeout;
var theBrowserVersion;
var theWidgetOne;
var theWidgetTwo;
var theSpaceFiller;
var theLeadString;
var theNewsState;
function startTicker(){
// ------ 設置初始數值
theCharacterTimeout = 50;//字符間隔時間
theNewsTimeout = 2000;//新聞間隔時間
theWidgetOne = "_";//新聞前面下標符1
theWidgetTwo = "-";//新聞前面下標符
theNewsState = 1;
theNewsNum = document.getElementById("incoming").children.AllNews.children.length;//新聞總條數
theAddNum = document.getElementById("incoming").children.AddNews.children.length;//補充條數
totalNum =theNewsNum+theAddNum;
theCurrentNews = 0;
theCurrentLength = 0;
theLeadString = " ";
theSpaceFiller = " ";
runTheTicker();
}
// --- 基礎函數
function runTheTicker(){
if(theNewsState == 1){
if(CurrentPosion<theNewsNum){
setupNextNews();
}
else{
setupAddNews();
}
CurrentPosion++;
if(CurrentPosion>=totalNum||CurrentPosion>=1){
CurrentPosion=0;//最多條數不超過num_gun條
}
}
if(theCurrentLength != theNewsText.length){
drawNews();
}
else{
closeOutNews();
}
}
// --- 跳轉下一條新聞
function setupNextNews(){
theNewsState = 0;
theCurrentNews = theCurrentNews % theNewsNum;
theNewsText = document.getElementById("AllNews").children[theCurrentNews].children.Summary.innerText;
theTargetLink = document.getElementById("AllNews").children[theCurrentNews].children.Summary.children[0].href;
theCurrentLength = 0;
document.all.hottext.href = theTargetLink;
theCurrentNews++;
}
function setupAddNews() {
theNewsState = 0;
theCurrentNews = theCurrentNews % theAddNum;
theNewsText = document.getElementById("AllNews").children[theCurrentNews].children.Summary.innerText;
theTargetLink = document.getElementById("AllNews").children[theCurrentNews].children.Summary.children[0].href;
theCurrentLength = 0;
document.all.hottext.href = theTargetLink;
theCurrentNews++;
}
// --- 滾動新聞
function drawNews(){
var myWidget;
if((theCurrentLength % 2) == 1){
myWidget = theWidgetOne;
}
else{
myWidget = theWidgetTwo;
}
document.all.hottext.innerHTML = theLeadString + theNewsText.substring(0,theCurrentLength) + myWidget + theSpaceFiller;
theCurrentLength++;
setTimeout("runTheTicker()", theCharacterTimeout);
}
// --- 結束新聞循環
function closeOutNews(){
document.all.hottext.innerHTML = theLeadString + theNewsText + theSpaceFiller;
theNewsState = 1;
setTimeout("runTheTicker()", theNewsTimeout);
}
window.onload=startTicker;
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
1.什么是DOM
4.訪問元素的方法
8.更多討論
問題1:getElementsByClassName() 使用時需要注意的地方
回答:它取出來的是個數組,及時只有一個那也是數組對象,所以改變指定元素時需使用角標
問題2:innerHTML 和innerText的區別
回答:innerText替換是會將標簽替換成字符串,而innerHTML 則會保留標簽插入到節點當中
問題3:dom事件
回答:事件是文檔或者瀏覽器窗口中發生的，特定的交互瞬間。事件是用戶或瀏覽器自身執行的某種動作，如click,load和mouseover都是事件的名字。事件是javaScript和DOM之間交互的橋梁。
事件發生，調用它的處理函數執行相應的JavaScript代碼給出響應。
DOM是中立于平臺和語言的接口，它允許程序和腳本動態地訪問和更新文檔的內容、結構和樣式。
在 HTML DOM中，所有事物都是節點。DOM 是被視為節點樹的 HTML。
什么是節點
2.什么是DOM節點
HTML 文檔中的所有內容都是節點
整個文檔是一個文檔節點
每個 HTML 元素是元素節點
HTML 元素內的文本是文本節點
每個 HTML 屬性是屬性節點
注釋是注釋節點
demo
3.常見的DOM屬性
屬性是節點（HTML 元素）的值，您能夠獲取或設置。
innerHTML 屬性
nodeName 屬性
nodeName 屬性規定節點的名稱
元素節點的 nodeName 與標簽名相同
屬性節點的 nodeName 與屬性名相同
文本節點的 nodeName 始終是 #text
文檔節點的 nodeName 始終是 #document
nodeValue 屬性
nodeValue 屬性規定節點的值。
元素節點的 nodeValue 是 undefined 或 null
文本節點的 nodeValue 是文本本身
屬性節點的 nodeValue 是屬性值
通過使用 getElementById() 方法
通過使用 getElementsByTagName() 方法
通過使用 getElementsByClassName() 方法
5.修改元素的方法
改變 HTML 內容
document.getElementById("p1").innerHTML="New text!";
改變 CSS 樣式
document.getElementById("p2").style.color="blue";
改html和css
追加子元素的方法
首先必須創建該元素（元素節點），然后把它追加到已有的元素上。var para=document.createElement("p");
創建新的 HTML 元素 - appendChild() 在父元素的最后追加
創建新的 HTML 元素-element.insertBefore(para,child);在指定位置給父級追加子元素
刪除 HTML 元素，您必須清楚該元素的父元素：parent.removeChild(child);
替換 HTML 元素:parent.replaceChild(para,child); 方法
6.DOM - 事件
允許 JavaScript 對 HTML 事件作出反應
onclick 事件——當用戶點擊時
onload 事件——用戶進入
onunload 事件——用戶離開
onmouseover事件——鼠標移入
onmouseout事件——鼠標移出
onmousedown事件——鼠標按下
onmouseup 事件——鼠標抬起
7.參考文獻
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
基本格式：
<！DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html； charset=utf-8">
<title>制作我的第一個網頁</title>
<style type="text/css">
h1{font-size；color；text-align：center}
</style>
</head>
<body>
<h1>Hello World！ </h1>
</body>
</html>
注釋：<！--注釋文本-->
強調語氣：<strong>，<em>：前者實現加粗再加粗，后者實現加粗加斜 體。
<span>標簽：寫在style 里設置單獨樣式。
<q></q>標簽：引用簡短文本，使引用的詩句等自己出現雙引號。
<blockquote>： 引用長文本，增加縮進量。
<br />： 換行標簽。
：代碼之間實現空格。
<hr />： 段落之間分隔的橫線。
<address>： 定義一個地址（比如電子郵件地址） ，簽名或者文檔的作者身份。在瀏覽器上顯示的樣式為斜體。
<code>： 加入簡短代碼。
<pre>： 加入一段長代碼。
Ul-li標簽： 添加新聞信息列表， 圖片列表， 無序文字列表。
Ol-li 標簽：添加有序列表，與ul-li 標簽類似。
<div> ：把一些獨立的邏輯部分劃分出來，形成欄目板塊。其中還可使用
<div id=” “>給板塊命名。
<table>： 制作表格。
用CSS 樣式為表格添加邊框：<style type=”text/css”>
黑色邊框： table tr td，th{border：1px solid #000；}</style>
<caption>：為表格添加標題和摘要。 <table summary=’’”表格簡介文本”>
<caption>標題文本</caption> </table>
<a>： 實現超鏈接。<a href=”目標網址” title=“鼠標滑過顯示的文本”>鏈接顯示的文本</a> 默認在當前瀏覽器窗口打開，添加“target—blank ”在新的瀏覽器窗口打開。
<mailto>： 在網頁中鏈接Email 地址。 <a href=”mailto： yy@qq。com ?
Cc（抄送地址）=zsq@qq。com & bcc（密件抄送地址）=zjj@qq。com &
subject=”主題” & body=“郵件內容”>發送</a> 給多個收件人發送，用分號隔開。第一個參數用？開頭，之后用 &隔開。
<img>： 添加圖片。Src=”標識圖像的位置?！?alt=”指定圖像的描述性文本，當圖像不可見時（下載不成功時），可看到該屬性指定的文本”
Title=“提供在圖像可見時對圖像的描述（鼠標滑過圖片時顯示的文本）”
<form>： 表單標簽，與用戶交互使得瀏覽器可以處理用戶的數據。
<form method=”數據傳送的方式（get/post）action=”瀏覽器輸入的數據被傳送到的地方，如一個 PHP 頁面（save。php）””
<label for="username">用戶名：</label>
<input type="text" name="username" id="username" value="" />
<label for="pass">密碼：</label>
<input type="password" name="pass" id="pass" value="" /> 瀏覽器顯示： 用戶名： 肯定存，啊 密碼：
表單文本輸入框，密碼輸入框：<form><input type=”text/password”
name=”名稱（以備后臺使用）” value=“文本（設置默認值，提示作用）”>
文本域的多行輸入：<textarearows（height）=”行數” cols（width）
=”列數”>文本</textarea>
單選框，復選框：<input type=”radio（單選框）/checkbox（復選框）”
value=” 值 ” name=” 名 稱 ” checked= “ checked ” /> 當 設 置
checked=”checked”時，該選項被默認選中。同一組按鈕，name 取值必須相同。
下拉列表框<select>：<label> XX </label>
<select>
<option value=”讀書” selected=”selected（被默認選中）”>讀書</option></select>
提交按鈕 submit：<input type=”submit” value=”提交”>重置按鈕 reset：<input type=”reset” value=”重置”>
<label>：<label for=”控件id 名稱”>慢跑 </label>
<input type=”checkbox” name=”gender” id=”jogging” />
for 屬性的值與id 屬性值一定要相同。
Placeholder：<input type=”email” id=”email” placeholder=”Enter email”>該提示會在輸入字段為空時顯示，并會在字段獲得焦點時消失。
CSS 樣式：定義文本的顯示樣式，如字體大小（font-size），顏色（color），加粗（font-weight：bold）等。
注釋語句：/*注釋語句*/。
內聯式 CSS 樣式：<p style=”color：red ； font-size：12px”>紅色字體</p>
嵌入式 CSS 樣式：<style type=”text/css”>span{ }</style>
外部式 CSS 樣式：在head 里寫：<link href=”XX。css” rel=”stylesheet”
type=”text/css”>，在XX。css 里寫：span{ }
三種方式的優先級：相同權值下，內聯式 >嵌入式 >外部式。但是，嵌入式 >外部式的前提為嵌入式的位置一定在外部式的后面。
選擇器：每一條CSS 樣式定義由兩部分組成：選擇器{樣式；}
標簽選擇器：如<html>，<body>，<h1>，<img>，<p font，，>。
類選擇器：。類選擇名稱（可任意起名，。XX）{css 樣式代碼；} -> <span class=”XX”></span>
ID 選擇器：#類選擇名稱（可任意，#XX）{css 樣式代碼；} -><span
id=”XX”></span>只能在文檔中使用一次。
“>”子選擇器：用于選擇指定標簽元素的第一代子元素?！局苯雍蟠?span style="box-sizing:border-box;outline:0px;word-break:break-all;font-family:宋體;">】 first>span{border：1px solid red；} <span>我還是一個<span>膽小如鼠</span>的小女孩</span>
包含（后代）選擇器：加入空格，用于選擇指定標簽元素下的后輩元素?！舅凶雍蟠亍?/span>
通用選擇器：由一個*指定，匹配html 中所有標簽元素。在style 里：
*{color：red；}
偽類選擇符 “ ：hover”：它允許給html 不存在的標簽（標簽的某種狀態）設置樣式。 a：hover{color：red；}鼠標滑過時字體變為紅色。
分組選擇符 “ ，”：為多個標簽元素設置同一個樣式。 如h1，p{ }。
繼承：有些樣式具有繼承性如color，有些不具有如border。具有繼承性的允許樣式不僅應用于某個特定 html 標簽元素，而且應用于其后代。
權值：標簽的權值為1，類選擇符的權值為10，ID 選擇符的權值最高為 100。
p{color：red；} /*權值為1*/
p span{color：green；} /*權值為1+1=2*/
。warning{color：white；} /*權值為10*/
p span。warning{color：purple；} /*權值為1+1+10=12*/
#footer 。note p{color：yellow；} /*權值為100+10+1=111*/ 特殊性：繼承也有權值，但是只有0。1 。
層疊：當有相同權重值時，后面的樣式會覆蓋前面的樣式。
重要性 ！important ：p{color：red！important；}這時p 段落中的文本會顯示紅色。！important 要寫在分號前面。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
input框的類型到底有多少種呢？零零總總算起來有23種。
▍總述
常用的并且能為大多數瀏覽器所識別的類型大概有：text、password、number、button、reset、submit、hidden、radio、checkbox、file、image、color、range、date、month、week、time、datetime-local。
另外還有一些類型：tel、email、url、datetime、search。這些類型部分瀏覽器不支持識別或校驗。
▍text：文本
代碼：
效果：
注意：當input沒有填寫類型時，默認為文本類型。
▍password：密碼
代碼：
效果：
▍number：數字
代碼：
效果：
▍button：按鈕
代碼：
效果：
▍tel：電話
代碼：
效果：
注意：tel類型似乎沒有什么實際作用。
▍email：郵件
代碼：
效果：
注意：火狐對email類型有校驗，360瀏覽器無校驗。
▍file：文件
代碼：
效果：
▍range：滑動條
代碼：
效果：
▍date：日期
代碼：
效果：
▍month：月份
代碼：
效果：
▍week：周
代碼：
效果：
▍time：時間
代碼：
效果：
▍datetime：時間、日、月、年（UTC時間）
代碼：
效果：
注意：火狐、360瀏覽器都對datetime不支持，會按照text類型處理。
▍datetime-local：時間、日、月、年（本地時間）
代碼：
效果：
▍radio：單選框
代碼：
效果：
▍checkbox：復選框
代碼：
效果：
▍image：圖片
代碼：
效果：
▍color：顏色
代碼：
效果：
▍search：搜索框
代碼：
效果：
注意：search似乎與text的效果沒有什么區別。。。
▍reset：重置按鈕
代碼：
效果：
注意：reset按鈕一般用于form表單中。
▍submit：提交按鈕
代碼：
效果：
注意：submit按鈕一般用于form表單中。
▍hidden：隱藏
代碼：
效果：
注意：hidden類型會將input隱藏，所以什么都看不到，而且被隱藏的input框也不會占用空間。
▍url：路徑
代碼：
效果：
注意：火狐對url類型有校驗，360瀏覽器無校驗。
▍寫在結尾
總的來說，目前input框也就只有這23種類型，雖然有的類型可能用不上一兩次甚至是一次都用不上，但是了解一下還是不錯的。
[html] view plain copy
[html] view plain copy
[html] view plain copy
[html] view plain copy
[html] view plain copy
[html] view plain copy
[html] view plain copy
[html] view plain copy
[html] view plain copy
[html] view plain copy
[html] view plain copy
[html] view plain copy
[html] view plain copy
[html] view plain copy
[html] view plain copy
[html] view plain copy
[html] view plain copy
[html] view plain copy
[html] view plain copy
[html] view plain copy
[html] view plain copy
[html] view plain copy
[html] view plain copy
[html] view plain copy
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
vue-router
對于大多數單頁面應用，都推薦使用官方支持的 vue-router 庫。
學習網址：https://router.vuejs.org/installation.html#direct-download-cdn
提示：本篇博客僅僅介紹搭建項目之后，再下載vue-router的情況，并非搭建項目是直接引入vue-router。
一、安裝方法（npm方式）
在終端運行以下指令
注意：--save 與 --save-dev 的區別
--save（可以省略） 下載的第三方依賴到package.js中的dependencies。
--save-dev 下載開發時依賴，指環境配置，下載到package.js中的devDependencies，webpack、bable等等均屬于開發
時依賴。
二、導入與使用
vue-router下載之后，需要在入口文件main.js導入，具體做法如下：
三、官網介紹使用步驟
網址：https://router.vuejs.org/zh/guide/#javascript
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
淺談 跨站腳本攻擊(XSS)
一、概述
1、什么是跨站腳本攻擊
跨站腳本攻擊(Cross Site Scripting)，簡稱XSS， 是指：由于網站程序對用戶輸入過濾不足，致使攻擊者利用輸入可以顯示在頁面上對其他用戶造成影響的代碼來盜取用戶資料、利用用戶身份進行某種動作或者對訪問者進行病毒侵害的一種攻擊方式。
不同于大多數攻擊（一般只涉及攻擊者和受害者），XSS涉及到三方，即攻擊者、客戶端與網站。XSS的攻擊目標是為了盜取客戶端的cookie或者其他網站用于識別客戶端身份的敏感信息。獲取到合法用戶的信息后，攻擊者甚至可以假冒最終用戶與網站進行交互。
2、為什么簡稱XSS，而不是CSS
跨站腳本攻擊(Cross Site Scripting)，為了不和層疊樣式表(Cascading Style Sheets, CSS)的縮寫混淆，故將跨站腳本攻擊縮寫為XSS。
3、XSS漏洞成因
4、舉個例子
（1）正常情況下：我們在url中輸入： http://localhost/test.php?name=Sam
給參數name傳一個值Sam，顯示如下圖
（2）那么，在非正常情況下呢（即：把傳遞給name的參數值改為一段可執行的Javascript代碼）？
我們在url中輸入：http://localhost/test.php?name=<script>alert("My name is Sam");</script>
如果我們后臺沒有進行任何關于傳入參數值的過濾，會顯示如下圖結果
二、XSS生效方式
XSS主要有三種生效方式：（1）構造URL （2）發布內容式 （3）蠕蟲式
1、生效方式：構造URL
XSS攻擊者通過構造URL的方式構造了一個有問題的頁面；當其他人點擊了此頁面后，會發現頁面出錯，或者被暗中執行了某些js腳本，這時，攻擊行為才真正生效。
一般來說，動態頁面中會將url中的部分內容回寫在頁面中。以百度的搜索為例，輸入網址：http://www.baidu.com/s?wd=<script>alert("wrong")<%2Fscript>
搜索后會顯示如下頁面：
因為參數<script>alert("wrong")<%2Fscript>是<script>alert("wrong")</script>轉義后的結果，搜索結果頁中，會在標題中中和搜索框中回寫用戶輸入的內容。
如果這里沒有經過轉義處理，則頁面中就嵌入了一段script，并執行該代碼，并彈出對話框提示用戶。如果是其他惡意代碼，則可能造成破壞。然后攻擊者將此URL廣為傳播——比如說，以報錯的方式發給百度的管理員，管理員打開這個URL就中招了。
下面我們來通過下圖，圖解XSS
舉例
例1、
若未對XSS進行預防，
我們在URL中正常輸入如下，搜索結果會如下圖顯示：beijing 的相關詞條
如果在url中非正常輸入如下的話，查看源碼后input的value屬性值會自動變為 <script>alert("xss test")</script>
若已對XSS進行了預防，
非正常輸入后則會顯示如下圖：
例2、
若未對XSS進行預防，
在URL中輸入紅框中的值，搜索后則顯示如下：
若已對XSS預防，
則搜索結果如下圖：
2、生效方式：發布式內容
構造URL攻擊方式傳播范圍有限，被攻擊者只要有基本的安全意識就可以避免，因此這種手段的危險性比較小。相比之下，通過發表內容構造的XSS的危害就大了很多。
在可以發表內容的論壇、討論區、吧、博客、微博等網站上，用戶發表的內容會保存起來，允許其他用戶瀏覽。這些保存的內容顯示在頁面上的時候，如果沒有經過正確的處理，也會把攻擊者精心構造的內容顯示出來，訪問該內容的用戶就此中招。如果該頁面流傳廣泛，則影響會更加深遠。
拿 留言板舉例
例、
留言板的任務是把用戶留言的內容展示出來。正常情況下，用戶的留言都是正常的語言文字，留言板顯示的內容也就沒毛病。
然而這個時候如果有人不按套路出牌，在留言內容中丟進去一行”<script>alert(“mdzz”)</script>
3、生效方式：蠕蟲式
最暴力的方式是使用蠕蟲——就是首先發一個有問題的文章，瀏覽者閱讀時會被暗中執行惡意代碼，發表一篇新的文章的，該文章也含有同樣的惡意代碼。這樣有可能在最快時間內將攻擊鋪滿整個網站。蠕蟲式攻擊將暗中偷偷摸摸的攻擊行為變成了光明正大的攻城拔寨，極容易被發現和修復。
Eg：早在2011年新浪就曾爆出過嚴重的xss漏洞，導致大量用戶自動關注某個微博號并自動轉發某條微博。(蠕蟲式)
注：上面我們只是為了方便以彈窗舉例，但是XSS攻擊方式絕不是彈窗這么簡單
三、XSS攻擊實例
（1）XSS偷取用戶信息
（2）XSS盜取Cookie
（3）XSS釣魚網站
（4）XSS蠕蟲攻擊
四、XSS的破壞方式
（1）破壞頁面結構：用戶輸入的內容包含了html的標簽，與前面的標簽等閉合，導致頁面的DIV結構發生變化，頁面錯亂。
（2）破壞顯示內容：用戶輸入的內容包含了單引號或雙引號，與前面的單引號或雙引號匹配，導致后面的內容丟失，顯示不出來。
（3）破壞JS：用戶產生的內容直接輸出到js片斷中，但僅轉義少數字符不能保證排除攻擊，所以容易導致JS被破壞
五、XSS攻擊 繞過過濾的一些簡單方法
1、大小寫繞過
這個繞過方式的出現是因為網站僅僅只過濾了<script>標簽，而沒有考慮標簽中的大小寫并不影響瀏覽器的解釋所致。
例：
如果我們在URL中輸入: localhost/test.php?name=<script>alert(''hey!")</script>
，由于網站對<script>標簽進行了過濾，所以搜索后什么都不會發生。
而如果我們輸入: localhost/test.php?name=<sCript>alert(''hey!")</scRipt>
，實質就是改變了<script>的大小寫，則結果如下圖所示，我們又愉快的彈出了彈窗。
即我們輸入一串原始值，網站將輸入的原始值進行過濾，過濾后的值仍是一段可執行的代碼。
例
讓過濾完script標簽后的語句中還有script標簽。
如下圖：將參數name值設為<sCri<script>pt>alert("hey!")</scRi</script>pt>
，輸入后仍會出現彈窗
當script標簽已經被完全過濾后，前面兩種方法就都不會成功。
以下列舉幾個常用的可插入代碼的標簽。
alert(1)編碼過后就是\u0061\u006c\u0065\u0072\u0074(1)，
所以構建出來的攻擊語句http://localhost/test.php?name=<script>eval(\u0061\u006c\u0065\u0072\u0074(1))</script>
如下圖執行后又會出現彈窗
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
直白點：惡意攻擊者往Web頁面里插入惡意Script代碼，當用戶瀏覽該頁之時，嵌入其中Web里面的Script代碼會被執行，從而達到惡意攻擊用戶的目的。
之后當瀏覽這條留言的時候，就會彈出如下信息框。
它以吸引人眼球的方式，讓當微博用戶主動點擊攻擊鏈接。之后微博網友會立刻執行一段有害代碼，造成三個結果：發布一條微博；成為攻擊發起人的粉絲；向其他好友發送含同樣鏈接地址的私信。新浪微博很快發現這個漏洞，刪除了含攻擊鏈接的微博內容，并將攻擊發起人ID刪除。
2、利用過濾后返回語句再次構成攻擊語句來繞過
即：<sCri<script>pt>alert("hey!")</scRi</script>pt> 過濾后
仍為可執行的JS代碼<script>alert("hey!")</script>
3、并不是只有script標簽才可以插入代碼！
莫慌，能植入腳本代碼的不止script標簽。
例如：我們用<img>標簽做一個示范。
我們利用如下方式在URL中輸入：http://localhost/test.php?name=<img src='w.123' onerror='alert("hey!")'>
之后就可以再次愉快的彈窗。（因為我們指定的圖片地址根本不存在也就是一定會發生錯誤，這時候onerror里面的代碼自然就得到了執行。）
<div onmouseover=‘do something here’> 當用戶鼠標在這個塊上面時即可運行（可以配合weight等參數將div覆蓋頁面，鼠標不劃過都不行）
類似的還有onclick，這個要點擊后才能運行代碼
4、編碼腳本代碼繞過關鍵字過濾。
有的時候，服務器往往會對代碼中的關鍵字（如alert）進行過濾，這個時候我們可以嘗試將關鍵字進行編碼后再插入，不過直接顯示編碼是不能被瀏覽器執行的，我們可以用另一個語句eval（）來實現。【eval()會將編碼過的語句解碼后再執行】
例
5、組合各種方式
在實際運用中漏洞的利用可能不會這么直觀，需要我們不斷的嘗試，甚至組合各種繞過方式來達到目的。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
尋找主流驗證碼提供使用公司與樣例及其可能的破解價格
3 ------ 圖像字符類型驗證碼
4 ------ 行為類型驗證碼
5 ------ 邏輯識別類型驗證碼
6 ------ 資料總結與價格匯總
簡述：
普通字母數字干擾傾斜驗證碼
出現位置：
登錄百度搜索時可能出現
圖片樣例：
出現前提：
網絡異常（非人類訪問可能性大）
簡述：
普通字母數字顏色塊干擾傾斜驗證碼
出現位置：
發布百度經驗可能出現
圖片樣例：
出現前提：
簡述：
扭曲中文拼音干擾驗證碼
出現位置：
貼吧發布帖子的時候可能出現
圖片樣例：
簡述：
在較大的圖片中的小部分隨機區域出現傾斜數字字母驗證碼。
出現位置：
YY登錄頁面
圖片樣例：
簡述：
扭曲中文數字干擾驗證碼
出現位置：
異地登錄可能出現
圖片樣例：
簡述：
字符緊湊扭曲驗證碼
出現位置：
異常流量訪問可能出現
圖片樣例：
簡述：
字符緊湊扭曲驗證碼
出現位置：
異常流量訪問可能出現
圖片樣例：
簡述：
需要鼠標拖動到最右邊完成的驗證碼。
出現位置：
在淘寶登錄頁面出現
圖片樣例：
簡述：
極驗專職做驗證碼，需要通過滑輪完成拼圖。
出現位置：極驗官網
圖片樣例：
簡述：
極驗專職做驗證碼，按鍵點擊再分析瀏覽記錄和特征判別。類似谷歌第三代驗證碼
出現位置：極驗官網
圖片樣例：
簡述：
12306登錄界面識別驗證碼。
出現位置：12306登錄界面
圖片樣例：
簡述：偶然見到，還沒有具體來源。
出現位置：網絡來源（未知）
圖片樣例：
簡述：
來自落伍者網站依次在圖片中點擊提示的字符。
出現位置：落伍者網站登錄時
圖片樣例：
簡述：
來自騰訊安全驗證時依次在圖片中點擊提示的字符。
出現位置：騰訊安全平臺
圖片樣例：
簡述：
某網站下訂單時出現數字加中文邏輯處理驗證碼。
出現位置：網絡來源（未知）
圖片樣例：
簡述：扭曲的中文文字
出現位置：網絡來源（未知）
圖片樣例：
簡述：提示生活場景圖片，由用戶點擊路標之類。
出現位置：谷歌異常訪問時出現
圖片樣例：
搜集了驗證碼業內3大類型下的17個變種形式。
所有字符型，邏輯型驗證碼均可以通過打碼平臺進行破解
1、文檔說明
2、內容概述
3. 字符類型驗證碼
3.1 百度搜索字符驗證碼
3.2 百度經驗字符驗證碼
3.3 百度貼吧中文驗證碼
3.4 YY字符驗證碼
3.5 stream數字中文驗證碼
3.6 谷歌字符緊湊扭曲驗證碼
3.7 京東字符重疊驗證碼
4. 行為驗證類型驗證碼
4.1 淘寶登錄行為驗證碼
4.2 極驗第二代行為驗證碼
4.3 極驗第三代行為驗證碼
5. 邏輯識別驗證碼
5.1 12306邏輯識別驗證碼
5.2 外國網站邏輯識別驗證碼
5.3 落伍者點擊提示驗證碼
5.4 騰訊安全驗證點擊提示驗證碼
5.5 邏輯數字漢字加減驗證碼
5.6 邏輯拼音驗證碼
5.7 谷歌路標識別驗證碼
6. 驗證碼搜集總結
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
1、node.js是由chrome瀏覽器，V8引擎，C++編寫的JavaScript運行環境，node.js可以解析JS代碼，而且沒有瀏覽器安全級的限制，還提供很多系統級別的API。
2、簡單介紹一下node.js后推薦給大家幾個網站，大家可以從這幾個網站上學習更多
https://nodejs.org/en/ Node.js的官方網站
https://stackoverflow.com/ 技術問答社區
3、安裝node.js（這部分感覺沒有什么好說的，因為就是下載安裝的過程，不熟悉的同學去下面菜鳥教程這個網站參考一下就行）https://www.runoob.com/nodejs/nodejs-install-setup.html
4、node.js版本的常識：偶數位為穩定版本，奇數為非穩定版本
5.node.js基礎-起一個web服務器
（1）首先在某個路徑下面寫一個server.js文件，文件內容如下：
（2）然后在該路徑下面使用node運行server.js文件
（3）服務就運行起來了，那么打開瀏覽器，進入http://127.0.0.1:1337/里面就可以看到Hello World
（4）現在我們回過頭去看看剛才那個server.js文件里寫的都是什么東西
（5）現在我們將server.js文件中的res.end("Hello World\n")修改為res.end("Hello Node.js\n"),然后之前我們的服務還沒有關掉，在命令行按下Ctrl+C停掉服務，再使用命令重新開啟，然后進入到瀏覽器刷新http://127.0.0.1:1337/頁面就出來結果了
（6）剛才在server.js文件中的寫法都是鏈式寫法，我們看nodejs官網提供的寫法，就很清晰
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
1、初始node.js
[javascript] view plain copy
[javascript] view plain copy
[javascript] view plain copy
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
一直不太懂前后端的交互，開始學習ajax，好像有些懂了，接下來的內容通過表單提交來了解前后端數據交互吧~
關于表單的基本知識：
表單中的三個內容：
action：數據提交的地址，默認是當前頁面
method：數據提交的方式，默認是get方式
enctype：提交數據格式，默認是application/x-www-form-urlencoded
以下分兩種提交方式進行：
（1）get方式：
前端頁面：
后端php頁面：
輸入“aa"提交后：
使用get方式：
把數據名稱和值通過”=“連接，如果又多個的話，會通過”&“進行連接，然后把數據放到url?后面傳到指定頁面；
url長度又限制，所以不要使用get方式傳遞過多的數據
(2)post方式：
前端頁面：
后端php頁面：
輸入”li“提交后：
post理論上是無傳輸大小限制的，輸入的內容也不會顯示在瀏覽器輸入欄中。
就暫時了解這么多了~繼續加油！
[html] view plain copy
[php] view plain copy
[html] view plain copy
[php] view plain copy
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn
