DIL: 모던 리액트 딥 다이브, 8주차-

스터디: 월간 CS, https://github.com/monthly-cs/2024-03-modern-react-deep-dive
오늘 진행: 개인공부

---

DIL-week6-_2024-04-26

| DIL 주차 | 범위 | 내용 | 오늘차 진도 | | -------- | ---------- | -------------------------------------------------------- | ----------- | | 8주차 | 14장, 15장 | 웹사이트 보안을 위한 리액트와 웹페이지 보안 이슈, 마치며 | 884~902p |

오늘 읽은 내용을 markdown으로 간단히 메모

---

<a> 태그의 값 제한

• a 태그 href에 javascript:로 시작하는 코드를 넣는 경우 => 기본 기능을 막고, onClick값은 이벤트 핸들러만 작동시키기 위한 용도로 사용됨

  function App() {
    function handleClick() {
      console.log("hello");
    }
  
    return (
      <>
        {/* a의 href가 작동하지 않아 페이지 이동이 일어나지 않고, onClick 핸들러만 실행 */}
        {/* 마크업 안티패턴, button을 사용하자 */}
        <a href="javascript:;" onClick={handlerClick}>
          링크
        </a>
      </>
    );
  }
  

• javascript:스크립트를 입력 시

  <a href="javascript:alert('hello')">링크</a> // dangerouslySetInnerHTML을 권장하는 경고문과 함께 정상적으로 랜더링됨
  

• a 태그의 값이 방지되어 있지 않은 사이트에 <a href="javascript:alert(origin)">링크C</a>같은 DOM 요소를 추가해 링크를 클릭하면 스크립트를 실행할 수 있다

  • inblog.ai, 라이브 서버에서 실행됨

• 구글에 추가해본 결과: 막혀있음

function isSafeHref(href: string) {
  let isSafe = false;
  try {
    const url = new URL(href)
    if(['http:', 'https:'].includes(url.protocol){
      isSafe = true
    })
  } catch (e) {
    ...
  }

  return isSafe
}

function App(){
  const unsafeHref ="javascript:alert('hello👋')"
  const safeHref = "https://www.naver.com"
  return (
    <>
      {/* 위험한 href로 분류되어 #이 반환*/}
      <a href={isSafeHref()?}></a>
    </>
  )
}
<a >

• href로 들어갈 수 있는 값을 제한해야 한다
  • ❓ 어떻게? (구글은 어떻게 했나)
    • a 태그를 공용 컴포넌트로 만들어서 관리해야 하나?
      • 개발 중에 다른 개발자가 a태그를 직접 사용하는 경우 있을 것
      • 사용자가 DOM 요소를 직접 삽입하는 경우를 막지 못함

HTTP 보안 헤더 설정하기

• HTTP 보안 헤더란?
  • 브라우저가 랜더링하는 내용과 관련된 보안 취약점을 방지하기 위해 브라우저와 함께 작동하는 헤더
  • 웹사이트 보안의 기초

Strict-Transport-Security

• 모든 사이트가 HTTPS를 통해 접근해야 한다.
  • HTTP로 접근하는 경우, 모든 시도는 HTTPS로 변경되게 함

Strict-Transport-Security: max-age=<expire-time>; includeSubDomains

• max-age=<expire-time>: 브라우저가 설정을 기억해야 하는 시간, 초
  • 일반적으로 최소 1년 (31536000), https://hstspreload.org에 따르면 2년 권장
• includeSubDomains: 규칙을 하위 도메인에 적용

X-XSS-Protection

• 비표준 기술 / 사파리와 구형 브라우저 기능 | 값 | 내용 | | --- | --- | | X-XSS-Protection: 0 | XSS 필터링을 끈다 | | X-XSS-Protection: 1 | 기본값, XSS 필터링을 켜게 된다. 페이지 내부에서 공격 감지 시, XSS 코드를 제거한 안전한 페이지를 보여준다 | | X-XSS-Protection: 1; mode=block | 코드를 제거하는 것이 아니라 접근 자체를 막아버린다 | | X-XSS-Protection: 1; report= | 크로미움 기반 브라우저, 보고서를 uri로 전송 |

• 크로미움 기반 브라우저

  • 구글에서 개발하는 오픈소스 웹 브라우저
  • chrome(원조 맛집), edge, brave, arc, 웨일, 삼성 인터넷 등
    • Chromium 기반 브라우저들은 크롬 웹스토어에 있는 확장기능 중 몇 가지를 브라우저 기본 내장 기능으로 포함시킨 제품들이다

X-Frame-Options

• frame, iframe, embed, object 내부에서 랜더링을 허용할 것이냐
  • 외부에서 자신의 페이지를 iframe으로 삽입해 사용자의 정보를 탈취하는 것을 막음
• X-Frame-Options: deny, X-Frame-Options: SAMEORIGIN

Permissions-Policy

• 웹사이트에서 사용할 수 있는 / 없는 기능을 명시적으로 선언

  • 브라우저 기능: 카메라, GPS

• XSS 공격을 제한하기 위한 헤더

  Permissions-Policy: geolocation=() // 모든 geolocation 사용 막기
  Permissions-Policy: geolocation=(self "https://a.mysite.com" "https://b.mysite.com") // 자신과 몇 가지 페이지 허용
  Permissions-Policy: camera=*;
  
  
  Permissions-Policy: pricture-in-picture=(), geolocation=(self "https://a.mysite.com" "https://b.mysite.com"), camera=*;
  

X-Content-Type-Options

• Content-Type:: text/html, text/css => MIME

• 웹서버가 브라우저에 강제로 이 파일을 읽는 방식을 지정하는 헤더

  X-Content-Type-Options: nosniff
  

Referrer-Policy

• 오타는? RFC 첫번째 버전에서 생긴 오타임, (r 2개가 진짜)

  • rfc1945 - rfc? Request For Comments, 1969에 ARPANet을 공부하던 미국의 대학원생들이 기록하기 시작한 문서 - Request for Comments: 1 - 04/26/2024 현재, 9565개 문서

    The correct spelling is referrer. In the RFC's first version of the Hypertext Transfer Protocol (rfc1945), however, the wrong spelling, 'referer', crept in and was never corrected. Thus, in the official version, the spelling 'referer' is found. For this reason, the 'referer' spelling is still used by browsers today.

• origin: scheme, hostname, port의 조합

  • scheme: HTTPS 프로토콜
  • hostname: 호스트명
  • port: 443 포트

mysite.com 도메인과 출처 비교

| 출처 | 비교 결과 | 차이점 | | --------------------------- | ------------ | --------------------------------- | | https://fake.kr:443 | cross-origin | 도메인 | | https://www.mysite.com:443 | cross-origin | 서브 도메인 | | https://blog.mysite.com:443 | cross-origin | 서브 도메인 | | http://mysite.com:443 | cross-origin | scheme | | https://mysite.com:80 | cross-origin | port | | https://mysite.com:443 | same-origin | - | | https://mysite.com | same-origin | -, HTTPS 기본 포트인 443으로 간주 |

• Referrer-Policy 값
  • Referrer Policy

    strict-origin-when-cross-origin (default): 2020년 이후, 크롬, 파폭, 사파리에서 기본값 Send the origin, path, and querystring when performing a same-origin request. For cross-origin requests send the origin (only) when the protocol security level stays same (HTTPS→HTTPS). Don't send the Referer header to less secure destinations (HTTPS→HTTP).

• 응답 헤더 뿐만 아니라 meta 태그로도 설정할 수 있음

<meta name="referrer" content="origin" />

• 페이지 이동시나 이미지 요청, link 태그 등에도 다음과 같이 사용

<a href="http://mysite.com" referrerpolicy="origin">
  ...
</a>

Send only the origin in the Referer header. For example, a document at https://example.com/page.html will send the referrer https://example.com/.

• 명시적으로 선언 권고 => 만약 Referrer-Policy 값이 없다면?
  • 브라우저 마다 다른 기본값으로 작동 => 환경별 다른 결과
  • 기본값이 없는 구형 브라우저는? referer 정보가 유출될 수 도 있다.

CSP, Content-Security-Policy

• CSP는 XSS 공격이나, SQL Injection(데이터 삽입 공격)과 같은 다양한 보안 위협을 막기 위해 설계

-src

• src 제어

Content-Security-Policy: font-src <source>
Content-Security-Policy: font-src <source> <source>
Content-Security-Policy: font-src http://fonts.google.com/

• 사용할 수 있는 지시문 많음, www.w3.org/TR/CSP2/#directives
  • connect-src: 스크립트로 접근할 수 있는 URL 제한 >> 이걸로 URL 제한
• default-src로 한 번에 처리할 수 있음
  • *-src의 폴백 역할
• form-action
  • 폼으로 제출할 수 있는 URL을 제한하거나 막음

<meta http-equiv="Content-Sercurity-Policy" content="form-action 'none'">

보안 헤더 설정하기

Next.js

• 경로별로 보안 헤더를 적용할 수 있다.
  • next.config.js

const securityHeaders = [
  {
    key: "Content-Sercurity-Policy",
    value: ContentSercurityPolices.map((item) => `${item.key} ${item.value};`),join(' '),
  },
];

NGINX

• 경로별로 add_header 지시자를 사용해, 응답 헤더를 추가할 수 있음

보안 헤더 확인하기

• https://securityheaders.com/

OWASP Top 10

• Open Worldwide (Web) Application Sercurity Project
  • 오픈소스 웹 애플리케이션 보안 프로젝트
• 웹에서 발생할 수 있는 정보 노출, 악성 스크립트, 보안 취약점을 연구 / 주기적으로 10대 웹 애플리케이션 취약점을 공개

2021 - OWASP Top 10

1. Broken Access Control (▲4, Top 10에서 이전 대비 4단계 상승)

• todo: 접근 제어 정책(MAC, DAC, RBAC)과 인가 Authorization에 맞는 액세스 컨트롤

2. Cryptographic Failure (▲1)

• todo: HSTS를 사용하고, 암호문이 고정되지 않도록 하고, 신뢰할 수 있는 인증서 사용
  • HSTS는? HTTP Strict Transport Security, HTTP를 HTTPS로 강제로 리디렉션

3. Injection

• XSS, SQL, ORM // 사용자가 제공하는 데이터를 조작한 공격

4. Insecure Design

• 기획 설계 단계에서 발생한 보안 취약점

5. Security Misconfiguration (▲1)

• 보안 설정 오류, 마스터 계정의 비번 재설정 안하는 등

6. Vulnerable and Outdated Components (▲3)

• 취약점 or 지원 종료된 소프트웨어를 사용하는 경우에 발생
  • npm 패키지, OS, NGINX, 아파치, 프레임워크 등
• 불필요 소프트웨어는 사전에 제거, 보안 취약점을 점검하여 주기적 패치 업데이트

7. Identification and Authentication Failures

• (이전)Broke Authentication + Identification Failures
• 인증 관련 보안 취약점: 사용자의 신원 확인에 실패, 암호 생성 정책이 없는 경우, 무작위 대입, 인증 및 세션관리가 잘못되어 유출

8. Software and Data Integrity Failures

• 소프트웨어와 데이터 무결성 오류
  • 애플리케이션이 신뢰할 수 없는 소스, 저장소, CDN, 플러그인, 라이브러리에 의존
  • 잘못된 CI/CD 파이프라인을 사용

9. Security Logging and Monitoring Failures

• 적절한 로깅x, 로깅 정보 부족 => 사전에 공격을 감지하지 못하는 취약점
• 적절한 형식과 보관 주기로 로깅을 수행
  • 의심스러운 활동을 사전에 감시
  • 신속하게 대응할 수 있도록 준비

10. Server-Side Request Forgery (new!)

• 서버측 요청 변조, 공격자가 의도한 서버로 요청이 가게 하거나 위조된 요청을 보내는 취약점을 의미
• 프론트엔드 코드에서 서버사이드에 대한 적절한 보안 대책을 마련해야 한다

정리

• 버그가 보안 취약점으로 이어짐

사례A. log4js

• 2021년 12월, Log4Shell
• CVE, Common Vulnerability Exposure

  https://www.balbix.com/insights/what-is-a-cve/

• 짧막 상식
  • vulnerability: 인가받지 않은 사용자(공격자)가 침투해 데이터를 탈취, 삭제, 조작하거나 시스템에 접근할 수 있음
  • expose: 실수로 데이터 유출 혹은 인가받지 않은 사용자의 접근을 허용
• log4j 보안 이슈는 0-데이 취약점(0 Day Vulnerability)에 해당
  • 해커가 개발자보다 먼저 취약점을 발견 (언제 당했는 지 모름)
• 공격자 서버에서 코드를 받게 해서 실행하는 것 => RCE(Remote Code Execution)

사례B. 하트블리드

• 2014년, OpenSSL
• Buffer Overflow, 가변 길이 체크

사례C. ImageMagick

• 2023년 2월 6일
  • Denial of Service, 서비스 거부에 취약
    • https://nvd.nist.gov/vuln/detail/CVE-2022-44267
    • PNG 이미지를 구문 분석할 때(예: 크기 조정을 위해) 변환 프로세스는 stdin 입력을 기다리며 남겨질 수 있습니다
  • Information Disclosure, 정보 공개에 취약
    • https://nvd.nist.gov/vuln/detail/CVE-2022-44268
    • PNG 이미지를 구문 분석할 때(예: 크기 조정을 위해) 결과 이미지에 임의의 콘텐츠가 포함될 수 있습니다. 파일(magick 바이너리에 읽기 권한이 있는 경우)

---

보안 뉴스 사이트

• https://m.boannews.com/html/news.html?mtype=1&tab_type=1