Category: Web

What is Cross-Origin Resource Sharing (CORS)

2020-03-22 Web

GOAL

To understand Cross-Origin Resource Sharing (CORS) and how to avoid error regarding it.

Reference

Cross-Origin Resource Sharing is sharing resources from a different origin by using additional HTTP headers to allow a web application to access to that resources.

What is origin?

Origin is the currency to decide resource sharing and isolating.
Usually actors in the Web platform that share the same origin trust each other and have the same authority.

Origin is defined by the scheme, host and port of the URL of the resource. Scheme is client server protocol, http or https.

They are examples of same-origin and different-origin.

What is origin for?

When a browser need to get resource from a server, the browser should check whether the server is different from the one where index.html is. That’s because access to the cross-origin server can causes cross-site printing. The rule is called cross-origin policy.

Mechanism of CORS

Client (Web browser) adds “Origin” to HTTP Request header. If the origin is included in Access-Control-Allow-Origin of HTTP Response header, data can be transmitted.

You can see more about HTTP request/response more in “What is http request/response.”

Preflighted requests

There are 3 types of Cross-Origin Request.

1 Simple requests

In cross-origin resource sharing, browser uses the HTTP OPTION request method to preflight the request. Preflighting is to check if a request is accepted to the server before sending it.

However, simple requests that meet some conditions don’t trigger preflight. There are multiple conditions, and you can see them from the link below.

“Simple requests” from https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

2 Preflighted requests

If the request from browser is not simple request, browser first send an HTTP request by the OPTIONS method. Then server responses to preflight request. After preflight request is complete, the real request is sent:

The value of Origin in request should be contained in Access-Control-Allow-Origin in response.
The value of Access-Control-Request-Method should be contained in Access-Control-Allow-Methods in response
The values of Access-Control-Request-Headers should be contained in Access-Control-Allow-Headers in response.

3 Requests with credentials

Browser can send request that are aware of HTTP cookies and HTTP Authentication information.
If web application needs a resource on cross-origin server which sets Cookies, browser send GET request with Origin and Cookie header. Then server send response with Access-Control-Allow-Origin, Access-Control-Allow-Credentials(true) and Set-Cookie header.

The origin of Access-Control-Allow-Origin should be the same one as the value of Origin in the request header.

Problems with CORS

You can see some errors and solutions in “CORS errors” from Web technology for developers document.

Problem with WebGL texturing

In my case, the error below occurred in WebGL texture call.

Uncaught DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The image element contains cross-origin data, and may not be loaded.

How to solve this problem

If it works on the server, you should add crossOrigin to image.

 image.src = url;
 image.crossOrigin = origin; 
#origin is the domain where the image exists

If it works on local development environment (directory on your HDD), you should set up a server.

Use php or python command

Open terminal and input command.

1. python

cd <path to the directory where index.html and resource exists>
python -m SimpleHTTPServer 8080

2. php

cd <path to the directory where index.html and resource exists>
php -S localhost:8080

Use XAMPP

XAMPP is a free and open-source cross-platform web server solution package.

What is http request/response?

2020-03-20 Web

GOAL

To understand mechanism and meaning of http request and response message.

What is HTTP?

HTTP stands for Hypertext Transfer Protocol that is a protocol of transfer of hypertext written in HTML or XML, and other data.

HTTP is request-response type data communication protocol. The client sends request to the server and the server sends to the response.

HTTP Request

These are example of HTTP request.

GET / HTTP/1.1
Accept: image/image01.png, */*
Accept-Language: ja
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (Compatible; MSIE 6.0; Windows NT 5.1;)
Host: www.example.com
Connection: Keep-Alive

GET /index.html HTTP/1.1 
Host: localhost:8080
Connection: keep-alive
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_4) 
Referer: http://localhost:8080/
Accept-Encoding: gzip, deflate
Accept-Language: ja,en-US

HTTP Response

These are example of HTTP request.

HTTP/1.1 200 OK
Date: Sat, 09 Oct 2010 14:28:02 GMT
Server: Apache
Last-Modified: Tue, 01 Dec 2009 20:18:22 GMT
ETag: "51142bc1-7449-479b075b2891b"
Accept-Ranges: bytes
Content-Length: 29769
Content-Type: text/html

<!DOCTYPE html...

Constitution of HTTP request

HTTP request consists of request line, HTTP header and body.

Request line

Request line is the first line of the HTTP request.

 GET /index.html HTTP/1.1

Request line consists of request method, request URI and HTTP version.

Request Methods

GET
HEAD
POST
PUT
DELETE
CONNECT
OPTIONS
TRACE
PATCH

Refer “HTTP request methods” for detail of each method.

Constitution of HTTP response

HTTP response consists of Status line, HTTP header and body.

Status line

Status line is the first line of the HTTP response.

HTTP/1.1 200 OK

Status line consists of HTTP version, Status Code and Reason Phrase.

Status Code

Status code has 5 class

Informational responses (100–199)
Successful responses (200–299)
Redirects (300–399)
Client errors (400–499)
Server errors (500–599)

Refer “HTTP response status codes” for detail of status code.

HTTP header

HTTP header contains fields and their values as a format “field: value”.

GET / HTTP/1.1
Accept: image/image01.png, */*
Accept-Language: ja
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (Compatible; MSIE 6.0; Windows NT 5.1;)
Host: www.example.com
Connection: Keep-Alive

There are 4 types of HTTP header, General headers, Request headers, Response headers, Entity headers.

General headers

Examples of General headers

Connection: Keep-Alive or Close
- whether or not the network connection stays open after the current transaction finishes
Date: <day-name>,<day>,<month>, <year>, <hour>:<minute>:<second> GMT
- the date and time when the message was originated
Cache-Control: public, no-cache, no-store, proxy-revalidate and so on
- instructions for caching in both requests and responses

Request headers

Examples of Request headers

Accept-***:
- items that the client is able to accept
- Accept-Charset: utf-8, iso-8859-1 and so on
- Accept-Language: en-US, ja and so on
- Accept-Encoding: gzip, deflate, br and so on
If-***
- conditional request
- If-Match: ETag
- If-Modified-Since: <day-name>,<day>,<month>, <year>, <hour>:<minute>:<second> GMT
User-Agent: <product>/<product-version> <system and platform>
- the application, operating system, vendor and version of the requesting user agent.
Referer: <url>
- the address of the previous web page from which a link to the currently requested page was followed

Response headers

Examples of Request headers

Age: <delta-seconds>
- the time in seconds the object has been in a proxy cache
Location: <url>
- the URL to redirect a page to

Entity headers

Examples of Entity headers

Content-Length: <length>
- the size of the entity-body, in bytes, sent to the recipient
Allow: <http-methods> such as GET, POST and HEAD
- the set of methods supported by a resource

What is body in HTTP request/response?

In HTTP request the body contains parameters. If the method doesn’t need any parameter to pass, body is blank. This is example of body in HTTP request. (name and age are parameters.)

name=taro&age=18

In HTTP response the body is content requested such as hypertext written in HTML. This is example of body in HTTP response.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>The HTML5 Herald</title>...

How To Embed CodePen in Your Website.

2020-03-07 JavaScript Web WordPress

I tried CodePen belatedly.

GOAL

To embed CodePen viewer in my WordPress web site as below.

What is CodePen?

CodePen is a web service to build, test, share and discover front-end code such as html, css and JavaScript.

CodePen is a social development environment for front-end designers and developers.
from CodePen

Start Coding

In my case, I’ve signed up at first, but you can just start coding by clicking “Start Coding” button.

Embed CodePen

Click “Embed” button at the lower bottom of the page after coding.

Select the style of editor and change the size of the window. you can use anything you like. I chose “HTML (recommended)” and copy the code.

Paste the copied code in the Custom HTML block as below.

See the Pen watching by HanakoSonobe (@s-nako) on CodePen.

How to embed tweet button in WordPress article

2020-02-10 Tips Web WordPress

GOAL

To embed Tweet button in each WordPress articles.

Environment

WordPress 5.2.5

Method

1. Get the source code of Tweet button.

Get the source code of tweet button from https://publish.twitter.com/#

Select “Twitter Buttons”.

Customize the style of tweet button and copy the code displayed.

2. Embed the source code.

Click the Theme Editor on your WordPress Dashboard. And open content.php.

Put the code copied from https://publish.twitter.com/ on any place you want.

<h2 class="entry-title"><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h2>

<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-via="nako_new_high" data-show-count="false">Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Then change the code to get the target source URL and the title.

<a href="https://twitter.com/share" data-url="<?php the_permalink(); ?>" data-text="<?php echo get_the_title(); ?>" class="twitter-share-button" data-via="nako_new_high" data-show-count="false">Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

php funtions to get information of the article can be searched by Documentation.

Put the link and add php functions in content-single.php and content-page.php.

3. Check the Tweet button.

4. Create Tweet card with

Install All in One SEO on your WordPress.

Open All in One SEO > Feature Manager

Activate “Social Meta” and open the page of Social Meta. Input information about thumbnail image and your twitter account.

Access the Card validator and check your card preview.

When you add new post, input information about the article and select thumbnail image in Social Setting Area of All In One SEO Pack.

Result

How to embed twitter timeline on your WordPress web site

2020-02-08 Tips Web WordPress

GOAL

To embed twitter timeline on your WordPress web site as below.

Method

Access https://publish.twitter.com/#

And input URL of your twitter home.

Choose one of the two styles. If you want to change the size, looking or language of this area, click “set customization options”.

Change the style and click “Update” button.

Copy code.

Open your WordPress Dashboard and click Appearance>Widgets.

Create Text widget and put it into any space you like.

Paste the code copied from https://publish.twitter.com/ and save the widget.

[JavaScript] Drifting Effect

2020-02-04 JavaScript Web

I created drifting animation for my friend’s website the other day.

GOAL

To create animation of drifting items.

Source Code

<style type="text/css">
    #canvas-area {
        width: 100%;
        height: 100%;
        position: relative;
    }
    #canvas-container{
        width: 1000px;
        height: 500px;
    }
</style>
<div id="canvas-area">
    <canvas id="canvas-container"></canvas>
</div>
<script type="text/javascript">
    //set canvas
    var canvasArea = document.querySelector('#canvas-area');
    var canvas = document.querySelector('#canvas-container');
    var ctx = canvas.getContext('2d');
    var canvas_width = canvas.width;
    var canvas_height = canvas.height;

    var last_time;

    //settings
    var item_num = 20;
    var img_src_array = ['img1.png', 'img2.png', 'img3.png', 'img4.png', 'img5.png'];
    var first_start_x = canvas_width - 100;
    var first_start_y = canvas_height - 100;

    //Item Object
    var Item = function(input_img){
        img_width = input_img.width;
        img_height = input_img.height;
        this.alpha = 1.0;
        this.img = input_img;
        this.start_x = first_start_x;
        this.start_y = first_start_y;
        this.x = this.start_x ;
        this.y = this.start_y;
        this.rotate = Math.random()*Math.PI*2;
        console.log(img.src)
        this.speed=[parseInt((Math.random())*10), parseInt(Math.random()+2)];
    };
    Item.prototype.update = function(){
        this.x -= this.speed[0];
        this.y -= this.speed[1];
        this.alpha *= 0.9;
        if(this.alpha < 0.1 ){
            this.alpha = 0;
        }
        
        if(this.x+this.img.width < 0 || this.x > canvas_width || this.y + this.img.height < 0){
            this.speed=[parseInt((Math.random())*10), parseInt(Math.random()+2)];
            console.log(`${this.start_x}:${this.start_y}`)
            this.x = this.start_x;
            this.y = this.start_y;
            this.rotate = Math.random()*Math.PI*2;
            this.alpha =1.0;
        }
    };
    Item.prototype.display = function(){
        ctx.globalAlpha = this.alpha;
        ctx.translate(this.x + img_width/2, this.y+ img_height/2);
        ctx.rotate(this.rotate);
        ctx.drawImage(this.img, -img_width/2, -img_height/2, img_width/2, img_height/2);
        ctx.rotate(-this.rotate);
        ctx.translate(-this.x - img_width/2, -this.y - img_height/2);
    };

    //create item array
    var items = [];
    var item_add = function(img){
        img.width = 100;
        img.height = 100;
        items.push(new Item(img));
        initialize();
    };

    for(var i=0; i<item_num; i++){
        img = new Image();
        img.src = img_src_array[parseInt(Math.random()*img_src_array.length)];
        img.onload = item_add(img);
    }

    function initialize(){
        if(items.length == item_num){
            last_time = new Date().getTime();
            animation();
        }
    }

    //animation
    function animation(){
        //callback
        window.requestAnimationFrame(animation);
        now_time =  new Date().getTime();
        //clear window
        if((now_time - last_time) > 100){
            last_time = now_time
            ctx.clearRect(0, 0, canvas_width, canvas_height);
            for(var i=0; i<item_num; i++){
                items[i].display();
                items[i].update();
            }
        }
    }
</script>

Item Object

Item Object has local variables.

alpha	alpha channel value of this Item
img	HTMLImageElement of this Item
start_x, start_y	the position where this Item appears
x, y	the position where this Item exists
rotate	the rotation angle of this Item
speed	the moving speed of this Item

    //Item Object
    var Item = function(input_img){
        img_width = input_img.width;
        img_height = input_img.height;
        this.alpha = 1.0;
        this.img = input_img;
        this.start_x = first_start_x;
        this.start_y = first_start_y;
        this.x = this.start_x ;
        this.y = this.start_y;
        this.rotate = Math.random()*Math.PI*2;
        this.speed=[parseInt((Math.random())*10), parseInt(Math.random()+2)];
    };

Item Object has 2 functions.

update()	update position and alpha channel
display()	Rotation and movement by coordinate transformation translate->rotate->draw->rotate(reverse)->translate(reverse)

    Item.prototype.update = function(){
        this.x -= this.speed[0];
        this.y -= this.speed[1];
        this.alpha *= 0.9;
        if(this.alpha < 0.1 ){
            this.alpha = 0;
        }
        
        if(this.x + this.img.width < 0 || this.x > canvas_width || this.y + this.img.height < 0){
            this.speed=[parseInt((Math.random())*10), parseInt(Math.random()+2)];
            console.log(`${this.start_x}:${this.start_y}`)
            this.x = this.start_x;
            this.y = this.start_y;
            this.rotate = Math.random()*Math.PI*2;
            this.alpha =1.0;
        }
    };

    Item.prototype.display = function(){
        ctx.globalAlpha = this.alpha;
        ctx.translate(this.x + img_width/2, this.y+ img_height/2);
        ctx.rotate(this.rotate);
        ctx.drawImage(this.img, -img_width/2, -img_height/2, img_width/2, img_height/2);
        ctx.rotate(-this.rotate);
        ctx.translate(-this.x - img_width/2, -this.y - img_height/2);
    };

Create Item instances

Each image is assigned to the Item object randomly.

for(var i=0; i<item_num; i++){
        img = new Image();
        img.src = img_src_array[parseInt(Math.random()*img_src_array.length)];
        img.onload = item_add(img);
    }

Animation function

Update() and display() each Items at regular intervals.

    //animation
    function animation(){
        //callback
        window.requestAnimationFrame(animation);
        now_time =  new Date().getTime();
        //clear window
        if((now_time - last_time) > 100){
            last_time = now_time
            ctx.clearRect(0, 0, canvas_width, canvas_height);
            for(var i=0; i<item_num; i++){
                items[i].display();
                items[i].update();
            }
        }
    }