본문 바로가기

소프트웨어-이야기/Web

HTTPS 통신 순서 1. 브라우저는 호스트 주소를 IP로 변환한다. 로컬에 IP 주소가 있으면, 주소 정보를 재사용한다. 만약 없으면 DNS 서버에 질의한다. 2. 주소가 https 스키마로 시작하는 경우, 클라이언트는 서버의 443 포트로 TCP 커넥션을 연다. SSL 트래픽은 바이너리 프로토콜이기 때문에 HTTP와는 다르다. 그래서 80번 포트가 아니라 443 포트로 통신한다. 3. 클라이언트와 서버가 보안 변수를 주고받는 HandShake 시작한다. 3-a. 클라이언트가 서버에 보안 설정을 위한 요청을 보낸다. 이를 Client Hello라고 부른다. 세션키 생성에 사용할 랜덤 스트링, 사용가능한 암호화 기법 등을 전달한다. 3-b. 서버도 보안 설정에 필요한 응답을 내려준다. 이를 Server Hello라고 부른다...
Chrome의 기본 레퍼러 정책 변화 - strict-origin-when-cross-origin (2020.07 / Chrome v.85) 요약 크롬은 85 버전 (2020.07 출시)부터 strict-origin-when-cross-origin 정책의 기본값을 enable으로 설정하기 시작했다. 이 영향으로 referer의 origin이 다른 경우, url path, parameter를 수집할 수 없는 경우가 발생하게 된다. 웹사이트에 referer 정책을 meta 태그로 설정해둔 경우, 이와 같은 문제는 발생하지 않는다. 크롬에서는 웹사이트에 referer 정책이 선언되어있지 않은 경우에만 브라우저의 referer 정책을 따른다. 각 브라우저의 referer 정책 설정은 chrome://flags/#reduced-referrer-granularity 에서 확인할 수 있다. Chrome 85의 Referer 정책 변화 referer hea..
HTTP 리소스 출처 확인하기 - origin, site, Sec-Fetch-Site Header Origin이란?origin은 URL에서 스키마, 호스트, 포트를 합한 것을 말한다. https://www.example.com/foo Url이 있다면, https://www.example.com:443 이 origin이다. same origin 식별 샘플 Sitesite는 TLD(Top-level domains. ex. .com / .kr )과 TLD 이전 도메인의 조합을 말한다.예를 들어, https://www.example.com/foo URL에서 site는 example.com 이다. schemeful same-sitesame-site는 schema를 보지 않는다. 그러나 http가 취약 채널을 통해 사용되는 것을 막아야하는 경우, same-site보다 더 엄격한 기준인 schemeful same..
내멋대로 React 개념 정리하기 런타임컴퓨터 언어 안에 쓰인 프로그램을 관리하기 위해 특정한 컴파일러나 가상 머신이 사용하는 기본 코드 라이브러리나 프로그램을 말한다. Nodes자바스크립트 엔진인 V8으로 빌드된 자바스크립트 런타임이다. 자바스크립트로 서버 사이드 애플리케이션으로 구현할 수 있게 해준다. npmNode js으로 만들어진 모듈을 관리해주는 툴이다. 파이썬에서는 pip, 루비에서는 gem으로 연상하면 된다. 명령문 npxnpm 5.2+ 버전의 패키지 실행 도구이다. React자바스크립트 라이브러리이다. 컴포넌트라고 불리는 독립적인 코드 조각들을 활용하여, 복잡한 UI를 유연하게 구현할 수 있게 도와주는 역할을 한다. Babel자바스크립트 컴파일러다.Babel의 입력과 출력 모두 자바스크립트이다. 최신 버전의 자바스크립트 문..
(Front) 유용한 웹디자인 오픈소스 사무실 키오스크 앱을 꾸미면서, 웹디자인 오픈소스에 관심이 생겼다. 마음에 드는 오픈소스들을 정리해보고자 한다. 🎨 CSS / JavaScript 오픈소스 1.Strobe Light Effect for Text Glitch effect strobocops ... codepen.io 2. Confetti Falling Background Using Canvas Confetti ... codepen.io 3. Looking Through Water Blur Animation Effect – 5 Styles https://codemyui.com/looking-water-blur-animation-effect-5-styles/ 4. Microsoft Defrag (MSDOS) - Now on your brows..
카드형 Swipe 라이브러리 리서치 피파 게임 같은 이미지가 웹페이지에서 슥슥 움직이는 그런 라이브러리를 찾고 있다. 1. Swiper 데모 사이트 : http://idangero.us/swiper/demos/#.WKvi-BKLT_Q깃허브 : https://github.com/thebird/Swipe 뭔가.. 삐까뻔쩍해보이지 않는다. 2. Hammer JS 사이트 : http://hammerjs.github.io/ 유용해보이지만, 모바일에 최적화된 인터랙티브 라이브러리여서 PC에서는 부적합하다 3. js-swipe-cards 데모 사이트 : http://apeatling.com/demos/js-swipe-cards/깃허브 : https://github.com/apeatling/javascript-swipe-cards 음.. 역시 모바일에서..
스포카 한산스체로 티스토리 글꼴 바꾸기 스포카 한산스체로 티스토리 글꼴 바꾸기 예전에 페북을 돌아다니다가 스포카에서 글꼴체를 공개했다는걸 발견했당글꼴도 깔끔하구 참신참신해서 뭔가 맘에 들었다.그래서 블로그를 꾸미면서... 스포카 한산스체를 써봐야겠단 생각을 했다. 방법은 스포카 한산스체 사이트를 참고했다. 스포카 한산스체 바꾸는 방법은 아래와 같다.HTML/CSS 관리 페이지에 들어간다. HTML 기존의 폰트 LINK들을 다 지워야 한다. 나같은 경우에는 구글 FONT 링크가 걸려있어서 지우고, 아래 태그를 추가해서 폰트 링크를 긁어왔다. CSS글자 태그에 폰트 CSS를 먹혀줘야한다. 나는 태그와 태그에 폰트를 먹혀줬다. p,a { font-family: 'Spoqa Han Sans', 'Spoqa Han Sans JP', 'Sans-seri..
[FACEBOOK API]페이스북 공유하기 기능 달기 / 자바스크립트 / FB.ui 페이스북 공유하기 기능에 대해서 포스팅하고자 한다! facebook 공유하기 기능 달기 차터 1. facebook developer (https://developers.facebook.com)에서 개발자로 등록을 하여, app을 등록하여 app id를 발급받아야 한다.2. 위 화면의 choose a platform을 클릭하여, 웹 사이트 플랫폼을 선택한다. 그리고 아래에 공유하고자 하는 페이지의 도메인을 등록한다. 3. URL Redirection 활용하여 공유하기 링크 등록하기 (관련 링크)html > A 태그 혹은 Button의 location.href 속성에 위의 값을 넣어주면 된다.app_id는 1번에 보이는 자기의 app_id를, href에는 공유하고자 하는 웹페이지의 링크를, redirect_..