前端開發：JavaScript QA 工具

此文為大家推薦實用的JavaScript QA 工具，希望對大家有所幫助！

1、jscs （JavaScript 代碼風格檢測工具）

2、jsinspect（檢測復制粘貼和結構類似的代碼）

3、ESLint（完全插件化的工具，能在 JavaScript 中識別和記錄模式）

4、JSHint（是一個有助于發現 JavaScript 代碼錯誤和潛在問題的工具）

5、JSLint（高標準、嚴格和固執的代碼質量工具，旨在只保持語言的優良部分）

6、buddy.js（發現 JavaScript 代碼里的魔法數字）

切圖 qietu（.com）

：html編碼
背景：html編碼是用于輸出html原本的標簽的

想在頁面上輸出div標簽，但是如果我在html標簽里直接寫的話，就會被當成div標簽執行，并不會輸出在頁面上，這個時候我想將他輸出在頁面上就需要用html編碼

XSS中的應用：這種編碼的形式可以用來去繞過一些過濾，比如，有些會過濾掉script ，alert,< >這樣的危險的符號，這個時候，就可以用Html編碼來繞開過濾

比如這里的輸出點在scr里，可以閉合雙引號，然后寫一個onerror事件，將alert(1)進行html十進制編碼，這樣就避開了輸入的過濾，當數據到達輸出點時，頁面會先解碼，這個時候onerror后面就變成了字符串alert(1),但是當圖片資源加載失敗，觸發onerror這個事件時，這個時候這個字符串alert(1),就會當作js代碼執行，就會彈窗。我這里用的html的十進制編碼，用十六進制也是一樣的效果

Html在線編碼工具：https://www.qqxiuzi.cn/bianma/zifushiti.php

二：js編碼

XSS應用：一般js的編碼用在通過innerHTML輸出在html里面，比如var search = “可控點”;

document.getElementById().innerHTML=search;

在script標簽中，先將js編碼解碼，變成字符串<img src=“x” οnerrοr=alert(1)>,,然后就會以字符串的形式輸出在html的div標簽里，然后當作html代碼執行，也就執行了這個語句，成功彈窗

Js解碼是用的xss encode插件

三：url編碼

背景：http協議中傳輸參數是key=value這種鍵值對的形式存在的，如果需要傳多個參數，就需要用&進行分割，如name1=value1&name=value2&name3=value3這種形式，如果這個時候，我們的值里包含了&或者=這樣的符號，比如name1=value1,其中，value1的值是aaa&b=cc,那么輸出的時候就會變成這樣：name1=aaa&b=cc,這本來是一個鍵值對，但是服務器會解析成兩個，會造成歧義，為了避免這種情況，對參數進行了url編碼。&：%26，=：%3D，編碼后就變成了name1=aaa%26b%3Dcc，這樣服務器解析時，就還是一個鍵值對，然后進行Url解碼，就會獲取到正確的值了。

XSS中的應用：比如說當你的輸出點在a標簽的href屬性中時，對：進行了過濾，這個你輸javascript：alert(1)時，：就會被過濾，導致不能執行，這個時候就可以先用html編碼成:，再

用url編碼將&編碼成%26，再輸出點瀏覽器會將html編碼解碼回：，然后輸出在href里，就可以成功彈窗

url編碼和解碼可以在js控制臺使用js語句來進行編碼解碼：encodeURI(),encodeURIcomponed()

也可以用在線編碼工具：http://tool.chinaz.com/tools/urlencode.aspx

四：base64編碼

Base64一般用在a標簽和iframe標簽中，

</a> <iframe src="輸出點" frameborder="0"></iframe>，

如果過濾了javascript<>”’時，就可以考慮base64編碼，用data協議

解碼后為：<img src=x οnerrοr=alert(1)>

當點擊鏈接時，頁面就會以html的方式解析，用base64的方法解碼，然后成功結果彈窗。

Base64在線編碼工具：https://base64.us/

注：文章轉自互聯網

家好，我是江湖哥，今天分享html教程入門級的部分,大神請繞道，小白請點贊，哈哈，言歸正傳：

Html教程：a標簽

知識要點：

1. a標簽的概念

2. a標簽屬性

一：什么是a標簽？

a標簽的作用：就是用于控制頁面與頁面之間的跳轉的

a標簽的格式：<a href="指定要跳轉的目標界面的鏈接">需要展示給用戶看見的內容</a>

<a href="https://www.toutiao.com/">江湖哥博客</a>

二：a標簽的屬性

a標簽中有一個target屬性，這個屬性的作用就是專門用于控制如何跳轉

值

描述

_blank

于在新的選項卡中跳轉，也就是新建頁面跳轉

_self

默認。在當前選項卡中打開被鏈接文檔，也就是不新建頁面跳轉

_parent

在父框架集中打開被鏈接文檔。

_top

在整個窗口中打開被鏈接文檔。

framename

在指定的框架中打開被鏈接文檔。

<a href="https://www.toutiao.com/">可見內容</a>
<a href="https://www.toutiao.com/" target=”_blank”>江湖可見博客</a>

a標簽中還有一個屬性，叫做title，a標簽中的title和img標簽中title一樣，都是用來控制鼠標懸停時顯示的提示文本內容的

<a href="https://www.toutiao.com/" target="_blank" title="點擊會跳轉到可見博客首頁">可見</a>

設置 target 屬性時， top 與 parent 的打開方式十分類似，需仔細區分。

比如網 A 中鑲嵌了 iframe 網頁 B，網頁 B 又鑲嵌了 iframe 網頁C。

· 如果網頁 C 中連接設置 target=_parent，則跳轉到網頁 B 去掉直接在 A 中嵌入網頁 C 中鏈接頁面。

· 如果網頁 C 中 target=_top ，則直接跳出所有 iframe 框架，直接轉向 C 中鏈接頁面

注意點：

1.a標簽不僅可以讓文字可以點擊，還可以讓圖片也能夠被點擊。

2.一個a標簽必須有一個href屬性，否則a標簽不知道要跳轉到什么地方

3.如果通過a標簽的href屬性指定一個URL地址，那么必須在地址前面加上http://或https://。

4.a標簽的href屬性除了可以綁定一個網絡地址以外，還可以指定一個本地的地址

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>a標簽的使用</title>
</head>
<body>
		<a name="top"></a>
		<a href="https://www.toutiao.com/">a是控制界面也頁面的跳轉</a><br><br>
		<a href="https://www.toutiao.com/" target="_blank">跳轉到新窗口打開</a><br><br>

		<a href="#name1">錨點跳轉1</a>&nssp;&nssp;&nssp;<a href="#name2">錨點跳轉2</a>


		<br><br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br>
		<br><br><br><br><br>
		<br><br><br><br><br>
		<br><br><br><br><br>
		<br><br><br><br><br>
		<br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

		這是一個錨點跳轉文字1 <a name="name1"></a>   <a href="#top">返回頂部</a>

	<br><br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br>
		<br><br><br><br><br>
		<br><br><br><br><br>
		<br><br><br><br><br>
		<br><br><br><br><br>
		<br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

		這是一個錨點跳轉文字2 <a name="name2"></a>   <a href="#top">返回頂部</a>
</body>
</html>

關注我，點擊下面鏈接，即可看視頻

在線咨詢

上一篇：21html模版里的if判斷語句
下一篇：Canvas學習筆記 - 圖片操作

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。