精华内容
下载资源
问答
  • 今天我们来了解下有哪些常见的加密方式。 单向散列加密 单向散列(hash)加密是指把任意长的输入串变化成固定长的输出串,并且由输出串难以得到输入串的加密方法,这种方法称为单项散列加密。广泛应用于对敏感数据...

    今天,我们对信息安全越来越受重视,WEB开发中的各种加密也变得更加重要。通常跟服务器的交互中,为确保数据传输的安全性,避免被人抓包篡改数据,除了 https 的应用,还需要对传输数据进行加解密。今天我们来了解下有哪些常见的加密方式。

    单向散列加密

    单向散列(hash)加密是指把任意长的输入串变化成固定长的输出串,并且由输出串难以得到输入串的加密方法,这种方法称为单项散列加密。广泛应用于对敏感数据加密,比如用户密码,请求参数,文件加密等。我们开发中存储用户密码就用到了单向散列加密算法。

    常见的单向散列加密算法有:

    • MD5
    • SHA
    • MAC
    • CRC

    单向散列加密算法的优点有(以MD5为例):

    • 方便存储:加密后都是固定大小(32位)的字符串,能够分配固定大小的空间存储。
    • 损耗低:加密/加密对于性能的损耗微乎其微。
    • 文件加密:只需要32位字符串就能对一个巨大的文件验证其完整性。
    • 不可逆:大多数的情况下不可逆,具有良好的安全性。

    单向散列加密的缺点就是存在暴力破解的可能性,最好通过加盐值的方式提高安全性,此外可能存在散列冲突。我们都知道MD5加密也是可以破解的。

    对于PHPer来说,不推荐使用md5()简单加密,而是推荐大家使用password_hash()对数据加密存储,该函数使用足够强度的单向散列算法创建密码的哈希(hash),使加密后的数据更加安全可靠。对于用户密码的加密存储和验证支持相当好。

    示例代码:

    //密码加密
    $password = '123456';
    $passwordHash = password_hash(
        $password,
        PASSWORD_DEFAULT,
        ['cost' => 12]
    );
    
    //密码验证
    if (password_verify($password, $passwordHash)) {
        //Success
    } else {
        //Fail
    }

    对称加密

    同一个密钥可以同时用作数据的加密和解密,这种方法称为对称加密。应用于相对大一点的数据量或关键数据的加密的场景。我们开发中常用到接口参数签名验证服务就用到了对称加密算法。

    常见的对称加密算法有:

    • DES
    • AES

    AES 是 DES 的升级版,密钥长度更长,选择更多,也更灵活,安全性更高,速度更快。

    对称加密优点是算法公开、计算量小、加密速度快、加密效率高。

    缺点是发送方和接收方必须商定好密钥,然后使双方都能保存好密钥,密钥管理成为双方的负担。

    对称算法的安全性依赖于密钥,泄漏密钥就意味着任何人都可以对他们发送或接收的消息解密,所以密钥的保密性对通信的安全性至关重要。

    PHP示例

    //DES加密
    $key = '123kils1321dshfdsvcxpUsdaq23'; //安全密钥
    $data = 'name=iphone11&order_id=201233232323123&price=3357&num=2';//加密明文
    $decodeData = openssl_encrypt($data, 'DES-ECB', $key, 0);

    使用PHP自带的openssl_encrypt加密方法,对数据进行DES加密结果如下:

    oc3PdhugNue/t3i8HfXjd9YUP9BnTLg0Re9R1u2fsZr0jU2hIpCIjR0bruAwNSIGkqulrNHGYm8=

    另外一方在拿到密文后,再使用相同的密钥,使用openssl_decrypt()对密文进行DES解密:

    $key = '123kils1321dshfdsvcxpUsdaq23'; //安全密钥
    $decodeData = 'oc3PdhugNue/t3i8HfXjd9YUP9BnTLg0Re9R1u2fsZr0jU2hIpCIjR0bruAwNSIGkqulrNHGYm8=';
    $de = openssl_decrypt($decodeData, 'DES-ECB', $key, 0);
    echo $de;

    运行代码,最后得到解密后的结果:

    name=iphone11&order_id=201233232323123&price=3357&num=2

     

    DES-ECB是加密方式,可以到php官方文档上查看更多加密方式:https://www.php.net/manual/zh/function.openssl-get-cipher-methods.php

     

    非对称加密

    非对称加密是指需要两个密钥来进行加密和解密,这两个秘钥分别是公钥(public key)和私钥(private key),这种方法称为非对称加密。非对称加密适合于对安全性要求很高的场景,适合加密少量数据,比如支付数据、CA数字证书等。

    常见的非对称加密算法有RSARSA2

    非对称加密的优点是与对称加密相比,安全性更好,加解密需要不同的密钥,公钥和私钥都可进行相互的加解密。

    缺点是加密和解密花费时间长、速度慢,只适合对少量数据进行加密。

    非对称加密算法的RSA2比RSA有更强的安全能力。蚂蚁金服,新浪微博 都在使用 RSA2 算法。

    创建公钥和私钥:

    openssl genrsa -out private_key.pem 2048
    openssl rsa -in private_key.pem -pubout -out public_key.pem

    执行上面命令,会生成private_key.pempublic_key.pem 两个文件。

    具体示例代码我们在后续的文章专门会讲解,敬请留意。

     

    前端加密

    前端的朋友可能会关注前端js加密,我们在做 WEB 的登录功能时一般是通过 Form 提交或 Ajax 方式提交到服务器进行验证的。为了防止抓包,登录密码肯定要先进行一次加密(RSA),再提交到服务器进行验证。一些大公司都在使用,比如淘宝、京东、新浪 等。

    前端加密也有很多现成的js库,如:

    JS-RSA: 用于执行OpenSSL RSA加密、解密和密钥生成的Javascript库,https://github.com/travist/jsencrypt

    MD5: 单向散列加密md5 js库,https://github.com/blueimp/JavaScript-MD5

    crypto-js: 对称加密AES js库,https://github.com/brix/crypto-js

     

    本文来源于helloweba.net

    链接:https://www.helloweba.net/news/629.html

    展开全文
  • web存储技术

    2019-11-26 20:43:28
    1.什么是web存储技术? 随着Web应用的发展,数据存储不在单一的存储在后台的数据库中(mongoDB,mysql,oracle)。客户端(浏览器)存储的用途也越来越来,最经典的就是“记住用户名”,...2.有哪些web存储技术? ...

    1.什么是web存储技术?

        随着Web应用的发展,数据存储不在单一的存储在后台的数据库中(mongoDB,mysql,oracle)。客户端(浏览器)存储的用途也越来越来,最经典的就是“记住用户名”,实现客户端存储的方式有很多种,比如cookie(通用),flash(插件),userData(ie),globalStroage(firefox)。

     

    2.有哪些web存储技术?

        1.Cookie  http无状态 - 服务器不知道是谁发的通信- 不知道是不是上一个人,Cookie实际上是一小段的文本信息(key-value格式)。客户端向服务器发起请求,如果服务器需要记录该用户状态,
          就使用response向客户端浏览器颁发一个Cookie。客户端浏览器会把Cookie保存起来。当浏览器再请求该网站时,
          浏览器把请求的网址连同该Cookie一同提交给服务器。服务器检查该Cookie,以此来辨认用户状态。

           存在形式:字符串类型-'key=value;key=value;...'
            容量:4kb
            每次浏览器发送请求会带上cookie信息 - 不安全

     

       2.sessionStorage 会话级存储

            生命周期:页面打开到页面关闭 - 是一个临时存储的地方

            注意:存储的数据一定是一个字符串,因此存储时常用JSON.stringify(obj)在进行存储

            使用: 存储    sessionStorage .setItem("数据的变量名",存储的数据)

                        获取   sessionStorage .getItem("数据的变量名")

                        删除   sessionStorage .removeItem("数据的变量名")

                        清楚所有 sessionStorage .clear()

    3 localStorage 本地存储

           生命周期: 永久存储,除非进行手动删除

    使用: 存储    localStorage .setItem("数据的变量名",存储的数据)

                        获取   localStorage .getItem("数据的变量名")

                        删除   localStorage .removeItem("数据的变量名")

                        清楚所有 localStorage .clear()

     

    3.存储技术的实例 - 任务清单

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            #wrap {
                width: 420px;
                height: 550px;
                background: pink;
                margin: 50px auto;
            }
    
            h2 {
                height: 55px;
                line-height: 55px;
                text-align: center;
            }
    
            #title {
                height: 45px;
                background: gray;
            }
    
            .showList,
            .addTask {
                display: inline-block;
                width: 49%;
                text-align: center;
                height: 45px;
                line-height: 45px;
            }
    
            span:hover {
                cursor: pointer;
            }
    
            .active {
                color: white;
            }
    
            .taskList {
                display: none;
                width: 100%;
                height: 400px;
                /* background: salmon; */
            }
    
            .add {
                padding-left: 15px;
                padding-top: 25px;
                width: 100%;
                height: 300px;
                /* background: fuchsia; */
            }
    
            ul,
            li {
                list-style: none;
            }
    
            ul {
                padding: 0;
                margin: 0;
                width: 100%;
                height: 400px;
                /* background: salmon; */
            }
    
            .time,
            .task {
                display: inline-block;
                width: 35%;
                height: 40px;
                line-height: 40px;
                text-align: center;
                /* background: cadetblue; */
            }
    
            .delete {
                cursor: pointer;
                width: 45px;
                height: 25px;
                margin-left: 50px;
            }
    
            .Nowtask {
                height: 23px;
            }
    
            .date {
                width: 157px;
                height: 23px;
            }
    
            .toAdd {
                margin-left: 88px;
                width: 76px;
                height: 27px;
            }
        </style>
    </head>
    
    <body>
        <div id="wrap">
            <h2>希望清单</h2>
            <div id="title">
                <span class="showList" data-title="taskList">任务列表</span>
                <span class="addTask active" data-title="add">添加任务</span>
            </div>
            <div id='show'>
                <!-- 任务列表 -->
                <div class="taskList">
                    <ul>
                    </ul>
                </div>
    
                <!-- 添加任务 -->
                <div class="add">
                    任务:<input type="text" name="" id="" class="Nowtask"><br><br>
                    日期:<input type="date" name="" id="" class="date"><br><br>
                    <button class="toAdd">添加</button>
                </div>
    
            </div>
        </div>
    
        <script src="./jquery.min.js"></script>
        <script>
            //加载列表项
            showTask();  
    
            //点击切换 - 切换对应界面和当前字体颜色
            $('#title>span').click(function () {
                $(this).addClass('active').siblings().removeClass('active');
                let value = $(this).data('title');
                $('#show>div').hide();
                $(`.${value}`).show();
            })
    
    
            //提交进行存储
            $('.toAdd').click(function () {
                //获取值
                let task = $('.Nowtask').val();
                let date = $('.date').val();
                let obj = {
                    task: task,
                    date: date
                }
                //获取存储的数据并转为数组
                let taskList = JSON.parse(localStorage.getItem('taskList')) || [];
                taskList.push(obj);
                //重新进行保存数据
                localStorage.setItem('taskList', JSON.stringify(taskList));
    
                //将数据显示在列表项
                $('.taskList').show().siblings().hide();
                $('.showList').addClass('active').siblings().removeClass('active')
                //获取保存数据进行显示
                showTask();
    
            });
    
           //渲染数据
            function showTask() {
                let allTask = JSON.parse(localStorage.getItem('taskList')) || [];
                //遍历添加数据
                let html = '';
                allTask.forEach(function (v, i) {
                    html += ` <li>
                            <span class="time">${v.date}</span>
                            <span class="task">${v.task}</span>
                            <button class="delete" data-index ='${i}'>删除</button>
                        </li>`
                });
                $('ul').html('');
                //将数据进行渲染界面
                $('ul').append(html);
            }
    
    
           //利用委托事件制作删除
            $('ul').on('click','.delete',function(){
                let allTask = JSON.parse(localStorage.getItem('taskList')) || [];
                let index = $(this).data('index');
                console.log(index)
                allTask.splice(index,1);
                localStorage.setItem('taskList', JSON.stringify(allTask));
                showTask();
            })
    
    
        </script>
    </body>
    
    </html>

     

    展开全文
  • 【14】web存储

    2017-08-07 21:55:00
    3.web存储方式有哪些? 使用html5在本地存储用户的浏览数据,之前采用的cookie的形式,但是cookie存储的数据量少而且效率底,进而引入了web存储,客户端存储数据的方式有两种:localStorage,永久性存储,除非自己...
        

    首先我们来思考几个问题:
    1.什么是web存储?
    2.h5引入web存储的原因?
    3.web存储的方式有哪些?
    使用html5在本地存储用户的浏览数据,之前采用的cookie的形式,但是cookie存储的数据量少而且效率底,进而引入了web存储,客户端存储数据的方式有两种:localStorage,永久性存储,除非自己删除,sessionStorage,关闭浏览器之后就会清空。

    localStorage

    常用的可使用的api:
    保存数据:localStorage.setItem(key,value);
    读取数据:localStorage.getItem(key);
    删除单个数据:localStorage.removeItem(key);
    删除所有数据:localStorage.clear();
    得到某个索引的key:localStorage.key(index);

    几个api的使用:

    <!DOCTYPE html>
    <html>
    <head> 
    <meta charset="utf-8"> 
    <title>test</title> 
    </head>
    <body>
    <div id="result"></div>
    <script>
    if(typeof(Storage)!=="undefined")
    {
        localStorage.sitename="测试";
        localStorage.setItem("test","测试");
        var res=localStorage.getItem('test');
        document.getElementById("result").innerHTML=res;
        localStorage.removeItem("test");
        //localStorage.clear();
        document.getElementById("result").innerHTML+="<br/>"+localStorage.key(2);
    }
    else
    {
      document.getElementById("result").innerHTML="对不起,您的浏览器不支持 web 存储。";
    }
    </script>
    </body>
    </html>
    

    运行的结果:

    3956112-4e72ab5e790ee953.jpg
    2017-08-07_214611.jpg
    查看storage

    chorme浏览器下打开开发工具(F12),找到application,然后选择它就可以看到storage,你可以在这里进行数据的清除。

    3956112-354b05576a8931c0.jpg
    2017-08-07_214828.jpg
    sessionStorage

    关于sessionStorage和localStorage使用api是相同的,只不过它是临时存储,关闭浏览器就会自动清除。
    计数的例子:

    <!DOCTYPE HTML>
    <html>
    <body>
    <script type="text/javascript">
    if (sessionStorage.pagecount){
        sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
    }
    else{
        sessionStorage.pagecount=1;
    }
    document.write("Visits " + sessionStorage.pagecount + " time(s) this session.");
    </script> 
    <p>刷新页面会看到计数器在增长。</p>
    <p>请关闭浏览器窗口,然后再试一次,计数器已经重置了。</p>
    </body>
    </html>
    
    展开全文
  • 缓存相关知识点有哪些?在大型高并发系统中,如果没有缓存数据库将分分钟被爆,系统也会瞬间瘫痪。因此企业在招聘中都会考察求职者对缓存的掌握,一个出色的Web前端人才也需要了解缓存,接下来千小编就给大家简单...

      学Web前端要了解什么?缓存相关知识点有哪些?在大型高并发系统中,如果没有缓存数据库将分分钟被爆,系统也会瞬间瘫痪。因此企业在招聘中都会考察求职者对缓存的掌握,一个出色的Web前端人才也需要了解缓存,接下来千小编就给大家简单分享缓存相关的知识点。

    4b4344d4b713db16d4a28cb3b0482617.png

      在Web前端开发中,性能一直都是被大家所重视的一点,然而判断一个网站的性能最直观的就是看网页打开的速度。其中提高网页反应速度的一个方式就是使用缓存。一个优秀的缓存策略可以缩短网页请求资源的距离,减少延迟,并且由于缓存文件可以重复利用,还可以减少带宽,降低网络负荷。

      缓存可以是单个用户专用的,也可以是多个用户共享的。专用缓存被称为私有缓存,共享的缓存被称为公有缓存。

      私有缓存只针对专有用户,所以不需要很大空间,廉价。Web浏览器中有内建的私有缓存——大多数浏览器都会将常用资源缓存在你的个人电脑的磁盘和内存中。

      公有缓存是特殊的共享代理服务器,被称为缓存代理服务器或代理缓存(反向代理的一种用途)。公有缓存会接受来自多个用户的访问,所以通过它能够更好的减少冗余流量。

      在前端中常用的缓存有cookie及html中的localStorage和sessionStorage。三者的区别与联系如下:

      共同点:都是保存在浏览器端,且同源的。

      区别:

      1)cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。

      2)cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下。存储大小限制也不同,cookie数据不能超过4k,同时因为每次http请求都会携带cookie,所以cookie只适合保存很小的数据,如会话标识。

      sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。

      3)数据有效期不同:

      sessionStorage:仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持;

      localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;

      cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。

      4)作用域不同:

      不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的localStorage(页面属于相同域名和端口),但是不同页面或标签页间无法共享sessionStorage的信息。

      当然,关于Web前端缓存的知识点还有很多,在此小编就不一一列举了。如果你是零基础的小白,可以选择专业学习一下,由浅入深,以项目为主线、主导知识点学习,除了培养自身的开发技术,还能深度贯穿前端后端开发,紧贴主流企业一线需求,让你毕业即高薪就业。

    展开全文
  • web本地存储相关知识

    2020-08-05 17:25:26
    1、本地存储都有哪几种方式 web端的本地存储主要分为如下4种形式:cookie,sessionStorage,localStorage,indexedDb。其中indexedDb是一个小型数据库,这里不做讨论 2、cookie sessionStorage localStorage有哪些...
  • 内容有哪些?“,有兴趣做前端的朋友,和我一起来看看吧!1. Vuex 是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的...
  • 内容有哪些?“,有兴趣做前端的朋友,和我一起来看看吧!1. Vuex 是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的...
  • 2、websql这种方式只有较新的chrome浏览器支持,并以一个独立规范形式出现 3、indexDB是一个为了能够在客户端存储可观数量的结构化数据,并且在这些数据上使用索引进行高性能检索的 API 4、Cookie一般网站为了辨别...
  • 之前是用的session去存储记忆数据,老大让我调研一下目前比较合理的方式然后分析一下,这里以本篇博客作为总结。 二、核心思想   既然需要返回上一个页面时能够回到上一次的操作界面, 势必需要对某些数据进行记忆,...
  • nosql数据库有哪些 尽管Java或Web开发人员学习NoSQL数据库不是强制性的,但世界正在朝着这个方向发展,Java和Web开发人员都应该熟悉NoSQL数据库。 如果您想知道NoSQL数据库是什么意思,那么这里是快速概述。 NoSQL...
  • 典型的云计算提供商往往提供通用的网络业务应用,可以通过浏览器等软件或者其他Web服务来访问,而软件和数据都存储在服务器上。云计算服务通常提供通用的通过浏览器访问的在线商业应用,软件和数据可存储在数据中心...
  • 存储库包含用于在Shopify上构建Web应用程序的通用配置。 用法 此回购协议是由许多npm软件包组成的monorepo进行管理的,其中每个软件包都自己的README文件和描述用法的文档。 包装指数 名称 NPM 尺寸 贡献 该...
  • WEB端扣缴功能和扣缴客户端最大的区别在于数据存储方式的不同。使用扣缴客户端的扣缴义务人只能在安装了客户端的固定电脑上办理业务,所有数据也都存储在电脑上,如果遇到电脑损坏或重装电脑系统的情况...
  • 1、常见的数据库有哪些? MySQL SQL Server Oracle Access Redis 2、简述SQL Server数据库提权的原理及利用方式。 SQL Server数据库提权需要满足以下几个条件: (1)以管理员权限启动SQL Server服务。 (2)获取了SQL ...
  • NAS网络存储设备正是基于上述当前数据存储方式或设备的优劣点而开发出来的新型网络存储及备份设备,它将为你投入适当的成本就能获得更为合适,更有效,更具性价比的数据存储服务,满足企业数据备份与存储的六大需要:...
  • web爬虫Heritrix.zip

    2019-07-19 17:57:39
    Heritrix是按多线程方式抓取的爬虫,主线程把任务分配给Teo线程(处理线程),每个Teo线程每次处理一个URL。Teo线程对每个URL执行一遍URL处理器链。URL处理器链包括如下5个处理步骤。整个流程都在图2.1中。 (1)预取链...
  • HTML5 有哪些新特性? 声明方式,HTML4 规定了三种声明方式,分别是:严格模式、过渡模式 和 框架集模式;而HTML5因为不是SGML的子集,只需要<!DOCTYPE>就可以了。 语义化更好的内容标签:header、footer、...
  • XSS攻击有哪些类型? 反射型XSS,其中恶意脚本来自当前HTTP请求。 存储型XSS,其中恶意脚本来自网站的数据库。 基于DOM的XSS,该漏洞存在于客户端代码而不是服务器端代码中。 反射型XSS 反射型XSS是最简单的跨站点...
  • session认证需要服务端做大量的工作来保证session信息的一致性以及session的存储,所以现代的web应用在认证的解决方案上更倾向于客户端方向,cookie认证是基于客户端方式的,但是cookie缺点也很明显,到底有哪些缺点...
  • 接口的各种方式 分别什么用 区别是什么你应该知道吧? 接口的相关测试如何进行 你应该知道吧? 数据库的存储过程、基本原理、查询方法你应该知道吧? 接口和UI的自动化测试 如何设计如何实现 你应该知道吧? ...
  • 浏览器存储方式有哪些 对前后端跨域可以说一下吗?如何解决跨域的? 浏览器 cookie 和 session 的认识。 输入URL发生什么? 浏览器渲染的步骤 页面渲染优化 强制缓存和协商缓存 GET 和 POST 请求的区别 ...
  • 思考整个项目有哪些可以优化的地方,以及有哪些可增加的功能 页面展示 首页展示 文章编辑 后台管理 用户个人中心 项目需求 项目背景 对于初学Springboot的朋友来说,最好的一个学习方式就是那一个...
  • HTTP、浏览器面试题

    2020-07-07 02:15:05
    浏览器存储方式有哪些 对前后端跨域可以说一下吗?如何解决跨域的? 浏览器 cookie 和 session 的认识。 输入URL发生什么? 浏览器渲染的步骤 页面渲染优化 强制缓存和协商缓存 GET 和 POST 请求的区别 ...
  • 17、JSP和Servlet有哪些相同点和不同点,他们之间的联系是什么? 90 18、MVC的各个部分都有那些技术来实现?如何实现? 90 19、我们在web应用开发过程中经常遇到输出某种编码的字符,如iso8859-1等,如何输出一个某种...
  •  ArrayList 和Vector都是使用数组方式存储数据,此数组元素数大于实际存储的数据以便增加和插入元素,它们都允许直接按序号索引元素,但是插入元素要涉及数组元素移动等内存操作,所以索引数据快而插入数据慢,...
  • HTTP消息中header头部信息的讲解

    千次阅读 2016-11-08 10:17:08
    这两天面试被问到http的头信息,大概内容知道,究竟哪些是头部内容,哪些是主体,特总结如下: HTTP Request的Header信息   1、HTTP请求方式 如下表: GET 向Web服务器请求一个文件 ...
  • PHP就可以以这种方式安装,虽然很少人愿意这样以CGI方式安装它。内嵌的PHP可以具有更高的可伸缩性。 - 更多特点 PHP的开发者们为了更适合web编程,开发了许多外围的流行基库,这些库包含了更易用的层。你可以...

空空如也

空空如也

1 2 3 4 5 ... 7
收藏数 138
精华内容 55
关键字:

web存储方式有哪些