Cách đặt trang xác thực đăng nhập bằng HTML hoặc JAVASCRIPT

-1

chỉ thử mã này -

function validate(){ 
 
var username = document.getElementById("username").value; 
 
var password = document.getElementById("password").value; 
 
if (username == "username1" && password == "password1"){ 
 
alert ("Login successfully"); 
 
    } 
 
    else{ 
 
    alert("Invalid username or password"); 
 
    } 
 
    return false; 
 
    }

<html> 
 
<head> 
 
<title>Javascript Login Form Validation</title> 
 
<!-- Include JS File Here --> 
 
<script src="js/login.js"></script> 
 
</head> 
 
<body> 
 
<div class="container"> 
 
<form id="form_id" method="post" name="myform"> 
 
<label>User Name :</label> 
 
<input type="text" name="username" id="username"/> 
 
<label>Password :</label> 
 
<input type="password" name="password" id="password"/> 
 
<input type="button" value="Login" id="submit" onclick="validate()"/> 
 
</form> 
 
</div> 
 
</body> 
 
</html>

Nguồn

2016-01-30 10:03:51

+0

vui lòng cung cấp mô tả sự cố thích hợp – arch

+1

Tôi nghĩ bạn đã không nhận được câu hỏi của tôi. Nếu ai đó xem nguồn trang, anh ấy có thể dễ dàng kiểm tra tên người dùng và mật khẩu nào. Tôi không muốn vị vua này của trang – user007

+0

Chỉ cần đặt tập lệnh java trong một tệp javascript mới có tên là login.js và sau đó khi nào chức năng vaidate được gọi là các giá trị được gửi đến tập lệnh java. sau đó tập lệnh java không được hiển thị trong mã nguồn –

0

<html> 
 
<head> 
 

 
<title>Login paget</title> 
 
</head> 
 
<script type="text/javascript"> 
 
function display(form){ 
 
if (form.username.value=="root") { 
 
\t \t if (form.password.value=="root") {    
 
\t \t \t \t \t \t \t \t \t \t location="page2.html" 
 
\t \t \t \t \t \t \t \t \t \t \t } else { 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t alert("Invalid Password") 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t \t \t } else { alert("Invalid Username") 
 
\t \t \t \t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t } 
 
\t \t \t </script> \t \t \t 
 
<body > 
 

 
<form > 
 
<input type="text" name="username" /><br><br> 
 
<input type="password" name="password"/><br><br> 
 
<input type="button" value="Login" onClick="display(this.form)"/> 
 

 
</form> 
 

 
</body> 
 
</html>

Xin chào Tôi đã tạo ra một trang đăng nhập cho bạn sử dụng html và javascript. Tên người dùng và mật khẩu là root. Bạn thấy nếu bạn nhập tên đăng nhập và mật khẩu đúng thì trang hướng đến page2.html và điều này sẽ cho bạn thấy

Trang web này không được tìm thấy

ERR_FILE_NOT_FOUND

vì vậy những gì bạn phải thay thế page2.html bằng tên trang tiếp theo của bạn.

Nguồn

2016-01-30 10:13:04

+0

Tôi nghĩ bạn đã không nhận được câu hỏi của tôi. Nếu ai đó xem nguồn trang, anh ấy có thể dễ dàng kiểm tra tên người dùng và mật khẩu nào. Tôi không muốn vị vua này của trang – user007

+0

ohh yes !! bạn có thể tách ra mã javascript đó và tạo một tệp tin.js riêng biệt và có thể tham chiếu tệp js đó trong mã html của html. –

3

HTML và Javascript được diễn giải trên client side. Đối với mục đích đăng nhập, đó là mã phía máy chủ thường được sử dụng để xác minh thông tin xác thực - đơn giản vì thực tế bạn đã biết - với việc triển khai phía máy khách đơn giản, bạn có thể thấy thông tin xác thực trong mã nguồn, phía máy chủ cũng dễ dàng hơn để làm việc với, một khi bạn hiểu nó, nó là linh hoạt hơn để phát triển hơn nữa, nó là an toàn hơn, và nó thực sự được sử dụng ở khắp mọi nơi cho nhiệm vụ này.

Bạn nên sử dụng PHP, ASP, Ruby (hoặc bất kỳ ngôn ngữ server side nào khác) cho việc này. Nếu bạn không muốn điều đó, bạn cần làm cho người dùng khó đọc thông tin đăng nhập từ mã nguồn.

Để thực hiện điều đó, bạn có thể sử dụng các phương pháp khác nhau như mật mã hoặc obfuscation. Mật mã là rất khuyến khích hơn obfuscating vì nó provably thêm bảo mật hơn cho ứng dụng của bạn. Obfuscating về cơ bản có nghĩa là bạn thay đổi mã nguồn theo cách mà nó khó đọc - bạn thêm các chức năng mã hóa các chuỗi, để "mật khẩu" của bạn không thể được phát hiện ngay từ cái nhìn đầu tiên. Tuy nhiên, obfuscation luôn luôn có thể được bỏ qua, và thường khá dễ dàng với một công cụ gỡ lỗi tốt.

Vì vậy, chúng ta hãy đi với mật mã. Những gì bạn đang tìm kiếm ở đây đang sử dụng one way hash functions. Bạn có nhiều lựa chọn - MD5, SHA1, SHA256, ... mỗi loại cung cấp mức bảo mật khác nhau. SHA256 implementation in Javascript là ví dụ bạn có thể sử dụng. Có rất nhiều thư viện và ví dụ khác cho việc này, vì vậy, chỉ cần sử dụng Google và tìm một ví dụ mà bạn thích.

Bây giờ, phải làm gì với ứng dụng này? Giả sử bạn có hàm sha256() chấp nhận một chuỗi và trả về giá trị băm của nó dưới dạng một chuỗi.Đối với mỗi người dùng và mật khẩu bạn có, bạn đặt trước mã băm SHA256 của chuỗi "user + password".

Giả sử bạn muốn tên người dùng của mình là "Pedro" và mật khẩu cho tài khoản này là "MyPassword".

Bạn đặt trước mã băm của "PedroMyPassword" - ví dụ: với with online hashing tool. Bạn có thể thấy hàm băm SHA256 của nó là

40be6e939eedf018b2b846e027067dcb006585a2155ce324f1f2a6a71d418b21

Mã băm này là những gì bạn đưa vào mã Javascript của mình.

Khi người dùng nhập người dùng và mật khẩu của họ, bạn gọi hàm sha256 của bạn trên "tên người dùng + mật khẩu" và bạn so sánh nó với hàm băm được đặt trước của bạn.

Lưu ý rằng bạn phải chọn mật khẩu thực sự mạnh, nếu không các cuộc tấn công nhất định (như tấn công từ điển) sẽ dễ sử dụng để bẻ khóa băm của bạn.

Vấn đề hiện tại là bạn không chỉ định, bạn muốn làm gì tiếp theo. Ví dụ: bạn có thể muốn chuyển hướng người dùng đã được xác thực đến trang tiếp theo, nhưng ở đây bạn lại gặp phải vấn đề tương tự - nếu bạn chuyển hướng trong Javascript sang "secondpage.html" trong mã của mình, ai đó có thể bỏ qua xác thực và điều hướng đến thứ hai này trang trực tiếp.

Những gì bạn có thể làm trong trường hợp này là bạn đặt tên cho trang thứ hai của bạn như

40be6e939eedf018b2b846e027067dcb006585a2155ce324f1f2a6a71d418b21.html

ví dụ: các hash của người dùng của bạn + đường chuyền chuỗi. Trong biến thể này, bạn không đặt hàm băm trong mã. Máy chủ web sẽ chỉ trả về lỗi 404 cho tất cả người dùng không xác thực được. Ví dụ, nếu ai đó cố gắng sử dụng "Pedro" với "123456" là mật khẩu, SHA256 sẽ

3bac31720fdd4619ebe2e8865ccc0dc87eb744f3f05f08c628bb9217a77e4517

và nếu bạn chuyển hướng họ đến

3bac31720fdd4619ebe2e8865ccc0dc87eb744f3f05f08c628bb9217a77e4517.html

nó đã giành không tồn tại, vì tệp trang thứ hai của bạn được gọi là

40be6e939eedf018b2b846e027067dcb006585a2155ce324f1f2a6a71d418b21.html

Bạn sẽ cần phải tạo các trang thứ hai này cho mỗi kết hợp người dùng/vượt qua. Sau đó bạn có thể đặt một mã chuyển hướng đơn giản vào trang thứ hai thực sự.

Nhưng chắc chắn rằng bạn đang sử dụng giao thức HTTPS, nếu không, các trang thứ hai sẽ đi qua các dây không được mã hóa ...

này tất cả sẽ làm việc, nhưng vẫn còn, tôi đánh giá cao đề nghị, bạn xem xét các cách phía máy chủ.

Nguồn

2016-01-30 10:33:07 Wapac

+0

Cảm ơn thông tin tốt này. Đây là những gì tôi muốn. Bạn có thể vui lòng giải thích cách phía máy chủ cũng hoặc chỉ cho tôi một số liên kết hữu ích.? – user007

+0

Phía máy chủ là những gì được sử dụng ở khắp mọi nơi. Một khi bạn hiểu nó, nó dễ dàng hơn, an toàn hơn, linh hoạt hơn nhiều cho sự phát triển trong tương lai và chỉ là thứ để sử dụng. Đối với phía máy chủ, nó phụ thuộc vào công nghệ bạn có thể sử dụng trên máy chủ của bạn. Nếu bạn tự mình lưu trữ, bạn có thể chọn trong số tất cả các công nghệ khác nhau (ASP, PHP, Ruby, NodeJs, ...). Nhưng nếu bạn đang lưu trữ bên thứ ba, bạn thường bị giới hạn. Các máy chủ chi phí thấp nhất thường chạy trên hệ điều hành Linux và cung cấp PHP. Có rất nhiều tài nguyên trên Internet cho điều này - ví dụ: http://www.phpeasystep.com/phptu/6.html là một mẫu PHP + MySQL đơn giản. – Wapac

+0

Nếu bạn không muốn sử dụng cơ sở dữ liệu, nó là OK, bạn chỉ có thể sửa đổi mẫu đó để cắt mã DB. Ngoài ra còn có nhiều câu hỏi SO ở đây về chủ đề đó, vì vậy hãy tìm kiếm "biểu mẫu đăng nhập PHP đơn giản" của bạn. Hoặc bạn có thể thử cái này http://www.tutorialspoint.com/php/php_login_example.htm, rất nhiều tùy chọn ở đây. Bạn chỉ cần xác định công nghệ phía máy chủ mà bạn có thể và muốn sử dụng và sau đó tìm hiểu những điều cơ bản của nó. – Wapac

1

Trong câu trả lời trước đây của tôi, tôi đã sử dụng các công nghệ phía máy khách, tại sao tên người dùng và mật khẩu không an toàn và bị ẩn nếu chúng tôi kiểm tra nguồn trang.

Bây giờ, chúng ta sẽ sử dụng công nghệ phía máy chủ, cho điều này bạn cần gói web-server như WAMP, XAMPP vv

Tải về và cài đặt một trong những gói này. (Nếu bạn có một trong hai người này, sau đó nó tốt và tốt)

Tôi đang sử dụng XAMPP vì vậy tôi sẽ giải thích với XAMPP.

Nếu bạn đã tải xuống thành công XAMPP, rồi tìm thư mục htdocs trong thư mục XAMPP. Mỏ là "C: \ xampp \ htdocs"

sao chép mã bên dưới và tạo tập tin php mới Lưu tập tin này dưới dạng login.php trong htdocs thư mục.

Đây là mã php.

<?php 
 
$usr="root"; 
 
$pwd="root"; 
 

 
if(isset($_POST['username']) && !empty($_POST['username']) && isset($_POST['password']) && !empty($_POST['password'])){ 
 

 
$username=$_POST['username']; 
 
$password=$_POST['password']; 
 

 
    
 
\t \t \t if(($username==$usr) && ($password==$pwd)){ 
 

 
\t \t \t \t \t \t \t \t echo '<br>login successfull'; 
 

 
\t \t \t \t }else{ 
 

 
\t \t \t \t \t \t \t echo '<br>login unsuccessfull'; 
 
\t \t \t \t \t \t \t } 
 
\t }else{ 
 
\t \t \t echo "<br>Connot be left empty!"; 
 
\t \t \t } 
 
?>

ok !! Bây giờ Tạo một HTML trang chứa mẫu đăng nhập đơn giản và tiết kiệm này như login.html

Đây là HTML code

<html> 
 
<head> 
 

 
<title>Login</title> 
 
</head> 
 

 
<body> 
 

 
<form action="login.php" method="POST" align="center"> 
 
<br> 
 
Username:<input type="text" name="username"><br><br><br> 
 
Password :<input type="text" name="password"><br><br> 
 

 
<input type="Submit" value="Submit"> 
 

 
</form> 
 
</body> 
 
</html>

Bây giờ, Chuyển browser-> Gõ http://localhost/login.html và chạy Chèn Tên người dùng và mật khẩu là root.

Tôi giả sử bạn có kiến thức cơ bản của php, nếu không đi qua nó, nó là rất dễ dàng và cũng đọc về HTTP yêu cầu

GET
POST

Nguồn

2016-01-30 12:38:54

0

Bạn có thể' t thực sự có một hệ thống xác thực an toàn chỉ sử dụng JavaScript và HTML.

Tôi sẽ đề xuất Basic HTTP authentication trên máy chủ của bạn thay vì bảo mật hơn (không hoàn hảo bằng bất kỳ phương tiện nào, nhưng ít nhất sử dụng phương pháp kiểm soát truy cập phía máy chủ chuẩn).

Nếu bạn phải triển khai một cái gì đó trong JavaScript, bạn có thể thực hiện một lược đồ chỉ mật khẩu dựa trên tên của một thư mục ẩn. Một cái gì đó như sau (lưu ý đây là chưa được kiểm tra như vậy sẽ cần một số tinh chỉnh):

(Mã mượn và chuyển thể từ this question)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script> 
    $(function() { 
     var url = "some_url"; 
     $.ajax(url, 
     { 
     if (statusCode == 200) { 
      document.location.href = url; 
     } 
     else { 
      alert('Incorrect password') 
     } 
     } 
    }); 
}); 
</script> 

<input type="password" /><a href="javascript:void(0)">Login</a>

Mã nên được hoàn thành do đó hàm được gọi khi nút là đã nhấp. Vì vậy, nếu mật khẩu là foo, bạn đặt một thư mục trên trang web của mình có tên là foo và nếu JavaScript JQuery phát hiện thấy mật khẩu đã nhập khớp với tên thư mục (ví dụ: /foo/) thì người dùng sẽ được chuyển hướng đến đó. Do đó, bạn sẽ tạo một /foo/index.html để quản lý phiên đăng nhập của người dùng.

Lưu ý rằng đây là điều an toàn nhất bạn có thể làm với JavaScript và HTML một mình và nó bị lỗ hổng sau đây.

Yêu cầu URL phải được giữ bí mật, mặc dù điều này có thể bị rò rỉ bởi tiêu đề người giới thiệu, theo lịch sử trình duyệt và nhật ký máy chủ/proxy.
Khi người dùng đã đăng nhập, họ luôn đăng nhập (họ có thể đánh dấu trang đã đăng nhập)
Không có cách nào dễ dàng để thu hồi mật khẩu.
Chỉ có một mật khẩu.
Bất kỳ ai có quyền truy cập để xem tệp trên máy chủ đều có thể xem cấu trúc thư mục và tìm hiểu mật khẩu.
URL có thể bị công cụ phân tích rò rỉ.
Giả định duyệt thư mục trên máy chủ của bạn bị tắt (hoặc có trang mặc định trong thư mục chính của trang riêng tư).

Trong mọi trường hợp, luôn bảo vệ máy chủ của bạn bằng TLS/SSL. Đề xuất của tôi là tạo đúng hệ thống xác thực người dùng bằng cách sử dụng lời khuyên từ OWASP. Ở trên chỉ hiển thị những gì có thể đạt được trong HTML cơ bản (không nhiều). Tuy nhiên, nó tốt hơn là để lộ mật khẩu trong các tệp phía máy khách.

Nguồn

2016-02-01 11:09:43 SilverlightFox

Cách đặt trang xác thực đăng nhập bằng HTML hoặc JAVASCRIPT

Trả lời

Các vấn đề liên quan