Html

개념/배경 Reverse Tabnabbing은 target="_blank"로 연 새 탭이 window.opener를 통해 기존 탭을 피싱 페이지로 바꾸는 기법을 말함 새 탭이 기존 탭에 대한 참조를 갖기 때문에 발생하며, 자바스크립트로 opener의 위치를 변경 가능함 예시 window.opener.location = 'https://cgn.example.com' 이 참조를 끊는 표준 방법은 링크에 rel=“noopener” 또는 rel=“noopener noreferrer"를 명시하는 것임 공격 시나리오 사용자가 cgm.example.com 접속 happy.example.com 링크 클릭 새 탭에서 happy.example.com 열림 → 스크립트가 기존 탭을 피싱 사이트로 이동시킴 window.opener.location='https://cgn.example.com' 기존 탭으로 돌아온 사용자는 세션 만료로 오인 후 자격증명 입력 피싱 페이지가 정보를 수집 후 원래 페이지로 리다이렉션 방어 전략 앵커 태그에 rel=“noopener” 최소 적용, 가능하면 rel=“noopener noreferrer” 적용 권장 noopener: 새 탭에서 window.opener가 null이 되어 기존 탭 제어 불가 noreferrer: 대부분 브라우저에서 opener 차단 + Referer 헤더 전송 차단 자바스크립트로 새 창을 열 경우 window.open(url, '_blank', 'noopener') 사용 고려 기존 코드 점검 시 target="_blank” 링크에 rel 값 누락 여부 정적 분석 또는 린트 규칙으로 검출 권장 주의 사항 일부 최신 브라우저는 target="_blank"에 대해 기본적으로 noopener를 적용하는 경향 있으나 브라우저·버전별 차이 존재, 명시적 rel 사용이 안전 noreferrer는 분석 도구에서 유입 경로 확인이 어려워질 수 있음, 트래픽 분석 요구가 있으면 noopener만 선택하는 운영 전략 고려 참고: noopener와 noreferrer noopener: 새 탭의 Window.opener를 제거하여 원탭 조작 방지 noreferrer: Referer 헤더 차단, 대부분 환경에서 opener 제거 동작 동반 마무리 target="_blank"는 편리하지만 기본 동작만으로는 탭 간 참조가 남아 공격면 존재 모든 외부 링크에 rel=“noopener” 또는 필요에 따라 rel=“noopener noreferrer"를 일관 적용하는 것이 가장 단순하고 효과적인 방어 전략임 ...

개요 HTML 문서를 구성하는 요소들을 카테고리별로 묶어 핵심 의미와 사용 시점을 빠르게 파악하는 참고서 시맨틱 마크업과 접근성, SEO에 직접적인 영향을 주는 요소 위주로 정리 전체 목록과 세부 제약은 MDN 문서를 최종 기준으로 확인 권장 메인 루트와 구획 루트 html: 문서 루트 요소, 모든 요소의 조상이어야 함 body: 문서 본문 루트, 문서 내 하나만 존재 문서 메타데이터 head: 기계가 읽는 문서 메타데이터 컨테이너 base: 문서 내 상대 URL의 기준 URL 지정, 문서당 하나만 허용 link: 외부 리소스와의 관계 선언, CSS 연결과 파비콘 등 meta: title, style 등으로 표현 불가한 메타데이터 표현 style: 문서 범위의 스타일 선언 title: 브라우저 탭에 표시되는 문서 제목, 텍스트만 허용 콘텐츠 구획 문서 구조와 내비게이션에 쓰이는 시맨틱 컨테이너 ...

개요 작은 규칙의 일관성이 유지보수성과 확장성을 만든다고 봄. 아래 세 가지 원칙은 팀 합의만 되면 즉시 적용 가능하며, 코드 리뷰와 리팩터링 부담을 낮추는 효과가 큼 className 네이밍은 하이픈 사용 권장 camelCase, under_score보다 하이픈(-) 기준 분절이 명확해 가독성과 편집성이 좋음. 대소문자 전환 없이 입력 가능해 타이핑 피로도도 낮음 에디터 단어 단위 이동/선택이 직관적. camelCase나 under_score는 하나의 토큰으로 취급되는 경우가 많아 커서 이동이 번거로움. 하이픈은 공백처럼 인식되어 단어 경계 이동이 쉬움. 예시로 sweetPotato, sweet_potato, sweet-potato 비교 추천 ...

개요 HTML5의 data-* 속성은 마크업에 보이지 않는 커스텀 데이터를 담기 위한 전역 속성 UI와 스크립트 사이 값 전달, 기능 감지 플래그, 간단한 지역화 메타데이터 등에 유용 DOM에서는 element.dataset으로 접근해 읽기/쓰기 가능 핵심 개념 속성명 규칙: data- 접두사 + 소문자 케밥케이스 사용 접근 규칙: data-foo-bar → dataset.fooBar 로 매핑 값 타입: 문자열 저장, 필요 시 직접 직렬화/파싱 처리 필요 보안 유의: 민감정보나 토큰 저장 금지, 노출 전제 데이터만 저장 표준 속성과 역할 혼동 금지, 의미적 데이터는 적절한 속성이나 요소 사용 권장 ...

개념/배경 Unobtrusive JavaScript는 HTML 구조와 JS 동작을 분리하는 접근 철학 HTML은 의미와 콘텐츠, CSS는 표현, JS는 상호작용과 상태 제어 담당 인라인 스크립트와 이벤트 속성 제거, 외부 스크립트에서 안전하게 바인딩하는 방식 지향 핵심 목표는 접근성 보장, 점진적 향상, 유지보수성과 테스트 용이성 개선, 캐시 효율 상승, 보안 취약점 노출 감소 핵심 원칙 HTML은 의미 중심 마크업 유지 CSS는 표현만 담당 JS는 DOMContentLoaded 이후 동작 주입 인라인 onclick 등 이벤트 속성 사용 금지 기능 감지 우선, UA 스니핑 지양 데이터 훅은 data-* 속성 사용, 스타일 훅과 분리 JS 미동작 상황에서도 기본 기능 유지, 점진적 향상 고려 모듈 분리와 의존성 최소화 동작 방식 마크업은 링크와 폼이 기본 동작을 스스로 제공하도록 설계 JS는 존재하면 기본 동작을 확장하거나 향상 이벤트 바인딩은 외부 스크립트에서 선택자 기반으로 수행, 인라인 스크립트 제거 ...

개요 링크를 새 탭에서 열 때 a 태그에 target="_blank"를 많이 사용함 이 경우 window.opener로 원본 페이지에 접근 가능한 취약점과 리소스 간섭 이슈가 발생할 수 있음 rel=“noopener noreferrer"를 함께 지정해 리버스 태브내빙(reverse tabnabbing) 방지와 리퍼러 차단을 적용하는 것이 권장됨 핵심 개념 target: 링크 대상 브라우징 컨텍스트 지정 window.opener: 새 탭에서 원본 창을 참조하는 브라우저 객체 rel=noopener: 새 탭에서 window.opener를 끊어 원본 페이지 접근 불가로 만듦, 리버스 태브내빙 방지 rel=noreferrer: 새 탭으로 이동 시 Referer 헤더 전송 차단, 원본 페이지 URL 비공개 target 값 정리 _self: 현재 탭에서 열기, 기본값이라 명시 생략 가능 _blank: 새 탭에서 열기 target="_blank"만 사용할 때의 문제 보안 취약점 발생 가능 악성 페이지가 window.opener를 통해 부모 창의 location을 임의 변경하여 피싱 페이지로 리디렉션하는 리버스 태브내빙 위험 존재 원본 페이지의 데이터 접근 시도 등 추가 피해 가능성 있음 성능 간섭 가능성 새 탭이 원본과 같은 브라우징 컨텍스트 그룹에서 실행될 수 있어 이벤트 루프나 리소스 경쟁으로 지연이 커질 수 있음 무거운 스크립트가 열린 탭 간에 체감 성능 저하를 유발할 수 있음 해결책 rel=“noopener” 새 탭의 window.opener를 null로 만들어 원본 페이지 참조 차단 탭 간 연결이 끊겨 보안 위험과 리소스 간섭 완화 rel=“noreferrer” 이동 시 Referer 헤더를 제거해 원본 URL과 경로 노출 방지 분석이나 리퍼러 기반 측정이 필요한 경우에는 생략을 고려 사용 예시 필수 최소 속성만 명시 ...