Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM Anchor password Property
The HTML DOM Anchor password property sets or returns the password portion of an anchor element's href attribute value. This property is part of the URL structure that includes user credentials in the format https://username:password@hostname.com.
Syntax
To set the password property −
anchorObject.password = "newPassword"
To return the password property −
anchorObject.password
Return Value
The password property returns a string representing the password part of the URL. If no password is specified in the href attribute, it returns an empty string.
Example − Getting Anchor Password
Following example demonstrates how to retrieve the password from an anchor element's href attribute −
<!DOCTYPE html>
<html>
<head>
<title>Anchor Password Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Company Website</h2>
<p><a id="myLink" href="https://john:secret123@www.example.com/products">Products Page</a></p>
<button onclick="displayPassword()">Display Password</button>
<button onclick="displayOrigin()">Display Origin</button>
<button onclick="displayUsername()">Display Username</button>
<h3 id="result">Click a button to see the result</h3>
<script>
function displayPassword() {
var anchor = document.getElementById("myLink");
var password = anchor.password;
document.getElementById("result").innerHTML = "Password: " + password;
}
function displayOrigin() {
var anchor = document.getElementById("myLink");
var origin = anchor.origin;
document.getElementById("result").innerHTML = "Origin: " + origin;
}
function displayUsername() {
var anchor = document.getElementById("myLink");
var username = anchor.username;
document.getElementById("result").innerHTML = "Username: " + username;
}
</script>
</body>
</html>
The output shows the anchor link and buttons to display different URL components −
Company Website Products Page (link) [Display Password] [Display Origin] [Display Username] Click a button to see the result (After clicking "Display Password": Password: secret123) (After clicking "Display Origin": Origin: https://www.example.com) (After clicking "Display Username": Username: john)
Example − Setting Anchor Password
Following example shows how to set the password property dynamically −
<!DOCTYPE html>
<html>
<head>
<title>Setting Anchor Password</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Dynamic Password Setting</h2>
<p><a id="dynamicLink" href="https://user@www.test.com">Test Link</a></p>
<input type="text" id="passwordInput" placeholder="Enter new password" value="newPass456">
<button onclick="setPassword()">Set Password</button>
<button onclick="showFullURL()">Show Full URL</button>
<p id="urlDisplay">Original URL: https://user@www.test.com</p>
<script>
function setPassword() {
var anchor = document.getElementById("dynamicLink");
var newPassword = document.getElementById("passwordInput").value;
anchor.password = newPassword;
document.getElementById("urlDisplay").innerHTML = "Password set to: " + newPassword;
}
function showFullURL() {
var anchor = document.getElementById("dynamicLink");
var fullURL = anchor.href;
document.getElementById("urlDisplay").innerHTML = "Full URL: " + fullURL;
}
</script>
</body>
</html>
This example allows you to set a new password and see how it affects the complete URL structure −
Dynamic Password Setting Test Link (link) [newPass456] [Set Password] [Show Full URL] Original URL: https://user@www.test.com (After clicking "Set Password": Password set to: newPass456) (After clicking "Show Full URL": Full URL: https://user:newPass456@www.test.com)
Key Points
-
The password property only works when the href attribute contains user credentials in the URL.
-
When setting a password, the browser automatically updates the href attribute to include the new password.
-
If the original URL doesn't contain a username, setting a password may not work as expected.
-
The password is visible in plain text and should not be used for actual authentication in production applications.
-
Modern web applications typically avoid embedding passwords in URLs for security reasons.
Browser Compatibility
The password property is supported in all major browsers that support the HTML DOM anchor object, including Chrome, Firefox, Safari, and Edge. However, embedding passwords in URLs is discouraged for security reasons in modern web development.
Conclusion
The HTML DOM Anchor password property provides access to the password portion of a URL with embedded credentials. While functional, embedding passwords in URLs is a security risk and should be avoided in production applications. Use secure authentication methods instead of URL-based credentials.
166 Views
