localStorage基础

Window localStorage 属性

HTML5 提供了两种新的本地存储方案，sessionStorage和localStorage，统称WebStorage。
顾名思义：
sessionStorage 是针对session的数据存储，关闭窗口后删除。
localStorage 是一个本地的没有时间限制的数据存储。

它们同样遵循SOP

语法:

window.localStorage

保存数据语法:

localStorage的局限

1、浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性

2、目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换

3、localStorage在浏览器的隐私模式下面是不可读取的

4、localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡

5、localStorage不能被爬虫抓取到

localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对会被清空

6、localStorage的使用也是遵循同源策略的，所以不同的网站直接是不能共用相同的localStorage

localStorage方法
setItem 存储数据【增】
getItem 读取数据【查单个】
removeItem 删除某个数据【删单个】
clear 删除全部数据【删全部】
length localStorage存储变量的个数【计算数据总数】
key 读取第i个数据的名字或称为键值(从0开始计数)
valueOf 获取所有存储的数据【查全部】
hasOwnProperty 检查localStorage上是否保存了变量x，需要传入x【判断】
propertyIsEnumerable 用来检测属性是否属于某个对象的【判断】
toLocaleString 将（数组）转为本地字符串

localStorage.setltem()存储数据

localStorage.getItem()读取数据

localStorage.removeItem()删除数据

localStorage.clear()

localStorage安全分析

现在越来越多的前端人员把性能优化的目标指向了本地存储，利用localStorage来进行本地资源缓存，因为其大小上限为5MB，可以装相当多的东西，甚至在FireFox中你还可以修改这个上限。

虽然说这个localStorage非常好用但也存在安全隐患，如果我们将恶意代码植入里面那么这段恶意代码也会一直存在知道用户清空我们的localStorage为止

我们可以看一段代码:将原来localStorage存储的name数据赋值给id为test的页面元素 我们可以设想万一里面是恶意代码呢

<!DOCTYPE html>

<html>

<head>

    <title>localStorage XSS</title>

</head>

<body>

<div id="test"></div>

<script type="text/javascript">

    localStorage.setItem('name','xiaohua');

    document.getElementById("test").innerHTML = localStorage.name;

</script>

</body>

</html>

我们修改原有的localStorage里面name的值为恶意的XSS弹窗代码 此时XSS弹窗发生

<!DOCTYPE html>

<html>

<head>

    <title>localStorage XSS</title>

</head>

<body>

<div id="test"></div>

<script type="text/javascript">

    localStorage.setItem('name','<img src=@ onerror=alert(1)>');

    document.getElementById("test").innerHTML = localStorage.name;

</script>

</body>

</html>

实例场景:

参考学习:https://blog.csdn.net/yanghuan313/article/details/55260232

HTML5 localStorageXSS漏洞的更多相关文章

  1. web前端工程师必须掌握的localStorage(二)

    最近工作太忙了,回来后就很晚了,因为红牛喝太多都不想睡觉了(公司免费给的,好多箱o(╯□╰)o),睡不着就想着逛逛博客园,本人最近忙着做一个仿原生app的singlePage应用,话说最近后台那帮兄弟 ...

  2. 使用HTML5的History API

    HTML5 History API提供了一种功能,能让开发人员在不刷新整个页面的情况下修改站点的URL.这个功能很有用,例如通过一段JavaScript代码局部加载页面的内容,你希望通过改变当前页面的 ...

  3. 微信浏览器是移动端的IE6?微信升级内核后Html5和CSS3兼容性总结

    今年4月,自从微信浏览器X5 升级Blink内核之后,各前端社区一片高潮,仿佛看到了前端er,眼含热泪进而抱头痛头的说:终于可以不用兼容这"移动端的IE6 "了,可以早点回家了!! ...

  4. 第 1 章 HTML5 概述

    学习要点: 1.HTML5 的历史 2.HTML5 的功能 3.HTML5 的特点 4.课程学习问题 主讲教师:李炎恢 HTML5 是继 HTML4.01 和 XHTML1.0 之后的超文本标记语言的 ...

  5. HTML5攻防向量

    From:HTML 5 Morden Day Attack And Defense Vectors Autor:Rafay Baloch 摘要 根据Powermapper出版的统计,他们分析的Web页 ...

  6. HTML5 Audio and Video 的新属性简介

    前言:HTML5 中 Audio and Video的使用方法比较简单,但就是比较复杂,方法属性多.如果不常用的几乎难以记住,甚至有些人难以区分不同属性和方法的作用,更别说应用了.以下对Audio a ...

  7. Kali Linux渗透基础知识整理（二）漏洞扫描

    Kali Linux渗透基础知识整理系列文章回顾 漏洞扫描 网络流量 Nmap Hping3 Nessus whatweb DirBuster joomscan WPScan 网络流量 网络流量就是网 ...

  8. HTML5本地存储 localStorage

    HTML5的本地存储是大势所趋,如果仅存储在内存中,则是sessionStorage,他们的语法都是一样,仅仅是一个存储在本地文件系统中,另一个存储在内存中(随着浏览器的关闭而消失),其语句如下: l ...

  9. JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记1

    技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] 第 3 章 用 JavaScri ...

随机推荐

  1. 基于web的图书管理系统设计与实现（附演示地址）

    欢迎访问博主个人网站,记得收藏哦,点击查看 - - - >>>> 公众号推荐:计算机类毕业设计系统源码,IT技术文章分享,游戏源码,网页模板 小程序推荐:网站资源快速收录--百 ...

  2. 入门 第一个python可视化程序 基于pyqt5

    不得不说 py的GUI实在是太难上手了 我现在突然很怀念MFC VB c#这些东西了 因为控件的代码你只要一点就能进入查看 而pyqt5 pyside2 都不可以 你要看就看全部的代码 你要改你也只能 ...

  3. 观察者模式EventBus

    EventBus能够简化各组件间的通信,让我们的代码书写变得简单,能有效的分离事件发送方和接收方(也就是解耦的意思),能避免复杂和容易出错的依赖性和生命周期问题. implementation 'or ...

  4. MFiX做增量编译的时候不要删掉*.mod和*.inc文件

    其实之前发现了这个问题,但是没有记录,过了好久又忘了.具体问题是,在做增量编译的之前,都会习惯性地删除多余文件再编译,随手就把*.mod和*.inc这类中间文件也删了,结果修改完代码执行 make - ...

  5. 并发编程——多线程计数的更优解：LongAdder原理分析

    前言 最近在学习ConcurrentHashMap的源码,发现它采用了一种比较独特的方式对map中的元素数量进行统计,自然是要好好研究一下其原理思想,同时也能更好地理解ConcurrentHashMa ...

  6. 【实战】记一次老项目的swagger整合

    1.背景 这两天接到一个整合swagger的任务,本以为很简单,预计两小时内完成,没想到其中有太多的坑,整了两天才完成. 首先项目是一个比较老的项目,之前用的servlet,目前在重构为springm ...

  7. 宝塔面板无法进入phpadmin管理数据库解决办法

    ECS--华为云 宝塔面板6.0 phpMyAdmin 4.4 经过搜索发现问题在于端口和安全组规则 解决方法如下 1.在安全中添加888端口 2.华为云安全组规则--入方向规则--添加规则 3.打开 ...

  8. dcoker 搭建单节点redis

    1.安装docker 1.检查内核版本,必须是3.10及以上 [root@localhost ~]# uname -r 2.安装docker [root@localhost ~]# yum insta ...

  9. mysql增删改查语法

    MySQL 关注公众号"轻松学编程"了解更多. MySQL是关系型数据库,对大小写不敏感. MySQL属于关系型数据库, 优点: 复杂查询 可以用SQL语句方便的在一个表以及多个表 ...

  10. DES 实现

    原理 加密 置换: IP逆置换: 迭代: PC-1置换: PC-2置换: 子秘钥的生成: 加密函数f: 解密 代码 // C语言实现 #include<stdio.h> #include& ...