A Fetch Wrapper That Retain Cookies with Deno

deno-another-cookiejar

This library offers a fetch wrapper that retain cookies. This library also provides a simple cookiejar;

Why the name ? because I didn’t want to reserve the cookiejar name, since this library may not be good at it. (But I hope you like it)

usage

you can import Cookie, CookieJar, wrapFetch from mod.ts file.

export { Cookie, CookieJar, wrapFetch} from 'https://deno.land/x/another_cookiejar@v2.2.1/mod.ts';

wrapFetch

// this simple
const fetch = wrapFetch();

Or

// you can also pass your own cookiejar to wrapFetch to save/load your cookies
const cookieJar = new CookieJar();
// Now use this fetch and any cookie that is set will be sent with your next requests automatically
const fetch = wrapFetch({ cookieJar });
//...
fetch("http://example.com");
// and you can read your cookies from the jar
cookieJar.getCookie({
  name: 'cookieName',
})?.value // your cookie value

You can play around with it too see what it has to offer!

cookies should only be sent to their corresponding domains automatically.

Secure cookies will not be sent over unsecure connections.

Cookie

you can create cookies in two ways:

// first: using Cookie constructor with CookieOptions
const cookie = new Cookie({
  name: 'foo',
  value: 'bar'
});
// second: 
const cookie = Cookie.from('foo=bar;'); // any string from Set-Cookie header value is also valid.

CookieJar

const cookieJar = new CookieJar();

also if you have cookies from before:

const cookieJar = new CookieJar(cookiesArray); // cookiesArray: Array<Cookie> | Array<CookieOptions>
Note on retrieving cookies (+v2.0.0)

You can get cookies using either CookieOptions or a Cookie itself. The difference is if you use CookieOptions, it will strictly check any prop that is passed against the cookie. But if you use a Cookie object, it will only check name, path and domain.

JSON serializing Cookie

Each cookie object is easily serialized and deserialized. Example:

const exampleOption = { name: 'foo' , value: 'bar' };

const myCookie = new Cookie(exampleOption);

new Cookie ( 
  JSON.parse(
    JSON.stringify(myCookie)
  )
).toString() === myCookie.toString(); // true

JSON serializing CookieJar

You can even easily serialize your CookierJar. Example:

const exampleOption = { name: 'foo' , value: 'bar' };

const myCookie = new Cookie(exampleOption);

const cookieJar = new CookieJar([myCookie]);

new CookieJar (
  JSON.parse(
    JSON.stringify(cookieJar)
  )
).cookies[0].toString() === myCookie.toString(); // true

test

fetch wrapper tests require network access to emulate server.

run with deno test --allow-net

notes

This library is only tested lightly. you can contribute to this if you want to make it better, but I probably won’t add much feature/test anymore.

This library does not strictly follow the specs, but does try to follow it loosely. just keep it in mind when using so you don’t get surprises.

does not support handling of __Secure- and __Host- cookies.

Download Details:

Author: jd1378

Source Code: https://github.com/jd1378/deno-another-cookiejar

#deno #nodejs #node #javascript

What is GEEK

Buddha Community

A Fetch Wrapper That Retain Cookies with Deno

A Fetch Wrapper That Retain Cookies with Deno

deno-another-cookiejar

This library offers a fetch wrapper that retain cookies. This library also provides a simple cookiejar;

Why the name ? because I didn’t want to reserve the cookiejar name, since this library may not be good at it. (But I hope you like it)

usage

you can import Cookie, CookieJar, wrapFetch from mod.ts file.

export { Cookie, CookieJar, wrapFetch} from 'https://deno.land/x/another_cookiejar@v2.2.1/mod.ts';

wrapFetch

// this simple
const fetch = wrapFetch();

Or

// you can also pass your own cookiejar to wrapFetch to save/load your cookies
const cookieJar = new CookieJar();
// Now use this fetch and any cookie that is set will be sent with your next requests automatically
const fetch = wrapFetch({ cookieJar });
//...
fetch("http://example.com");
// and you can read your cookies from the jar
cookieJar.getCookie({
  name: 'cookieName',
})?.value // your cookie value

You can play around with it too see what it has to offer!

cookies should only be sent to their corresponding domains automatically.

Secure cookies will not be sent over unsecure connections.

Cookie

you can create cookies in two ways:

// first: using Cookie constructor with CookieOptions
const cookie = new Cookie({
  name: 'foo',
  value: 'bar'
});
// second: 
const cookie = Cookie.from('foo=bar;'); // any string from Set-Cookie header value is also valid.

CookieJar

const cookieJar = new CookieJar();

also if you have cookies from before:

const cookieJar = new CookieJar(cookiesArray); // cookiesArray: Array<Cookie> | Array<CookieOptions>
Note on retrieving cookies (+v2.0.0)

You can get cookies using either CookieOptions or a Cookie itself. The difference is if you use CookieOptions, it will strictly check any prop that is passed against the cookie. But if you use a Cookie object, it will only check name, path and domain.

JSON serializing Cookie

Each cookie object is easily serialized and deserialized. Example:

const exampleOption = { name: 'foo' , value: 'bar' };

const myCookie = new Cookie(exampleOption);

new Cookie ( 
  JSON.parse(
    JSON.stringify(myCookie)
  )
).toString() === myCookie.toString(); // true

JSON serializing CookieJar

You can even easily serialize your CookierJar. Example:

const exampleOption = { name: 'foo' , value: 'bar' };

const myCookie = new Cookie(exampleOption);

const cookieJar = new CookieJar([myCookie]);

new CookieJar (
  JSON.parse(
    JSON.stringify(cookieJar)
  )
).cookies[0].toString() === myCookie.toString(); // true

test

fetch wrapper tests require network access to emulate server.

run with deno test --allow-net

notes

This library is only tested lightly. you can contribute to this if you want to make it better, but I probably won’t add much feature/test anymore.

This library does not strictly follow the specs, but does try to follow it loosely. just keep it in mind when using so you don’t get surprises.

does not support handling of __Secure- and __Host- cookies.

Download Details:

Author: jd1378

Source Code: https://github.com/jd1378/deno-another-cookiejar

#deno #nodejs #node #javascript

Create Password Protected Webpage Using PHP, HTML And CSS

In this tutorial we will show you how to create password protected webpage using PHP, HTML and CSS.
In this user have to write correct password to see the webpage content without password user will not be able to see the webpage content.

To Create Password Protected webpage It Takes Only Two Steps:-

  1. Make a PHP file and define markup
  2. Make a CSS file and define styling

Step 1. Make a PHP file and define markup

We make a PHP file and save it with a name password.php

<?php
session_start();

if(isset($_POST['submit_pass']) && $_POST['pass'])
{
 $pass=$_POST['pass'];
 if($pass=="123")
 {
  $_SESSION['password']=$pass;
 }
 else
 {
  $error="Incorrect Pssword";
 }
}

if(isset($_POST['page_logout']))
{
 unset($_SESSION['password']);
}
?>

<html>
<head>
<link rel="stylesheet" type="text/css" href="password_style.css">
</head>
<body>
<div id="wrapper">

<?php
if($_SESSION['password']=="123")
{
 ?>
 <h1>Create Password Protected Webpage Using PHP, HTML And CSS</h1>
 <form method="post" action="" id="logout_form">
  <input type="submit" name="page_logout" value="LOGOUT">
 </form>
 <?php
}
else
{
 ?>
 <form method="post" action="" id="login_form">
  <h1>LOGIN TO PROCEED</h1>
  <input type="password" name="pass" placeholder="*******">
  <input type="submit" name="submit_pass" value="DO SUBMIT">
  <p>"Password : 123"</p>
  <p><font style="color:red;"><?php echo $error;?></font></p>
 </form>
 <?php	
}
?>

</div>
</body>
</html>

In this step we first check if user logged in or not by checking session variable if the user is not logged in we display login form and if user is logged in we display webpage content with logout button.

We use two isset() condition to do login or logout.In first condition we simply get the password and check if the password is '123' if yes we put the password in session variable and then display the webpage.

In second condition we simply unset the session variable which stores password value. You may also like simple http authentication using PHP .

Step 2. Make a CSS file and define styling

We make a CSS file and save it with a name password_style.css

body
{
 margin:0 auto;
 padding:0px;
 text-align:center;
 width:100%;
 font-family: "Myriad Pro","Helvetica Neue",Helvetica,Arial,Sans-Serif;
 background-color:#8A4B08;
}
#wrapper
{
 margin:0 auto;
 padding:0px;
 text-align:center;
 width:995px;
}
#wrapper h1
{
 margin-top:50px;
 font-size:45px;
 color:white;
}
#wrapper p
{
 font-size:16px;
}
#logout_form input[type="submit"]
{
 width:250px;
 margin-top:10px;
 height:40px;
 font-size:16px;
 background:none;
 border:2px solid white;
 color:white;
}
#login_form
{
 margin-top:200px;
 background-color:white;
 width:350px;
 margin-left:310px;
 padding:20px;
 box-sizing:border-box;
 box-shadow:0px 0px 10px 0px #3B240B;
}
#login_form h1
{
 margin:0px;
 font-size:25px;
 color:#8A4B08;
}
#login_form input[type="password"]
{
 width:250px;
 margin-top:10px;
 height:40px;
 padding-left:10px;
 font-size:16px;
}
#login_form input[type="submit"]
{
 width:250px;
 margin-top:10px;
 height:40px;
 font-size:16px;
 background-color:#8A4B08;
 border:none;
 box-shadow:0px 4px 0px 0px #61380B;
 color:white;
 border-radius:3px;
}
#login_form p
{
 margin:0px;
 margin-top:15px;
 color:#8A4B08;
 font-size:17px;
 font-weight:bold;
}

Mark Pen

1622620544

Custom Printed Cookies - Edible Images Printed Direct To Yummy Cookies

Enjoyment with delicious, perfectly formed custom printed cookies as wedding favors, promotional handouts, sweet treats, occasion presents or corporate functions at extraordinary occasions, parties and corporate functions. Customize these prepared to-eat gourmet vanilla-seasoned sugar cookies with edible pictures, photographs, logos and short messages in full color. Newly made dough is cut, formed and heated to dispatch “bakery fresh”. Separately enclosed by cellophane, have these delicious cookies exclusively printed, bakery direct, with your edible design and conveyed to your door fresh new and prepared to-eat. 100% Satisfaction Guaranteed.

#edible prints #custom printed cookies #images on cookies #photo cookies

Webpack-dev-server, React, Fetch, and Cookies

Today’s fun. I’m using webpack-dev-server to serve up my React application as I develop it. I’m implementing JavaScript Web Tokens, with Refresh Tokens via an httpOnly cookie between domains via a fetch() request. While I receive the httpOnly cookie on my fetch response the cookie does not translate to the Application tab in devtools, which means it will not be automatically passed with my next API request.

I spent a while trying to track this down and present my solution (one of many possibilities) in this post.


The problem is one of trust. If you are serving content from a single domain, there are few issues. However, if your API server is running on http://localhost:3000, and your React application is running via webpack-dev-server on http://localhost:8081 (for instance), then as far as the browser is concerned these are different domains and the security rules kick in. Those rules require more setup and understanding to tell the browser that we really do trust that other domain. And those extra steps STILL may not work because of how webpack-dev-server works.

If you are using Fetch() to request an API resource, you have to include mode: 'cors' and credentials: 'same-origin'. But even these may not be enough.

The “easy” fix is to move your API requests behind a proxy that then appears to be originating from your main domain. For example navigating to [http://localhost:8081/api/login](http://localhost:8081/api/login) would result in a call to [http://localhost:**3000**/api/login](http://localhost:3000/api/login) without the browser knowing. This is relatively easy to set up in Nginx/Apache:

// nginx
location '/api' {
  proxy_set_header   X-Forwarded-For $remote_addr;
  proxy_set_header   Host $http_host;
  proxy_pass         http://localhost:3000;
}

But when we are developing we may only be using webpack-dev-server.

Webpack-dev-server can do proxies too. It just takes a little setup.

#react #fetch-api #cookies #javascript #webpack-dev-server