제작 학습의 첫 번째 쿠키

광고를 배우는 기초 위에서 피할 수 없는 쿠키를 배우면서 간단하게 실시했다.
이번 포인트는 제1파티 쿠키 세트를 구현하는 방법이다.안전성에 대한 우려점 등을 기재하지 않았기 때문에 평어로 보충·추가하면 큰 도움이 된다.

말하자면 첫 모임과 세 번째 모임.

이곳의 보도는 매우 참고 가치가 있다!
본 보도도 여기에 기재된 내용을 참고하였다.정말 고맙습니다.
https://www.nexal.co.jp/blogs/2061.html
이 글에 근거하여 양자의 정의는 다음과 같다.
양자의 정의는 매우 간단하다. '사용자가 브라우저를 통해 방문하는 도메인에서 발행하는 쿠키' (= 첫 번째 쿠키) 인지, 아니면 '제3자 도메인에서 발행하는 쿠키' (= 제3자 쿠키) 의 차이만 있을 뿐이다.
이 기사에는 이미 상당히 상세한 예가 쓰여 있는데, 이번에는 패스트푸드 파티를 하면서 만든 쿠키를 실시하면서 이해를 깊이 하려고 한다.

제3자 과자 뭐가 맛없어.

쿠키는 웹 시스템에서 빠질 수 없는 것이지만 개인의 프라이버시 측면에서 제3자 쿠키를 점차 배제하고 있다.
아래 참고 문장을 참고하시오.
https://japan.cnet.com/article/35156564/
첫 번째 쿠키는 쿠키가 발행하는 그 영역에서만 사용하고, 세 번째 쿠키는 크로스 도메인에서 브라우저 옆에 저장된 정보를 활용한다.타사 쿠키는 단일 서명, 광고에서의 전환 링크, 편집, 인터넷 분석 추적 등에 많이 사용된다.
사이트에서 상품을 보거나 구매할 때 광고로 노출(재조정)된 경험이 있죠?
"사이트 이용자의 편의성을 높이기 위해 사용하는 첫 번째 쿠키였으면 좋겠지만, 이용자들이 원치 않는 트림용 쿠키는 본래 취지가 아닐 텐데"라는 논조가 퍼진 것도 당연한 것 아닌가 싶다.
구글 애널리틱스도 JSONP를 활용한 1자 쿠키 제작 등의 조처를 했다.
JSONP 설치 방법에 대해 잘 모르시는 분들은 참고해주세요.
https://zenn.dev/bun913/articles/0c807fa8da262e

JSONP에서 만든 첫 번째 파티 쿠키 세트입니다.

이를 바탕으로 Go 언어의 echo 프레임워크를 사용하여 서버 측(클라이언트에게 쿠키 정보를 전달하는 측)을 실현할 것이다.

우선, 일반적으로 제3자 쿠키 세트를 설치해야 하는 경우

우선, 일반적으로 고객으로부터 xml HTTPRequest(axios와ajax의 비동기 통신을 사용한 것으로 이해하십시오)를 보내고 서버에서 제3자가 만든 쿠키를 설정합니다.
우선 루트 등의 설정을 진행한다.

package main

import (
	"net/http"
	"work/controller"

	"github.com/labstack/echo"
	"github.com/labstack/echo/middleware"
)

func main() {
	e := echo.New()
	// e.Use(middleware.CORS())と同様
	// AllowOriginsを * とすることで異なるドメインからの通信を許可する
	e.Use(middleware.CORSWithConfig(middleware.CORSConfig{
		AllowOrigins:     []string{"*"},
		AllowCredentials: true,
		AllowMethods:     []string{http.MethodGet, http.MethodPut, http.MethodPost, http.MethodDelete},
	}))
	// 3rdパーティークッキーのテスト
	e.GET("/cookie/third", controller.SetCookieHandler)
	// 1stパーテークッキーのテスト
	e.GET("/cookie/first", controller.SetFirstCookieHandler)
	e.Logger.Fatal(e.Start(":3000"))
}

SetCookieHandler에 제3자 과자의 설치 처리가 기재되어 있다.

package controller

import (
	"net/http"
	"time"

	"github.com/k0kubun/pp"
	"github.com/labstack/echo"
)

type CokkieResponse struct {
	Name    string `json:"name"`
	Value   string `json:"value"`
	Expires string `json:"expires"`
}

// SetCookieHandler XMLHTTPRequestに対してクッキーをセット
func SetCookieHandler(c echo.Context) error {
	cookie := new(http.Cookie)
	cookie.Name = "third_party"
	cookie.Value = "this is 3rdParty Cookie"
	cookie.Path = "/"
	cookie.Expires = time.Now().Add(1 * time.Hour)
	c.SetCookie(cookie)
	return c.JSON(http.StatusOK, BaseResponse{Result: "ok"})
}

여기까지만 할게요.
이어서 디스크 안쪽에서 페이지를 읽을 때http://サーバーサイドのIP:3000/cookie/third에 xml HTTPRequest가 액세스한 코드가 기재되어 있습니다.

<script>
window.onload = async function (_event) {
  var xhr = new XMLHttpRequest()
  xhr.withCredentials = true //クロスドメインでのクッキーセットを許可
  xhr.open('GET', 'http://[サーバーのIP]:3000/cookie/third')
  xhr.onload = function (e) {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        console.log(xhr.responseText)
      } else {
        console.error(xhr.statusText)
      }
    }
  }
  xhr.onerror = function (e) {
    console.error(xhr.statusText)
  }
  xhr.send(null)
}

// スクリプトタグを追加関数(任意のタイミングで呼び出し)
async function appendScriptTag (src) {
  let script = document.createElement('script')
  script.type = 'text/javascript'
  script.src = src
  document.body.appendChild(script)
}
</script>

이렇게 하면 과자가 설정되지 않는다.
크롬의 개발 도구를 확인해 보겠습니다.

경고 표시가 뭐가 있을까요?
브라우저 기본 설정은 타사 쿠키를 허용하지 않습니다.
따라서 이대로 가면 사용자 환경에 따라 과자가 설정되지 않는다.
https://cg-support.isr.co.jp/hc/ja/articles/360000951893-브라우저가 쿠키를 유지하기 위해 설정되었는지 확인
클라이언트가 쿠키를 설정하는 데 많은 노력을 기울여야 합니다.

패스트푸드 쿠키 세트

다음은 첫 파티 쿠키 세트를 설치해 보자.
우선 서버 쪽에서 추가 http://[サーバーホストIP]: 3000/cookie/` 접근할 때의 처리.

// SetFirstCookieHandler JSONPでクッキーにセットしてほしい内容を関数にラップして返却
func SetFirstCookieHandler(c echo.Context) error {
	callback := c.QueryParam("callback")
	body := new(CokkieResponse)
	body.Name = "first_pirty"
	body.Value = "this is 1stParty Cookie"
	body.Expires = ""
	return c.JSONP(http.StatusOK, callback, body)
}

이번 구현 시에는 setCookie 메서드를 사용하지 않습니다.
서버 쪽에서 쿠키를 설정하는 것이 아니라 설정하고자 하는 내용을 고객 측에 반환하여 고객 측에서 쿠키를 쿠키로 설정하도록 합니다
그리고 클라이언트 방면에서 다음과 같이 실시한다.

<script>
// ページ読み込み時点でスクリプトタグを動的に追加しJSONPによる通信を行う
window.onload = async function (_event) {
  var cookieVal = extractCookie('first_pirty')
  //既にクッキーがセットされている場合URLパラメーターに含めて送信する
  await appendScriptTag(
    'http://192.168.0.100:3000/cookie/first?callback=callBack' +
     '&setedCookie=' + cookieVal
  )
}

// callバック関数。サーバーからデータを受け取ってクッキーにセットする
window.callBack = function (jsonData) {
  if (jsonData.name) {
    const cookie = `${jsonData.name}=${jsonData.value}`
    document.cookie = cookie
  }
}

// スクリプトタグを追加する関数(任意のタイミングで呼び出し)
async function appendScriptTag (src) {
  let script = document.createElement('script')
  script.type = 'text/javascript'
  script.src = src
  document.body.appendChild(script)
}

// 設定されているクッキーから特定の値を取得
function extractCookie (key) {
  const cookiesArray = document.cookie.split(';')
  let value = ''
  for (var c of cookiesArray) {
    var cArray = c.split('=')
    if (cArray[0] === key) {
      value = cArray[1]
    }
  }
  return value
}

</script>

extractCoookie 설정된 쿠키에서 특정 값을 추출합니다.

페이지를 읽을 때 JSONP를 통해 서버 측면에 접근(첫 번째 제작된 쿠키가 설정되어 있으면 URL 매개 변수에 정보를 설정함)

서버에서 쿠키에 설정할 콘텐츠 패키지에 JSONP 응답

클라이언트에서 호출 함수에 쿠키를 설정하는 처리를 설명

이러한 절차에 따라 클라이언트에서 쿠키를 설정하기만 하면 같은 영역의 쿠키로 처리할 수 있다.
개발 도구를 통해 확인한 후 다음과 같다.
서버 쪽에서 설정한 쿠키가 아니라 디스크 안에서 발행된 쿠키로 설정되었습니다.(js로 했으니까 당연한 거야)

그리고 쿠키는 같은 영역에서만 HTTP 요청 페이지의 헤더에 포함되어 발송되기 때문에 JSONP 통신할 때 URL 매개 변수로 설정됩니다.(이하 섹션)

var cookieVal = extractCookie('first_pirty')
//既にクッキーがセットされている場合URLパラメーターに含めて送信する
await appendScriptTag(
'http://192.168.0.100:3000/cookie/first?callback=callBack' +
'&setedCookie=' + cookieVal
)

https://developer.mozilla.org/ja/docs/Web/HTTP/Cookies#Define_where_cookies_are_sent

총결산

이상은 매우 간단한 설치이지만 실제로 기존의 쿠키를 서버에 보내면 서버 처리 내용의 처리를 추가로 제어할 수 있다.
탈곡기를 통한 광고 게시는 가능하지만, 곡기를 바탕으로 미리 제어해 이런 기술에 대한 이해를 촉진할 수 있을 것으로 보고 앞으로도 적극적으로 배우겠다.
참고 자료
https://corp.logly.co.jp/20190510/706