前端基础 HTML5新特性

一、新增标签

1. 新增语义化标签

标签	含义
header	定义页头
nav	定义导航栏
aside	定义侧边栏
article	定义文章
section	定义文档中的区段
footer	定义页脚

2. 添加多媒体标签video和audio

添加canvas和svg

二、增强input控件

具体看这里:增强input

三、添加新的API

1. 拖拽API

2. 地理位置API

源文档：Geolocaltion API
地理位置API通过navigator.geolocation 提供

1. 获取当前定位 getCurrentPosition()
2. 监听定位 watchPosition()
3. 取消监听 clearWatch(监听ID)
4. 参数：getCurrentPosition/watchPosition一样，
   • 第一个参数是成功回调函数。
   • 第二个参数是失败回调参数，
   • 第三个可以设置等待时长和是否获取高精度定位

navigator.geolocation.getCurrentPosition(
position => { const { latitude, longitude } = position.coords}，
console.error,
 { 
 	enableHighAccuracy: true,//是否获取高精度定位
	maximumAge: 600000,//缓存定位
	timeout:10000 //等待时长
  }
);
const watchId = navigator.geolocation.watchPosition(
      position => console.log(position)
);
//点击取消监听
function buttonClickHandler() {
     navigator.geolocation.clearWatch(watchId);
}

可以直接调用

3. 本地缓存webStorage

1. localStorage

   • 永久缓存在浏览器中
   • 只能主动清除
   • 设置：localStorage.setItem(“userToken”,“token”)
   • 获取：设置：localStorage.getItem(“userToken”)
   • 清除指定key :localStorage.removeItem(“userToken”)
   • 清除所有域名下key：localStorage.clear()

2. sessionStorage

   • 只要窗口关闭 缓存就会清除
   • 相同链接打开同一个网站的sessionStrogae不同（所以sessionStroage是相对窗口的而不是相对浏览器）
   • 设置：sessionStorage.setItem(“userToken”,“token”)
   • 获取：设置：sessionStorage.getItem(“userToken”)
   • 清除指定key :sessionStorage.removeItem(“userToken”)
   • 清除所有域名下key：sessionStorage.clear()

3. cookies ：

   • 大小限制4K左右（因浏览器而异）
   • expire：cookie 的生命周期，默认暂时缓存（只要关闭浏览器，cookie就会消失）
   • 使用http协议请求时候的页面，只要符合请求的域名和路径跟domain/path就会自动header带上cookie（所以cookie会增大带宽）
   • 读取所有cookie:document.cookie

cookie的属性

属性	含义
name	cookie Name
value	cookie Value
domain	设置共享cookie的域名，默认是当前域名
path	设置cookie关联的域名下的路径可以共享
expires	生存周期
size	name+value的长度
httpOnly	如果设置为true js无法读取cookie信息，可以防止XSS攻击
secure	在https下才会带上cookie传递

为什么说使用token比使用cookie安全？

CSRF

CSRF即跨站请求攻击。攻击者通过一些技术手段欺骗用户的浏览器去访问一个自己以前认证过的站点并运行一些操作（如转账）

GET方法CSRF

就像身份证一样，cookie就是一个用户使用网站的身份证

例如你登陆了 【借贷公司A】 的网站并登录成功获取到cookie
可是【借贷公司A】 使用get方法进行更新数据（例如借钱接口），你在没退出登录的情况下去了 【恶意网站B】，【恶意网站B】构建了一个吸引人的图片实际上【借贷公司A】借钱的链接，这时候 就会跳转到请求接口（跳转到一个新的页面，不会有跨域问题或者更隐秘隐藏iframe），因为cookie会自动带上，那就是拿着你的身份证去借钱。

这情况主要是【借贷公司A】使用GET方法进行更新资源，而且没有任何校验导致【恶意网站B】让用户直接请求了自己不知道的操作

此时使用token（同样理解为身份证，不会自动添加到请求头）而不是cookie的话是需要把token放到指定地方

POST方法CSRF

post方法差不多:利用form标签的form属性target属性，会打开一个新的窗口调用http协议里面的方法进行请求，所以如果cookie没过期，请求过程中header就会自动带上，而如果是token需要录入才行

form target属性 target

1.所有主流浏览器都支持 target 属性
2.target 属性规定一个名称或一个关键词，指示在何处打开 action URL，即在何处显示提交表单后接收到的响应。
3.target 属性定义浏览器上下文（比如选项卡、窗口或内联框架）的名称或关键词。

防御CSRF

1. 操作数据使用post（参数不好构建，也不安全），get用于获取资源或者数据
2. 敏感操作的时候往后端请求【随机值】，【随机值】作为敏感操作的校验
3. 强制用户进行二次确定操作
4. 服务端Referer校验，前端在请求的时候会带上referer，判断这个路径是不是正确

4. web Sockets