前端开发：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小时内与您取得联系。