jQuery Mobile — target="_blank" 새 창 링크 완전 정리

 

 

Web Development · jQuery Mobile

jQuery Mobile —
target="_blank" 새 창에서 외부 링크 열기

앱 안에서 외부 사이트로 안전하게 분리해서 이동하기

시작 오늘 분석할 코드

page3에서 다른 jQM 페이지(page1)로 가는 일반 링크와, 외부 사이트(네이버 모바일)를 새 창으로 여는 target="_blank" 링크를 같이 보여준다.

<div data-role="page" id="page3"> <div data-role="header"><h1>세번째 페이지</h1></div> <div data-role="content"> <a href="page1-ex-link.html">페이지1</a> <a href="http://m.naver.com/index.html" target="_blank">네이버페이지1</a> </div> </div>

용어 용어 정리

target링크 클릭 시 페이지가 열리는 위치

_blank새 탭/창에서 열기

_self (기본)현재 창에서 열기

_parent / _topiframe 환경에서 부모/최상위 창

noopener_blank와 함께 — 보안 기본 짝꿍

---

1 target 속성의 4가지 기본값

값	동작
_self (기본)	같은 창에서 열기
_blank	새 탭/창에서 열기
_parent	iframe의 부모 창에서
_top	iframe의 최상위(최외곽) 창에서
이름 (예: myframe)	해당 이름의 frame/window에 열기

---

2 _blank의 보안 위험과 noopener

target="_blank"으로 열린 새 창은 JavaScript로 부모 창에 접근할 수 있다. 신뢰할 수 없는 외부 사이트로 가는 경우 부모 창이 피싱되는 보안 사고가 가능.

※ 외부 사이트 링크에는 항상 rel="noopener noreferrer"를 함께 붙이는 게 표준 보안 실무. 최신 브라우저는 자동 적용하지만 명시적 표기가 권장.

/* 권장 패턴 */ <a href="https://external.com" target="_blank" rel="noopener noreferrer">외부 링크</a>

---

3 jQM에서 _blank의 의미

jQM은 일반적으로 모든 링크를 ajax로 처리하려 하지만, target="_blank"는 자동으로 외부 링크로 인식해 ajax를 적용하지 않는다. rel="external"이나 data-ajax="false"를 굳이 붙일 필요 없음.

---

4 모바일에서 _blank의 UX

데스크톱

새 탭이 열림 → 사용자가 자유롭게 이동

모바일 브라우저

새 탭 또는 PWA 외부 브라우저로 → 앱 컨텍스트 분리

※ 모바일에서는 _blank가 "앱 안에 갇히지 않게" 외부 브라우저로 분리해 주는 효과도 있다. PWA에서 특히 유용.

반응형

---

5 자주 하는 실수

실수	증상	해결
외부 링크 _blank만 붙이고 noopener 누락	보안 위험	rel="noopener noreferrer" 추가
내부 링크에도 _blank 남발	탭 폭증으로 UX 나쁨	내부는 _self, 외부만 _blank
모바일에서 _blank 동작 다름	의도와 다른 동작	모바일 테스트 필수

---

핵심 한 줄 요약

target="_blank"새 탭/창에서 열기

_self (기본)같은 창

보안_blank + rel="noopener noreferrer" 짝꿍

jQM_blank는 자동 외부 링크 처리 — 추가 속성 불필요

모바일앱과 외부 브라우저 분리 효과

Tags

#target-blank #target-self #새창링크 #새탭 #noopener #noreferrer #jQueryMobile #보안 #tabnabbing #jQM #외부링크 #모바일웹 #jQuery #웹표준 #웹개발 #HTML #티스토리

▼ 티스토리 태그 입력란 복사용

target-blank, target-self, 새창링크, 새탭, noopener, noreferrer, jQueryMobile, 보안, tabnabbing, jQM, 외부링크, 모바일웹, jQuery, 웹표준, 웹개발, HTML, 티스토리