xgqfrms™, xgqfrms® : xgqfrms's offical website of cnblogs! xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

Web cookie All In One

Web cookie All In One

credentials: "include"

https://developers.google.com/web/updates/2015/03/introduction-to-fetch

image

why & solution

cookie & Fetch & credentials

https://github.com/github/fetch#sending-cookies
https://github.com/github/fetch#receiving-cookies

image

https://github.com/github/fetch#read-this-first

image

https://developer.mozilla.org/en-US/docs/Glossary/Forbidden_header_name

Set-Cookie & Secure & HttpOnly & SameSite

Set-Cookie

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie

image

https

https://stackoverflow.com/questions/37234687/how-to-set-cookie-secure-flag-using-javascript

cookie


document.cookie = "testCookie=javascript2050; Expires=Wed, 21 Oct 2020 07:28:00 GMT; path=/;domain=.cnblogs.com;Secure;";
// "testCookie=javascript2050; Expires=Wed, 21 Oct 2020 07:28:00 GMT; path=/;domain=.cnblogs.com;Secure;

document.cookie;;
// "testCookie=javascript2050"

image

HttpOnly

A HttpOnly cookie means that it's not available to scripting languages like JavaScript.

https://stackoverflow.com/questions/14691654/set-a-cookie-to-httponly-via-javascript
https://stackoverflow.com/questions/14691654/set-a-cookie-to-httponly-via-javascript/14691716#14691716

https://github.com/js-cookie/js-cookie/issues/344

SameSite

https://stackoverflow.com/questions/50361460/samesite-cookie-attribute-not-being-set-using-javascript

不支持 fill:// 协议，无法写 cookie!

image

一次只能写一个?

image

http://javascript.ruanyifeng.com/bom/cookie.html

image

逗号进行转义? 瞎扯


document.cookie = 'jwt=aaa.bbb.ccc';
// "jwt=aaa.bbb.ccc"
document.cookie;

image

http only & path & expires

image

image

image

// document.cookie = ".test=javascript2020;Expires=Wed, 21 Oct 2020 07:28:00 GMT;path=/;domain=www.cnblogs.com";

document.cookie = ".test=javascript2020;Expires=Wed, 21 Oct 2020 07:28:00 GMT;path=/;domain=cnblogs.com";

// ".test=javascript2020;Expires=Wed, 21 Oct 2020 07:28:00 GMT;path=/;domain=www.cnblogs.com"

document.cookie;

image

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie

https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies

Request & header

https://developer.mozilla.org/en-US/docs/Glossary/Request_header

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers

???

image

cookie

image

new headers({})

https://davidwalsh.name/fetch

https://stackoverflow.com/questions/35733138/send-cookie-in-http-post-request-in-javascript



const fetchJSON = (url = ``) => {
    let headers = new Headers({
        "Content-Type": "application/json; charset=utf-8;",
        "cookie": "access_token=eyJhbGciOiJIUzI1NiJ9.eyJyb2xlIjoiQWRtaW4iLCJ1c2VyX25hbWUiOiJhZG1pbiJ9.k82neq7nQXjz3xBu0P7jnbukOx57WUo4_V3DLStkEss; Expires=Wed, 21 Oct 2020 07:28:00 GMT; path=/; Secure; HttpOnly;",
        "Set-Cookie": "access_token=eyJhbGciOiJIUzI1NiJ9.eyJyb2xlIjoiQWRtaW4iLCJ1c2VyX25hbWUiOiJhZG1pbiJ9.k82neq7nQXjz3xBu0P7jnbukOx57WUo4_V3DLStkEss; Expires=Wed, 21 Oct 2020 07:28:00 GMT; path=/; Secure; HttpOnly;",
    });
    return fetch(url, {
        // method: "POST",
        method: "GET",
        mode: "no-cors",
        headers: headers,
    })
    .then(res => res.json())
    .then(
        (json) => {
            return json;
        }
    )
    .catch(err => console.log(`fetch error`, err));
};




"use strict";

/**
 *
 * @author xgqfrms
 * @license MIT
 * @copyright cookie
 * @description
 * @augments
 * @example
 *
 */
const  = ( = ``, debug = false) => {
    // do something...
    return ;
};
const commments = {
    "commentId":3997788,
    "voteType":"Digg"
};

const url = "https://www.cnblogs.com/mvc/vote/VoteComment.aspx";

// https://www.cnblogs.com/mvc/vote/VoteBlogPost.aspx

// blog = {
//     "blogApp": "xgqfrms",
//     "postId": 9178897,
//     "voteType": "Digg",
//     "isAbandoned": false
// };

fetch(url, {
    method: "POST",
    headers: {
        "Accept":  "application/json",
        "Content-Type": "application/json",
        "Cache": "no-cache"
    },
    credentials: "same-origin",
    body: JSON.stringify(commments),
});

image

image

bug

前端如果不设置 credentials, 字段，后端无法写入 cookie(Set-Cookie)， 前端无法发送 cookie ???

conclusion

  1. cookie 必须同源， domain 不许一致。

  2. 前端如果不设置 credentials, 字段， 前端无法发送 cookie !

  3. 后端无法写入 cookie(Set-Cookie) ？？？


credentials: "include",



const fetchJSON = (url = ``, data = {}) => {
    // let headers = new Headers({
    //     "Content-Type": "application/json; charset=utf-8;",
    //     "cookie": "access_token=eyJhbGciOiJIUzI1NiJ9.eyJyb2xlIjoiQWRtaW4iLCJ1c2VyX25hbWUiOiJhZG1pbiJ9.k82neq7nQXjz3xBu0P7jnbukOx57WUo4_V3DLStkEss; Expires=Wed, 21 Oct 2020 07:28:00 GMT; path=/; Secure; HttpOnly;",
    //     "Set-Cookie": "access_token=eyJhbGciOiJIUzI1NiJ9.eyJyb2xlIjoiQWRtaW4iLCJ1c2VyX25hbWUiOiJhZG1pbiJ9.k82neq7nQXjz3xBu0P7jnbukOx57WUo4_V3DLStkEss; Expires=Wed, 21 Oct 2020 07:28:00 GMT; path=/; Secure; HttpOnly;",
    // });
    return fetch(url, {
        // method: "POST",
        method: "GET",
        mode: "no-cors",
        credentials: "include",
        // credentials: "same-origin",
        headers: {
            "Accept": "application/json; charset=utf-8;",
            "Content-Type": "application/json; charset=utf-8;",
            "Cache": "no-cache",
            // "Set-Cookie": "access_token=eyJhbGciOiJIUzI1NiJ9.eyJyb2xlIjoiQWRtaW4iLCJ1c2VyX25hbWUiOiJhZG1pbiJ9.k82neq7nQXjz3xBu0P7jnbukOx57WUo4_V3DLStkEss",
            // "XYZ": "access_token=eyJhbGciOiJIUzI1NiJ9.eyJyb2xlIjoiQWRtaW4iLCJ1c2VyX25hbWUiOiJhZG1pbiJ9.k82neq7nQXjz3xBu0P7jnbukOx57WUo4_V3DLStkEss",
            // "Cookie": "access_token=eyJhbGciOiJIUzI1NiJ9.eyJyb2xlIjoiQWRtaW4iLCJ1c2VyX25hbWUiOiJhZG1pbiJ9.k82neq7nQXjz3xBu0P7jnbukOx57WUo4_V3DLStkEss; Expires=Wed, 21 Oct 2020 07:28:00 GMT; path=/; Secure; HttpOnly;",
            // "Set-Cookie": "access_token=eyJhbGciOiJIUzI1NiJ9.eyJyb2xlIjoiQWRtaW4iLCJ1c2VyX25hbWUiOiJhZG1pbiJ9.k82neq7nQXjz3xBu0P7jnbukOx57WUo4_V3DLStkEss; Expires=Wed, 21 Oct 2020 07:28:00 GMT; path=/; Secure; HttpOnly;",
            // "Cookie": "access_token=eyJhbGciOiJIUzI1NiJ9.eyJyb2xlIjoiQWRtaW4iLCJ1c2VyX25hbWUiOiJhZG1pbiJ9.k82neq7nQXjz3xBu0P7jnbukOx57WUo4_V3DLStkEss; Expires=Wed, 21 Oct 2020 07:28:00 GMT; path=/; HttpOnly;",
            //  Secure; & cookie只会被https传输 (boolean或null)。
        },
        // body: JSON.stringify({
        //     user_name: "admin",
        //     password: "admin",
        // }),
        // headers: new Headers({
        //     "Content-Type": "application/json; charset=utf-8;",
        //     "cookie": "access_token=eyJhbGciOiJIUzI1NiJ9.eyJyb2xlIjoiQWRtaW4iLCJ1c2VyX25hbWUiOiJhZG1pbiJ9.k82neq7nQXjz3xBu0P7jnbukOx57WUo4_V3DLStkEss; Expires=Wed, 21 Oct 2020 07:28:00 GMT; path=/; Secure; HttpOnly;",
        //     "Set-Cookie": "access_token=eyJhbGciOiJIUzI1NiJ9.eyJyb2xlIjoiQWRtaW4iLCJ1c2VyX25hbWUiOiJhZG1pbiJ9.k82neq7nQXjz3xBu0P7jnbukOx57WUo4_V3DLStkEss; Expires=Wed, 21 Oct 2020 07:28:00 GMT; path=/; Secure; HttpOnly;",
        // }),
    })
    // .then(res => res.json())
    .then(
        (json) => {
            return json;
        }
    )
    .catch(err => console.log(`fetch error`, err));
};

cookieGenerator();



/**
 *
 * @author xgqfrms
 * @license MIT
 * @copyright xgqfrms
 *
 * @description cookieGenerator
 *
 * @param {String} name cookie name
 * @param {String} value cookie value
 * @param {Number} days
 * @param {String} path
 * @param {String} domain
 * @param {String} HttpOnly (JavaScript absolutely no API available to get/set the HttpOnly attribute of the cookie!)
 * @param {Boolean} Secure
 * @param {ENUM} SameSite=Lax / SameSite=Strict (This is an attribute that can only be set by server (like HttpOnly) in response cookies it sends to browser.)
 *
 */

const cookieGenerator = (
    options = {
        name: "testCookie",
        value: "testcookie",
        days: 0,
        path: "/",
        domain: window.parent.document.domain,
        // HttpOnly: false,
        Secure: false
    }) => {
    let {
        name,
        value,
        days,
        path,
        domain,
        // HttpOnly,
        secure
    } = options;
    let result = ``,
        expires = ``,
        date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    expires = date.toUTCString();
    result = `${name}=${value}; Expires=${expires}; Path=${path}; Domain=${domain};`;
    // if (httponly) {
    //     result += `Http;`;
    //     result += `HttpOnly;`;
    // }
    if (secure) {
        result += `Secure;`;
    }
    // document.cookie = result;
    return result;
};

demos

refs

©xgqfrms 2012-2021

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

posted @   xgqfrms  阅读(88)  评论(11)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· .NET10 - 预览版1新功能体验（一）
历史上的今天：
2017-06-13 JS Object Deep Copy & 深拷贝 All In One
2016-06-13 JS 用户代理 信息 检测
2016-06-13 免版税图片库 All In One
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛