Updating Hexo Install

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

npm install -g hexo-cli
hexo version

npm install -g npm-check
npm-check

npm install -g npm-upgrade
npm-upgrade

npm update -g
npm install -g npm

hexo clean
hexo g -s
hexo d

Updating hexo theme

1. Remove node_modules folder
2. remove "hexo-theme-icarus": "^5.1.0" in package.json

1
2
3
4
5

npm install
npm install [email protected]
npm install hexo-renderer-inferno
hexo config theme icarus
hexo server

use the original icarus config

The very first thing

We should always remind ourself is that, we should not store passwords yourself. At least, we should try out best to avoid it.

As a User

Password manager and 2FA is strongly suggested. However, it is not the thing I want to discuss today.

As a develop

As a developer, we are unavoidably need to store user’s password.

Storing in plain text

The most naive way is to store user’s password in plain text. Once the database is leaked or have insider, all user’s password is leaked. Sadly, many people in the world are using the same username and password in different website. And thats why we should use password manager as a user.

Encrypt the password

It is a little bit better than store it as plain text. However, it still incredibly easy to get things wrong. Imagine that the database is leaked therefore Hacker have the whole database offline. They can see the encrypted code aka the ciphertext. Under lots of encryption algorithm, same text will generate same ciphertext. If it is a very large database, it most likely have many same password (especially for some easy, common passwords). The scariest part is that, some times the reset password system may also store “hints” of the password. Imagine there are 20 same encrypted password, that means I will have 20 different hints point to a same password.

Hashing (without salts)

hash(m)

Hashing and store the hashed password almost get the things right. However, it still can go wrong with some old hashing algorithm. let me introduce a idea, rainbow table: pre-computed hash chains. Improve on the dictionary attack to trade time for space. It is a common and strong approach to crack hash nowadays. By matching the hashed cipher text and rainbow table, hacker can easily find some of the correct match of password. If the database is compromised. Although it is the intruder who gets the hash value, it is also easy to restore the password plaintext in bulk due to the existence of rainbow tables.

Hashing (with salts)

The rainbow table is generated for a specific function H. If H changes, the existing rainbow table data is completely unusable. If using salt value, then a different rainbow table must be generated for each user. It greatly increases the difficulty of cracking. And the best practice is to use a different salt for each user since it is worth mentioning that, the tensor computing provided by display card to highly speed up the hack cask. Which make it even more danger now and in the future.

A practices that I have implement is make use of the fact that username is usually cannot change. Use username for as the salt.

Upgrading the old method from the past

It is common that we need to upgrade the hashing algorithm form the past but at the same time do not want to affect the user. For plain text, it just need to hash the password. And so is the encryption, it is just need to decrypt the password before hashing.

What if we already have hashed password? The fact that we cannot restore the password because hashing is a many-to-one compression. The solution is salt and pepper.

• m: message, password in this case
• h1: the outdated hash algorithm
• h2: the modern hash algorithm
• salt: salt is not secret (merely unique) and can be stored alongside the hashed output
• pepper: pepper is secret and must not be stored with the output.

h2(h1(m)+pepper) , salt is optional in this case. the h1 might have salted already.

hash(m+salt)
it must be safe to ensure that each user’s salt is different.

The docker compose file I use:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

version: '3'

services:
  mysql:
    image: mysql/mysql-server
    container_name: mysql
    environment:
      MYSQL_ROOT_PASSWORD: <mypw>
      MYSQL_DATABASE: app_db
      MYSQL_USER: dev
      MYSQL_PASSWORD: <mypw>
    ports:
      - "3306:3306"
    volumes:
      - ./data:/var/lib/mysql
  phpmyadmin:
    image: phpmyadmin/phpmyadmin
    container_name: pma
    links:
      - mysql
    environment:
      PMA_HOST: mysql
      PMA_PORT: 3306
      PMA_ARBITRARY: 1
    restart: always
    ports:
      - 8081:80

Access into the docker container

docker exec -it <container id> bash

The container id can be find by docker ps

Create new database

mysql -u root -p

CREATE DATABASE 'newdatabase';

1
2
3
4

CREATE USER 'dev'@'localhost' IDENTIFIED BY 'mypw';
CREATE USER 'dev'@'%' IDENTIFIED BY 'mypw';
GRANT ALL ON *.* TO 'dev'@'localhost';
GRANT ALL ON *.* TO 'dev'@'%';

flush privileges;

CREATE USER 'newuser'@'%' IDENTIFIED BY 'newpassword';

Then give the new account “newuser” permission to read and write the new database

GRANT ALL PRIVILEGES ON newdatabase.* TO 'newuser'@'localhost';

quit the root login and switch to the user

quit

mysql -u <newuser> -p

First, create a `hello-world.js’ file

1

console.log("Hello World")

Then, create a Dockerfile in the same directory, the Dockerfile should look like that:

1
2
3
4
5
6
7
8
9
10

FROM ubuntu

RUN apt update && apt install nodejs -y

WORKDIR /app

COPY . .

CMD ["node", "/app/hello-would.js"]

FROM ubuntu means we ubuntu the ubuntu image as the base

RUN apt update && apt install nodejs -y means install nodejs into the ubuntu image

WORKDIR is used to define the working directory of a Docker container.

COPY . . is to copy the current directory(the hello-world.js) to the WORKDIR

CMD ["node", "/app/hello-would.js"] is the command to run after the image load.

Finally, Build the image

docker build -t {image name and version} .

-t is the tag for the image name and version, for example, etklam/hello_app:0.1

. is the Dockerfile directory

Main different

The main different between utf8 and utf8-mb4 is utf8 is only 3 bytes but utf8-mb4 is 4bytes instead. Note that UTF8 have 4 bytes, utf8mb4 is the true utf8 character set.

In general, it is enough to use MySQL utf8 to set up a website, however, Some special (Chinese) characters or common emoji are not included in 3 bytes. Therefore, most Chinese characters are sufficient, but they cannot be used for all characters. If you want to use special characters or emoticons, you cannot use MySQL’s utf8 character set to store them.

UTF8 to UTF8mb4 does not cause incompatibility problems.

Create XMLHttpRequest object

XMLHttpRequest is basic of Ajax request,

1

const xhr = new XMLHttpRequest();

Send a request to the server

1
2

xmlhttp.open("GET", "url"); // url is the api endpoint
xml.send();

onreadystatechange

There are 5 state of xmlhttprequest, from 0 to 4

0. Request not initialized
1. Server connection is established
2. Request has been received
3. Request is being processed
4. Request completed and response is ready

Hence, When readyState is equal to 4 and the status is 200, the response is ready.

1
2
3
4
5

xml.onreadystatechange=function() {
    if(xml.readyState==4 && xml.status==200) {
        document.getElementById("myDiv").innerHTML=xml.responseText;
    }
}

Ajax json examples

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

function loadXMLDoc(){
    // init a xmlhttprequest
    const xmlhttp = new XMLHttpRequest();

    // init a onreadystatechange and parse xml to json 
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        var myArr = JSON.parse(this.responseText);
        myFunction(myArr)
        }
    }
    //send the xml request
    xmlhttp.open("GET","/try/ajax/json_ajax.json",true);
    xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
    xmlhttp.send();
}
// function to change the dom
function myFunction(arr) {
  var out = "";
  var i;
  for(i = 0; i < arr.length; i++) {
    out += '<a href="' + arr[i].url + '">' + 
    arr[i].title + '</a><br>';
  }
 document.getElementById("myDiv").innerHTML=out;
}

Ajax with Promise examples

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

const p = new Promise((resolve, reject)=>{
    const xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4){
            if (xmlhttp.status==200)
            {
                //success
                resolve(this.responseText)
            }else{
                //fail
                reject(xmlhttp.status)
            }
        }
    }
})

//promise followup
const result = p.then(function(value){
    let myArr = JSON.parse(value)
    myFunction(myArr)
    return myArr
},function(reason){
    console.log(reason)
    return 'error'
})

// function to change the dom
function myFunction(arr) {
  var out = "";
  var i;
  for(i = 0; i < arr.length; i++) {
    out += '<a href="' + arr[i].url + '">' + 
    arr[i].title + '</a><br>';
  }
 document.getElementById("myDiv").innerHTML=out;
}

Spring initialization

• spring-boot-starter-web
• spring-boot-starter-data-jpa
• spring-boot-devtools
• mysql-connector-java
• lombok

Connect to database

in the resource/application.properties, we can config the hibernate connection for mysql

1
2
3
4
5
6

spring.jpa.hibernate.ddl-auto=create-drop
spring.datasource.url=jdbc:mysql://localhost:3306/mydb
spring.datasource.username=username
spring.datasource.password=password
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.jpa.show-sql= true

Simple API

To build a simple api, we need to add two annotaion to the main

• RestController
• @GetMapping/@PostMapping/ others

1
2
3
4
5
6
7
8
9
10
11
12
13

@SpringBootApplication
@RestController
public class PpfaSpringApplication {

 public static void main(String[] args) {
  SpringApplication.run(PpfaSpringApplication.class, args);
 }

 @GetMapping
 public String hello() {
  return "Hello World";
 }
}

First, install jenv by using Homebrew

1

brew install jenv

After that, need to config the zsh

1
2
3

echo 'export PATH="$HOME/.jenv/bin:$PATH"' >> ~/.zshrc
echo 'eval "$(jenv init -)"' >> ~/.zshrc
source ~/.zshrc

It only found the system default Java:

1

jenv versions

Add the jdk you installed to the jenv. Personally my jdks are installed at /Users/klam/Library/Java/JavaVirtualMachines/

For example:

jenv add /Users/klam/Library/Java/JavaVirtualMachines/azul-17.0.3/Contents/Home/

jenv global 17 to swap between different jdk for the default jdk

you can also use jenv local 17 to specifies the Java version of a folder

In Java, there are two main types of problems that can occur during the execution of a program: Errors and Exceptions.

1. Errors

Errors are serious issues that occur beyond the control of the application. These are typically problems related to the Java Virtual Machine (JVM) itself, such as:

• StackOverflowError
• OutOfMemoryError
• VirtualMachineError

These errors are often unrecoverable and should not be handled in the code. When an error occurs, it’s best to let the system crash or shut down gracefully, as the environment may no longer be stable.

2. Exceptions

Exceptions are issues that arise during the normal operation of a program and can usually be anticipated and handled. For example:

• Trying to read a file that doesn’t exist.
• Invalid user input.
• Attempting to divide by zero.

Java provides a robust mechanism to handle exceptions using try-catch-finally blocks. Exceptions are further categorized into two types:

a. Checked Exceptions

These are exceptions that are checked at compile time. The compiler requires the developer to handle these exceptions explicitly, either by using a try-catch block or by declaring them in the method signature using the throws keyword.

Examples:

• IOException
• SQLException

b. Unchecked Exceptions

These are exceptions that are not checked at compile time. They usually indicate programming bugs, such as logic errors or improper use of an API. These exceptions inherit from RuntimeException.

Examples:

• NullPointerException
• ArrayIndexOutOfBoundsException
• IllegalArgumentException

Summary

Understanding the difference between errors and exceptions—and between checked and unchecked exceptions—helps in writing more robust and fault-tolerant Java applications.

Let me know if you’d like a more casual tone or if you want to turn this into a tutorial-style post!

Introduction

I am working with a login api, and therefore I have some notes about Session and Token (JWT - Json web token).

Session

The general practice of a login system should be to verify that the customer’s login information is correct. Then add a logged in attribute to the client’s session if it is correct. There are usually some tools that help us doing that. Generally the default name of the session(cookie) is “JSESSIONID”; Stored in the client’s cookie, so we don’t have to write any more complicated operations in the program.

Each time the Client Side send a request, we bring the session id along with it. Server side will take the session ID and find out the specific session from the many sessions stored in Server.
There it is, if there are 10000 user online, server need to store 10000 different session in the database. Which is a very high IO, also, there is also the problem of how to share sessions between multiple hosts.

To solve this problem, we normally use Redis.

JWT token

It is very popular to use JWT as a Token instead of session. jwt is a string encrypted by the server and issued to the client.
After receiving the token, the client sends a request with the token in case of need, so that the Server can decrypt and verify the identity.
Because the token itself stores the authentication information of the client. In general, the Server will no longer store the token after it is issued.
Note that, the token can actually be stored in a cookie.

JWT implementation

There are three part of a JWT, header, payload, signature

The whole thing will use base64 encode

Header

• alg: Cryptographic algorithms used
• typ: JWT

Payload

• iss: Issuer
• sub: subject, can be the key value such as account no.
• exp: expiration time

Signature

sign(hash(header+payload))

The signature also certifies that only the party holding the private key is the one that signed it.

Generating JWT

1
2
3
4
5
6
7
8
9

// JWT code here
Date expireDate = new Date(System.currentTimeMillis()+30*60*1000);
                    
String jwtToken = Jwts.builder().setSubject(email)
    .setExpiration(expireDate)
    .signWith(SignatureAlgorithm.HS512, "secret")
    .compact();
                    
return jwtToken;

Check the token

• notes 1 : Whenever the user wants to access a protected route or resource, the user agent should send the JWT, typically in the Authorization header using the Bearer schema. The content of the header should look like the following: Authorization: Bearer <token>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

public class AuthorizationCheckFilter extends OncePerRequestFilter{

    @Override
    `protected void doFilterInternal(HttpServletRequest req, HttpServletResponse res, FilterChain chain) throws ServletException, IOException {
                if(!req.getServletPath().equals("/api/v1/user/login")){
                    
                    
                    String authorHeader =  req.getHeader(AUTHORIZATION);
                    String bearer ="Bearer "; // notes 1

                    if(authorHeader!= null && authorHeader.startsWith(bearer)){
                        try{
                        String token = authorHeader.substring(bearer.length());
                        Claims claims = Jwts.parser().setSigningKey("MySecret")
                        .parseClaimsJws(token).getBody();

                        System.out.println("JWT payload:"+claims.toString());

                        chain.doFilter(req, res);
                        
                        }catch(Exception e){
                            System.err.println("Error : "+e);
                            res.setStatus(FORBIDDEN.value());
                            
                            Map<String, String> err = new HashMap<>();
                            err.put("jwt_err", e.getMessage());
                            res.setContentType(APPLICATION_JSON_VALUE);
                            new ObjectMapper().writeValue(res.getOutputStream(), err);
                        }
                    }else{
                        res.setStatus(UNAUTHORIZED.value());
                    }
                }else{
                    chain.doFilter(req, res);
                }
        
    }

}

The jwt implementation of nestjs
https://github.com/etklam/nestjs-jwt-implementation