'분류 전체보기' 카테고리의 글 목록

' 와 "

차이 없음

ex) 섞어서 편하게 쓸 수 있는 경우들

a= '<div id="divId">' // 태그 안에 들어가야할 " 입력
b= "It's 3 o'clodk" // '로 사용했다면 중간에 끊어짐

backtick `

ES6부터 사용될 수 있으며 편리한 경우가 많음

const name = 'DW'
const result = `My name is ${name}` //내부에 변수 사용 가능, 기존엔 ''+name+'' 으로 복잡스럽게 했어야함
const result2 = `2+3=${2+3}` //수식 사용 가능
const result3 = `abcde
fghi` //여러줄 사용 가능, 기존엔 'abcde\nfghi'

index 접근 후 변경안됨

let str='abcde';
str[0]; // a
str[1]=f; // 변화없음

저작자표시

RSA, SSL, HTTPS에 대한 사전지식이 필요하다.

https://fieldanimal.tistory.com/79?category=908294

HTTPS란

https://100100e.tistory.com/317 Https는 공개키? 대칭키? 비대칭키? 공개키와 비대칭키를 혼용해서 쓰는 걸로 알고 있고 두 개 다 같은 말이라고 생각하고 글을 쓰겠다. Https 관련 글들을 보면 공개키를 통

fieldanimal.tistory.com

SSL 인증서가 필요한 이유

위 글에서 public key 자체가 잘못된 public key면 내 개인정보를 털릴 수 있다고 했다.

지금 나는 Tistory로부터 public key를 받아서 안심하고 통신을 시작하는데 근본부터 속았다면,,

그럼 public key가 Tistory로부터 받았다는걸 어떻게 증명하냐? 제3기관의 힘을 빌린다. 이들은 믿을만하다는 것이다.

실제로 크롬, 웨일 등 브라우저를 설치하면 자동으로 많은 인증서들이 등록되어있다.

대략적인 과정

클라이언트는 서버로부터 인증서를 받고

인증서에 적혀있는 발급자 서명을 이용해 해당 인증서가 발급자로부터 검증받은 것임을 확인한다.

발급자가 위 리스트에 들어있으면 OK이고 통신을 시작한다.

SSL handshake과정중 certificate 과정이다.

https://aws-hyoh.tistory.com/entry/HTTPS-%ED%86%B5%EC%8B%A0%EA%B3%BC%EC%A0%95-%EC%89%BD%EA%B2%8C-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-3SSL-Handshake

HTTPS 통신과정 쉽게 이해하기 #3(SSL Handshake, 협상)

고대 그리스에서는 타인에게 노출되어서는 안 될 중요한 정보를 보낼 때, 전달하는 이(사자)의 머리를 빡빡 깎아서 중요한 정보를 적은 후 머리가 자라서 글이 보이지 않으면 그제야 상대방에게

aws-hyoh.tistory.com

OpenSSL

OpenSSL이란, TLS 인증서를 만들기 위한 과정을 대신해주는 오픈소스 라이브러리이다.
인증서를 만드려면 private key도 만들고 csr도 만들고 cert도 발급하고 기타 등등을 해야하는데 사용할 알고리즘, 파라미터를 입력해주면 파일로 만들어준다.

아무리 프로토콜이 정해져있다고 해도 우리가 직접 코딩하고 계산해서 만들 수는 없기 때문에 이런 라이브러리를 이용해야한다.

https://aspdotnet.tistory.com/2653

Windows 윈도우 10 에 OpenSSL 을 설치하는 방법

OpenSSL은 TLS (Transport Layer Security) 및 SSL (Secure Sockets Layer) 프로토콜을 위한 모든 기능을 갖춘 툴킷 입니다. Apache 스타일 라이센스에 따라 라이센스가 부여됩니다. 이 튜토리얼은 Windows 운영..

aspdotnet.tistory.com

예시로 과정 살펴보기

https://www.lesstif.com/system-admin/openssl-root-ca-ssl-6979614.html

OpenSSL 로 ROOT CA 생성 및 SSL 인증서 발급

서명에 사용할 해시 알고리즘을 변경하려면 -sha256, -sha384, -sha512 처럼 해시를 지정하는 옵션을 전달해 준다. 기본값은 -sha256 이며 openssl 1.0.2 이상이 필요

www.lesstif.com

MyCompany : 서버 이름

COMODO : 브라우저에 내장된 신뢰할 수 있는 CA 이름 예시

0. MyCompany의 private key를 만든다.

1. CSR 생성

mycompany 인증서를 위한 CSR를 만든다. CSR은 인증서 발급 요청서 양식이다.
이때 mycompany 도메인, 지역 등의 정보를 기입한다.

2. 인증서 발급

COMODO에게 CSR을 넘겨주고 인증서를 발급받는다.

https://comodosslstore.com/promoads/ssl-certificates.aspx?gclid=CjwKCAjw3cSSBhBGEiwAVII0Z1YlKGMSf60MyriJkTyIIIQn0VYe9TQ0TQHMWy38JbWJ4mnzybWTzxoC5oIQAvD_BwE

Comodo SSL Certificates: Instant, Premium, Positive, Essential, EV SSL

comodosslstore.com

<실제 인증기관, https 서버를 정식으로 운용하고싶으면 돈을 내고 인증서를 받을 수 있다.>

인증서 안에는 MyCompany의 도메인, MyCompany의 public key, 발급자(COMODO) 등등의 정보들과 지문이 들어있다.

지문은 MyCompany의 public key를 COMODO의 private key로 암호화한 서명이다. 실제로는 실제로는 정보들의 해시값을 암호화하지만 이해를 쉽게 하기 위해 public key를 암호화한다고 단순화해서 생각해본다.

https://chickenpaella.tistory.com/40

전자 서명이란?

전자 서명 전자 서명이란 어떤 데이터가 정말 그 사람 것이 맞는지를 보장해주는 것이다. 이 때 비대칭키(공개키) 암호화 기술이 사용된다. 어떤 사람 A가 자신의 비밀키를 사용하여 원본 데이터

chickenpaella.tistory.com

3. 클라이언트에게 인증서 전달

요청이 들어온 클라이언트한테 COMODO에서 발급받은 인증서를 던져준다. 이때 클라이언트는 수신한 인증서가 MyCompany가 맞는지 계속 의심을 하고있는 상태이다.

4. 인증서 검증

COMODO는 브라우저가 이미 신뢰하고있는 인증서이다.

COMODO의 Public Key를 이용해 MyCompany 인증서의 지문을 복호화한다.
이때 MyCompany 인증서의 Public Key와 복호화해서 나온 Public Key가 동일하면, MyCompany는 COMODO에게 인증을 받았다는게 확실하고, COMODO는 브라우저가 신뢰하고 있는 기관이므로 MyCompany도 신뢰할 수 있게 된다. 브라우저에는 깔끔한 자물쇠가 뜬다.

5. 인증서 chain

만약에 COMODO가 Root CA가 아닌 중간기관이면 COMODO의 Public Key 또한 믿을 수 없으므로

COMODO 인증서에 적힌 Public Key와

COMODO 인증서의 지문을 발급자(Root CA)의 Public Key로 복호화해서 나온 값을 비교한다.

타고 타고 타고 올라가서 결국 Root CA한테 받은게 맞으면 정말 OK이다.

Root CA란?

https://m.blog.naver.com/alice_k106/221468341565

154. [Security] SSL과 인증서 구조 이해하기 : CA (Certificate Authority) 를 중심으로

이번 포스트에서는 인증서의 구조와 동작 원리에 대해 알아보고, 이것이 실제 SSL 기반의 보안 연결에서...

blog.naver.com

모든 흐름을 자세하게 설명해놓으신 형님의 글을 보면 된다.

CA Chain을 계속 하다보면 언젠간 꼭대기까지 올라가게되는데 이를 Root CA라고 부른다.

Root CA는 더이상 올라갈 곳이 없기 때문에 지문(서명)을 다른 기관이 아닌 자신의 Private Key로 만든다.
브라우저가 믿을 수 있는 절대 안뚫리는 곳이라고 한다.

사설 인증서 생성

테스트용으로 Root CA를 만들고 그 Root CA로부터 인증서를 발급받아서 서버를 구축해본다.

1. Root CA private key를 만든다.
2. Root CA csr를 만든다(인증서 요청서)
3. Root CA의 인증서를 만든다(crt) : Root가 Root에게 셀프로 발급

4. 서버용 private key 생성

5. csr 생성 후 Root CA로부터 인증서 발급

Root CA를 직접만들어서 Root CA로부터 지문을 받은 인증서는, 브라우저에서 신뢰할수없다고 뜬다.
이유는 브라우저에 등록된 인증서에 당연히 내가 셀프로 만든 인증서가 없기 때문이다.

KeyStore

직접 OpenSSL 명령을 입력해가며 테스트해보니 많은 파일들이 생겼다.

확장자별 의미 : https://www.ihee.com/616

인증서 파일 포맷 종류 pem, der, cer, crt, csr, pfx, p12, key, jks

인증서 파일 포맷 종류 crt, cer, csr, pem, der, pfx, p12, jks, key .pem ○ PEM (Privacy Enhanced Mail)은 직역하면 '개인 정보 강화 전자 우편'이며 Secure email에 사용하는 표준 형식이다 ○ PEM은 X509 v..

www.ihee.com

keystore를 이용해서 널부러져있는 파일들을 지갑처럼 한데모아 사용할 수 있다.

https://dimdim.tistory.com/entry/openssl%EC%9D%84-%EC%9D%B4%EC%9A%A9%ED%95%9C-Tomcat-HTTPS-%EC%84%A4%EC%A0%95-PKCS12-%ED%8F%AC%EB%A7%B7

openssl을 이용한 Tomcat HTTPS 설정 (PKCS12 포맷)

Tomcat은 JKS, PKCS11 혹은 PKCS12 포맷의 Keystore를 지원한다. JKS 포맷은 Java Standard Keystore 포맷이며, JDK에 포함되어 있는 Keytool 명령어를 사용하여 생성할 수 있다. PKCS12 포맷은 인터넷 표준 포맷..

dimdim.tistory.com

openssl로 .p12 확장명 keystore를 만들 수 있고

openssl과 비슷한 java keytool로 .jks 확장명 keystore를 만들 수도 있고

둘을 변환하며 쓸 수 있다.

변환 가이드 : https://www.sslcert.co.kr/guides/SSL-Certificate-Convert-Format

SSL 인증서 pem, crt, pfx, jks 포맷 변환 가이드 - SecureSign

www.sslcert.co.kr

저작자표시

'보안,인증' 카테고리의 다른 글

HTTPS란 (0)	2021.07.07
OAuth2.0 (0)	2021.07.07
JWT (0)	2021.07.07

margin padding

margin : 나를 기준으로 다른 요소들이랑 얼마나 간격을 둘지

padding : 내안의 공간

-> 개발자도구에서 수정 가능

미디어쿼리

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            h1 {
                text-align: center;
                font-size: 45px;
            }
            div.header{
                border-bottom: 3px solid;
                text-align:left;
            }
            #content {
                
                
            }
            /*max : 0 px~여기까지 적용*/
            /*min : max px~여기까지 적용*/
            /*grid layout은 max~480 까지만 적용, 그보다 작아질시 세로 배치*/
            @media (min-width: 480px) { 
                /*grid-template-columns 속성 사용시 div 그리드 배치 수월*/
                div.main{
                    display: grid;
                    width:100%;
                    grid-template-columns: 1fr 2fr;
                }
                #list {
                    border-right: 3px solid;
                }
            }
        </style>
    </head>
    <body>
        <div class="header">
            <h1>
                <a>WEB</a>
            </h1>
        </div>
        <div class="main">
            <div id="list">
                <ol>
                    <li><a>HTML</a></li>
                    <li><a>CSS</a></li>
                    <li><a>Javascript</a></li>
                </ol>
            </div>
            <div id="content">
                <h2>CSS</h2>
                <p>
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                </p>
            </div>
        </div>
        
    </body>
</html>
Colored by Color Scripter
cs

저작자표시

'웹 > CSS' 카테고리의 다른 글

레이아웃 (0)	2022.03.29
상속, 캐스케이딩 (0)	2022.03.29
선택자 (0)	2022.03.27

inline vs block

block element : 가로로 꽉차는 태그
inline level element : 화면의 일부를 차지하는 태그

ex) h1 태그의 경우 가로로 꽉참, a 태그의 경우 일부만 차지함

순정 값들은 바꿀 수 있는데 css display 속성을 사용

위와 같이 설정한 대로 바뀜

저작자표시

'웹 > CSS' 카테고리의 다른 글

박스 모델, 미디어쿼리 (0)	2022.03.30
상속, 캐스케이딩 (0)	2022.03.29
선택자 (0)	2022.03.27

상속 : 내가 css속성을 지정안했음에도 자동으로 부모 요소 속성이 적용됨

상속 : 자식요소들은 부모요소의 css속성을 상속받는데, 받는거따로 안받는거 따로있다.

1. 받는 경우 ex)

ul{color:gray}

위의 경우 li도 color 속성을 상속받아서 색깔이 동일하게 변함

2. 안받는 경우 ex) border

상속이 유리한경우, 불리한경우에 따라 알아서 지정돼있다.

https://www.w3.org/TR/CSS21/propidx.html

Full property table

www.w3.org

캐스케이딩 : 같은 요소에 적용된 css속성이 여러개일때 뭐가 먼저 적용되는지

style속성 > id선택자 > class선택자 > 태그선택자

저작자표시

'웹 > CSS' 카테고리의 다른 글

박스 모델, 미디어쿼리 (0)	2022.03.30
레이아웃 (0)	2022.03.29
선택자 (0)	2022.03.27

들짐승 프로그래밍