jeff_gan.log https://velog.io/ Fast is better than good Tue, 30 Nov 2021 06:22:08 GMT https://validator.w3.org/feed/docs/rss2.html https://github.com/jpmonette/feed jeff_gan.log https://images.velog.io/images/jeff_gan/profile/1786ebcd-0599-4558-9e57-0a020676c71f/썬글라스.jpg https://velog.io/ Copyright (C) 2019. jeff_gan.log. All rights reserved. <![CDATA[Cookie]]> https://velog.io/@jeff_gan/Cookie https://velog.io/@jeff_gan/Cookie Tue, 30 Nov 2021 06:22:08 GMT Cookie

쿠키는 브라우저에 저장되는 작은 크기의 문자열로, HTTP 프로토콜의 일부입니다

쿠키는 주로 웹서버에 의해 만들어집니다. 서버가 HTTP 응답 헤더의 Set-Cookie에 내용을 넣어 전달하면, 브라우저는 이 내용을 자체적으로 브라우저에 저장합니다 (쿠키).

브라우저는 사용자가 쿠키를 생성하도록 한 동일 서버에 접속할 때마다 쿠키의 내용을 Cookie 요청 헤더에 넣어서 함께 전달합니다

쿠키는 클라이언트 식별과 같은 인증에 많이 사용됩니다.

  • 사용자가 로그인하면 서버는 HTTP 응답 헤더의 Set-Cookie에 담긴 “세션 식별자(session identifier)” 정보를 사용해 쿠키를 설정합니다.
  • 사용자가 동일 도메인에 접속하려고 하면 브라우저는 HTTP Cookie 헤더에 인증 정보가 담긴 고윳값(세션 식별자)을 함께 실어 서버에 요청을 보냅니다.
  • 서버는 브라우저가 보낸 요청 헤더의 세션 식별자를 읽어 사용자를 식별합니다.

document.cookie로 살펴보기

document.cookie로 확인한 daum.net의 쿠키

> document.cookie
'webid=d3fdabd053b311ea9f33000af759d210; webid_ts=1582257785973; dtck_first=20210511; SLEVEL=1; HM_CU=5DrWr6DnRlF; __T_=1; chanelApiType=default; webid_sync=1638236159761'

document.cookie 프로퍼티를 이용하면 자바스크립트로 쿠키를 확인할 수 있습니다. name=value 쌍으로 구성되고, 각 쌍은 ;로 구분되는걸 알 수 있습니다. httpOnly로 설정되지 않은 쿠키들을 확인할 수 있습니다

document.cookie로 쿠키 쓰기

> document.cookie
'webid=d3fdabd053b311ea9f33000af759d210; webid_ts=1582257785973; dtck_first=20210511; SLEVEL=1; HM_CU=5DrWr6DnRlF; __T_=1; chanelApiType=default; webid_sync=1638245518265'

> document.cookie = 'user=John';
'webid=d3fdabd053b311ea9f33000af759d210; webid_ts=1582257785973; dtck_first=20210511; SLEVEL=1; HM_CU=5DrWr6DnRlF; __T_=1; chanelApiType=default; webid_sync=1638245518265; user=John'

>
// 특수 값(공백)은 인코딩 처리해 줘야 합니다.
let name = "my name";
let value = "John Smith"

// 인코딩 처리를 해, 쿠키를 my%20name=John%20Smith 로 변경하였습니다.
document.cookie = encodeURIComponent(name) + '=' + encodeURIComponent(value);

document.cookie에 값을 쓸 때는 data property가 아닌 accessor property 입니다. document.cookie= 연산은 모든 쿠키를 덮어쓰지 않고, 명시된 쿠키인 user의 값만 갱신합니다.

cookie의 한계

encodeURIComponent 로 인코딩 이후 name=value 쌍은 4KB를 넘을 수 없습니다. 도메인 하나당 저장할 수 있는 쿠키의 개수는 20여 개 정도로 한정되어 있습니다.

개발자도구에서 살펴보기

개발자도구에서 확인한 daum.net의 쿠키 쿠키 옵션 옵션은 key=value 뒤에 나열하고 ;로 구분합니다.

document.cookie = "user=John; path=/; expires=Tue, 19 Jan 2038 03:14:07 GMT"

Domain

  • 쿠키에 접근 가능한 도메인 지정

  • domain옵션에 아무 값이 없는 경우, 쿠키를 설정한 도메인에서만 쿠키에 접근할 수 있습니다 (subdomain도 불가)

  • domain옵션에 루트 도메인을 명시적으로 설정하는 경우 서브 도메인에서도 쿠키에 접근할 수 있습니다

    // site.com에서
// 서브 도메인(*.site.com) 어디서든 쿠키에 접속하게 설정할 수 있습니다.
document.cookie = "user=John; domain=site.com"

// 이렇게 설정하면

// forum.site.com와 같은 서브도메인에서도 쿠키 정보를 얻을 수 있습니다.
alert(document.cookie); // user=John 쿠키를 확인할 수 있습니다.
    • 구식 브라우저 지원을 위해서는 domain=.site.com 식으로 작성합니다

Path

  • 설정한 경로의 하위 경로에 있는 페이지만 쿠키에 접근 가능합니다. (보통 루트로 설정)

Expires / Max-Age

  • Expires나 Max-Age가 지정되어 있지 않으면 브라우저가 닫힐 때 쿠키도 함께 삭제됩니다(세션 쿠키)

  • Max-Age와 Expires 모두 있는 경우 Max-Age가 적용됩니다(Expires 무시)

  • Expires(유효 일자)

    • 브라우저는 설정된 유효 일자까지 쿠키를 유지하다가, 해당 일자가 도달하면 쿠키를 자동으로 삭제합니다
    • GMT 포맷으로 설정해야 합니다. date.toUTCString 사용
      // 지금으로부터 하루 후
let date = new Date(Date.now() + 86400e3);
date = date.toUTCString();
document.cookie = "user=John; expires=" + date;

  • Max-Age(만료 기간)

    • 현재부터 설정하고자 하는 만료일시까지의 시간을 초로 환산한 값을 설정합니다
    • 0이나 음수값을 설정하면 쿠키값이 바로 삭제됩니다.
      // 1시간 뒤에 쿠키가 삭제됩니다.
document.cookie = "user=John; max-age=3600";

    // 만료 기간을 0으로 지정하여 쿠키를 바로 삭제함 document.cookie = "user=John; max-age=0";

HttpOnly

  • 웹서버에서 Set-Cookie 헤더를 이용해 쿠키를 설정할 때 지정할 수 있습니다.
  • 해당 옵션 설정 시, 자바스크립트 같은 클라이언트 측 스크립트가 쿠키를 사용할 수 없게 합니다(document.cookie 로 못봄)
  • XSS(Cross-Site Scripting) 같은 공격을 방어할 수 있습니다.

Secure

  • 이 옵션 설정 시 HTTPS로 통신하는 경우에만 쿠키가 전송됩니다.
  • 쿠키는 기본적으로 도메인만 확인하고 프로토콜을 따지지 않습니다.
  • secure 옵션이 설정된 경우 프로토콜도 확인합니다.
    // (https:// 로 통신하고 있다고 가정 중)
// 설정한 쿠키는 HTTPS 통신시에만 접근할 수 있음
document.cookie = "user=John; secure";

SameSite

  • XSRF(Cross-Site Request Forgery) 공격을 막기 위해 만들어진 옵션입니다
  • XSRF : 크로스 사이트 요청 위조
    • 실제 은행에서는 back.com을 사용하는 모든 폼에 XSRF 보호 토큰과 같은 특수 필드를 넣어서 막지만, 구현에 시간이 걸립니다
  • SameSite 옵션
    • samesite=strict (samesite 옵션만 써줘도 동일)
      • 제 3의 도메인(사이트 외부)에서 요청이 이뤄질 때 쿠키를 전송하지 않습니다
    • samesite=lax
      • strict와 마찬가지로 lax도 사이트 외부에서 요청을 보낼 때 브라우저가 쿠키를 보내는 걸 막아줍니다.
      • 예외사항 (다음 두 조건을 동시에 만족하는 경우)인 경우는 쿠키를 전송합니다.
        • '안전한' HTTP 메서드인 경우(GET방식)
        • 작업이 최상위 레벨 탐색에서 이루어질 때 (브라우저 주소창에서 URL을 변경하는 경우)
      • 조건을 충족하지 못하는 경우
        • AJAX는 탐색 행위가 아니므로 충족하지 못합니다.
        • iframe안에서 탐색은 최상위 레벨이 아니므로 충족하지 못합니다.
      • 조건을 충족하는 경우
        • 특정 URL로 이동 : samesite=lax옵션이 설정되어 있으면 쿠키가 서버로 전송됩니다
        • 노트에 저장된 링크를 여는 것도 특정 URL로 이동하는 행위이므로 충족합니다
    • 다만 samesite는 오래된 브라우저에서는 지원하지 않습니다(2017년 전)

SameParty

추가사항

브라우저에 따라 서드 파티 쿠키를 허용하지 않을 수 있습니다. Safari는 기본적으로 서드 파티 쿠키를 금지합니다. 사용자가 EU 국가 거주자인 경우 GDPR을 준수해야 합니다. 따라서, 사용자 추적 시 반드시 동의를 얻어야 합니다.

참고

]]> <![CDATA[CORS]]> https://velog.io/@jeff_gan/CORS https://velog.io/@jeff_gan/CORS Mon, 29 Nov 2021 10:15:51 GMT CORS 정리

배경

Origin

protocol + host + port 가 동일한 url의 경우 같은 origin(출처)라고 합니다

[다른 출처 #1, 프로토콜이 다름]
https://naver.com
http://naver.com

[다른 출처 #2, 호스트가 다름(실제로는 동일하지만 브라우저에서 string 비교할 때 다르게 인식)]
http://localhost:8081
http://127.0.0.1:8081

[다른 출처 #3, port가 다름]
localhost:8080
localhost:8081


[같은 출처, path만 다름]
http://naver.com
http://naver.com/login

SOP (Same Origin Policy)

동일 출처의 리소스로만 상호작용을 제한하는 브라우저의 보안 정책입니다. 악의적일 수 있는 문서를 분리함으로 공격 경로를 줄여줍니다.

example
1. 페이스북에 로그인 후 인증토큰을 받아옵니다
2. 메일에서 악의적인 페이지(hack.com)에 접속하게 되었습니다
3. 악의적인 페이지에서 인증토큰을 이용해 페이스북에 포스트를 올리는 요청을 보냅니다
4. 이때 SOP 정책이 없는 경우 이슈가 발생합니다

IE의 경우는 SOP에 몇가지 예외사항이 있습니다.

  1. 양쪽 도메인 모두 신뢰할 수 있는 사이트(높은 단계의 보안 수준)인 경우 SOP를 적용하지 않습니다
  2. SOP 검사에 포트를 포함하지 않습니다

CORS (Cross Origin Resource Sharing)

페이지를 만들다 보면 다른 출처의 자원이 필요한 경우가 생깁니다. 하지만 브라우저에서는 SOP로 인해 다른 출처의 자원과 상호작용이 제한됩니다. CORS는 HTTP 헤더를 사용해 한 출처에서 실행중인 웹 어플리케이션이 다른 출처의 자원에 접근할 수 있는 권한을 부여하도록 브라우저에게 알려주는 mechanism 입니다.

서버 데이터에 부수 효과(side effect)를 일으킬 수 있는 HTTP 요청 메서드(GET을 제외한 HTTP 메서드)에 대해, CORS 명세는 브라우저가 요청을 OPTIONS 메서드로 "프리플라이트"(preflight, 사전 전달)하여 지원하는 메서드를 요청하고, 서버의 "허가"가 떨어지면 실제 요청을 보내도록 요구하고 있습니다.

접근 제어 시나리오 예제

단순 요청 (simple request)

simple request의 경우는 CORS preflight를 트리거하지 않습니다(ex. 별도의 side effect가 없는 get 요청). simple request는 다음 조건을 모두 충족해야 합니다

  • Method
    • GET, POST, HEAD 중 하나
  • 아래의 Header만 설정됨
    • user agent가 자동으로 설정한 헤더(Connection, User-Agent, ...)
    • Accept (클라가 이해가능한 컨텐츠 타입 나열)
    • Accept-Language (클라가 이해, 지역 설정 중 선호되는 언어)
    • Content-Language (청중을 위한 언어)
    • Content-Type
      • application/x-www-form-urlencoded
      • multipart/form-data
      • text/plain
    • 실제 서비스에서 위 조건을 만족하기는 어렵습니다 (ex. Authorization 헤더 등 사용)

Simple Request 헤더

GET /resources/public-data/ HTTP/1.1
Host: bar.other
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:71.0) Gecko/20100101 Firefox/71.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Connection: keep-alive
Origin: https://foo.example
  • CORS 요청을 보내는 경우 브라우저는 항상 Origin 헤더를 request에 추가합니다
  • Origin 헤더엔 요청이 이뤄지는 페이지 경로(/page)가 아닌 오리진(도메인·프로토콜·포트) 정보가 담기게 됩니다.

Simple Response 헤더

HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 00:23:53 GMT
Server: Apache/2
Access-Control-Allow-Origin: *
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: application/xml

[…XML Data…]
  • 서버는 요청 헤더에 있는 Origin를 검사하고, 요청을 받아들이기로 동의한 상태라면 특별한 헤더 Access-Control-Allow-Origin를 응답에 추가합니다
  • 크로스 오리진 요청이 이뤄진 경우, 자바스크립트는 기본적으로 ‘안전한’ 응답 헤더로 분류되는 헤더에만 접속할 수 있습니다.
  • 안전한 응답 헤더 리스트
    • Cache-Control, Content-Language, Content-Type, Expires, Last-Modified, Pragma
    • 이 외의 응답 헤더에 접근하면 에러가 발생합니다.
    • 자바스크립트를 사용해 안전하지 않은 응답 헤더에 접근하려면 서버에서 Access-Control-Expose-Headers라는 헤더를 보내줘야만 합니다

프리플라이트 요청 (preflight request)

CORS가 허용되는지 먼저 preflight 요청을 통해 체크합니다

  • CORS 요청을 보내는 경우 브라우저는 항상 Origin 헤더를 request에 추가합니다

인증정보를 포함한 요청 (credentialed requests)

자바스크립트로 크로스 오리진 요청을 보내는 경우, 기본적으로 쿠키나 HTTP 인증 같은 자격 증명(credential)이 함께 전송되지 않습니다. 서버에서 이를 허용하고 싶으면, 자격증명이 달린 헤더를 명시적으로 허용하겠다는 세팅이 서버에 필요합니다. 자격증명을 함께 전송하는 방법

  • fetch의 경우 credentials: include
  • axios의 경우 withCredentials: true,

자격 증명 정보가 담긴 요청을 서버에서 받아들이기로 동의했다면 서버는 응답에 Access-Control-Allow-Origin 헤더와 함께 Access-Control-Allow-Credentials: true 헤더를 추가해서 보냅니다. 자격 증명이 함께 전송되는 요청을 보낼 땐 Access-Control-Allow-Origin에 *을 쓸 수 없습니다.

CORS 해결 방법

프론트 프록시 서버 설정

서버 응답 시 직접 헤더에 설정

  • 서버분들에게 요청
  • springboot에서 @CrossOrigin 설정 등 ,,

참고

https://ko.javascript.info/fetch-crossorigin https://ui.toast.com/weekly-pick/ko_2021110 https://developer.mozilla.org/ko/docs/Web/HTTP/CORS

]]> <![CDATA[접근성 QA 회고]]> https://velog.io/@jeff_gan/%EC%A0%91%EA%B7%BC%EC%84%B1-QA-%ED%9A%8C%EA%B3%A0 https://velog.io/@jeff_gan/%EC%A0%91%EA%B7%BC%EC%84%B1-QA-%ED%9A%8C%EA%B3%A0 Thu, 25 Nov 2021 14:20:29 GMT 웹 접근성(Web Accessibility)

웹 사이트에서 제공하는 정보를 차별 및 제한 없이 동등하게 이용할 수 있도록 보장하는 것

  • 장애인 및 고령자 등을 포함한 모든 사람
  • 다양한 플랫폼 및 장치, 웹 브라우저 등의 모든 환경

접근성 QA 이슈 종류

이번 프로젝트 접근성 QA 종류는 다음과 같이 분류할 수 있다

  1. 초점 표시 안됨 or 표시 위치 부적절
  2. 대체 텍스트, 음성 출력, 알림 미흡

1. 초점 표시 안됨 or 표시 위치 부적절

  • 기존 프로젝트에서는 outline:none이 설정되어 있어 focus되었을 때 초점이 시각적으로 표현되지 않음
    • outline:focus-visible 가상클래스를 사용해 탭키로 초점 접근시 시각적으로 표현
  • 팝업 활성화 시 첫 초점이 안내문구가 아닌 '확인 버튼'에 접근되어 시각장애인 사용자가 메시지 인식이 어려움
    • 팝업 활성화 시, 초점이 팝업의 첫 요소(안내문구)로 이동되도록 제어(tabindex, useEffect 등 사용)

2. 대체 텍스트, 음성 출력, 알림 미흡

대체 텍스트는 .screen_out 클래스를 사용해서 작성

.screen_out {
  overflow: hidden;
  position: absolute;
  width: 0;
  height: 0;
  line-height: 0;
  text-indent: -9999px;
}

WAI-ARIA

  • aria : Accessible Rich Internet Application
  • WAI : Web Accessibility Initiative의 약자로 W3C에서 웹 접근성을 담당하는 조직
  • WAI-ARIA : ARIA를 위한 접근성 권고안으로 마크업에 역할(role), 속성(property), 상태(state) 정보를 추가하여 스크린리더 및 보조 기기 등에서 접근성 및 상호 운용성을 향상시키고 보다 나은 사용자 경험(User Experience)을 제공

WAI-ARIA 3가지 기능 역할(role)

  • 특정 element에 역할을 부여하여 사용자에게 정보 제공. 동적으로 변경할 수 없음
    <!-- 접혀진 상태 -->
<div role="button" ...>
 <span class="screen_out">다운받기</span>
. . .
</div>
  • QA중 사용된 role
    • role=button : 초점이 하나로 제공됨
    • role=log : 스크린리더가 자동으로 음성 출력

속성(property)

  • element가 기본적으로 갖고 있는 특징이나 상황
  • 'aria-*' 접두어를 가진다
  • 어플리케이션 실행중에 바뀌는 경우는 드물다
    <p class="info_tip" aria-live="assertive">
 <span>TIP</span>
  카카오메일이 있다면 메일 아이디만 입력해 보세요.
</p>
  • QA중 사용된 property
    • aria-live : 실시간의 내용을 갱신하는 영역. assertive를 값으로 사용하면 보조기기 작업을 중단하고 갱신 내용을 즉시 사용자에게 전달
    • aria-label : 현재 element의 레이블 정의
    • aria-describedby : id를 참조해서 설명을 컨트롤과 직접 연관시키도록 한다

상태(state)

  • element가 기본적으로 갖고 있는 특징이나 상황
  • 'aria-*' 접두어를 가진다
  • 어플리케이션 실행중에 자주 바뀐다
    <!--접혀진 상태이며 새로운 메시지가 있을 때-->
<button aria-expanded="false">
<span class="screen_out">새 메시지</span><span class="screen_out">톡으로 상담</span>
<button>