HTML DOM Anchor password 속성이란?
HTML DOM의 Anchor password 속성은 href 속성 값 중 비밀번호(password) 부분을 설정하거나 반환하는 기능입니다. URL에서 비밀번호 부분은 사용자가 입력하는 값으로, 사용자명(username) 뒤에 위치하고 호스트명(hostname) 앞에 표시됩니다.
URL 구조는 다음과 같은 형태입니다.
https://username:password@www.demo.com
password 속성 설정 문법
password 속성 값을 설정하려면 아래와 같은 문법을 사용합니다.
anchorObj.password = password
password 속성 반환 문법
현재 설정된 password 값을 가져오려면 다음과 같이 작성합니다.
anchorObj.password
예제 코드
아래 예제를 통해 DOM Anchor password 속성을 실제로 구현해 보겠습니다. 버튼을 클릭하면 링크의 password, origin, hreflang 값을 화면에 출력합니다.
<!DOCTYPE html>
<html>
<body>
<h1>Company</h1>
<p><a id="mylink" hreflang="en" href="https://amit:mypwd123@www.abc.com">Products</a></p>
<h2 id="myid"></h2>
<button onclick="display()">비밀번호 표시</button>
<button onclick="display2()">Origin 표시</button>
<button onclick="display3()">hreflang 표시</button>
<script>
function display() {
var a = document.getElementById("mylink").password;
document.getElementById("myid").innerHTML = a;
}
function display2() {
var a = document.getElementById("mylink").origin;
document.getElementById("myid").innerHTML = a;
}
function display3() {
var a = document.getElementById("mylink").hreflang;
document.getElementById("myid").innerHTML = a;
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 'Company'라는 제목과 함께 'Products'라는 하이퍼링크가 표시됩니다.
여기서 '비밀번호 표시' 버튼을 클릭하면 href 속성에 포함된 비밀번호 부분인 mypwd123이 화면에 출력됩니다.
마찬가지로 'Origin 표시' 버튼을 클릭하면 origin(프로토콜 + 호스트명)이, 'hreflang 표시' 버튼을 클릭하면 해당 링크의 언어 코드가 각각 표시되는 것을 확인할 수 있습니다.
정리
HTML DOM의 Anchor password 속성은 URL에 인증 정보가 포함된 경우 그중 비밀번호 부분만 손쉽게 추출하거나 변경할 수 있는 유용한 기능입니다. 다만 실제 운영 환경에서는 URL에 비밀번호를 직접 노출하는 방식은 보안상 위험하므로, 학습 및 테스트 목적으로 활용하는 것이 좋습니다.