Ẩn URL trong JavaScript

Trong bài đăng này [Truy cập Báo cáo / Bảng điều khiển được tạo công khai bằng Helical Insight], chúng tôi đã chuyển chi tiết xác thực [tên người dùng và mật khẩu] trong URL cùng với thư mục và tên tệp. Trong bài đăng này, chúng tôi ẩn các chi tiết xác thực đó và chỉ chuyển thư mục và tên tệp tới URL

Chúng tôi sẽ viết một mã JavaScript đơn giản để hoàn thành công việc của chúng tôi

BƯỚC 1. Tạo một biến chứa baseURL của ứng dụng. Ví dụ

var baseURL = '//192.168.2.9:8085/hi-ee/hi.html';

BƯỚC 2. Tạo một biến chứa chi tiết tên người dùng và mật khẩu. Ví dụ

var credentials = 'j_username=userName&j_password=userPassword';

BƯỚC 3. Viết hàm JavaScript nhận giá trị tham số có trong URL

Mã số

function getParameterByName[name, url] {
    if [!url] url = window.location.href;
    name = name.replace[/[\[\]]/g, "\\$&"];
    var regex = new RegExp["[?&]" + name + "[=[[^&#]*]|&|#|$]"],
    results = regex.exec[url];
    if [!results] return null;
    if [!results[2]] return '';
    return decodeURIComponent[results[2].replace[/\+/g, " "]];
}

Trong hàm trên getParameterByName , chúng ta truyền hai đối số là.

1. name – tên của tham số được sử dụng trong URL. Người dùng cần cung cấp tham số muốn lấy từ URL
2. url – Hàm tự động lấy URL vị trí [URL của cửa sổ]. Vì vậy, người dùng không cần cung cấp URL cho chức năng

Thí dụ. Xem xét URL bên dưới

//192.168.2.9:8085/hi-ee/hi.html?dir=HelicalDemo&file=HelicalDemoFile.efw

Vì vậy, nếu chúng tôi cần lấy giá trị của tệp tham số từ URL, chúng tôi gọi hàm getParameterByName là.

getParameterByName['file'];

// Calling above function will return:
HelicalDemoFile.efw

BƯỚC 4. Tạo một biến chứa các biến được tạo trong BƯỚC 1 & 2. Ví dụ

var url = baseURL +"?"+ getParameterByName['dir'] + "?" + getParameterByName['file'] + "?" + credentials;

Biến url ở trên sẽ cung cấp URL cuối cùng là

//192.168.2.9:8085/hi-ee/hi.html?dir=HelicalDemo&file=HelicalDemoFile.efw&j_username=userName&j_password=userPassword

Chúng tôi cũng có thể thực hiện kiểm tra xác thực đối với các tham số mà chúng tôi nhận được trong biến url. Ví dụ

if[getParameterByName['file'] === "undefined" || getParameterByName['file'] === ""] {
    // Perform operation here [either redirect or you can show any error message]
}

Theo cách tương tự, chúng ta cũng có thể xác thực dir

Bây giờ nếu chúng tôi muốn mở báo cáo hoặc bảng điều khiển nằm trong ứng dụng nhưng muốn nó mở trong bất kỳ trang web nào, chúng tôi cần chuyển URL đã tạo ở trên vào khung nội tuyến. iframe lấy biến URL làm nguồn và mở URL được cung cấp như thể báo cáo hoặc trang tổng quan được mở trong trang web. Vì vậy, chúng ta cần một phần tử iframe. Chúng ta có thể tạo một phần tử iframe như hình bên dưới với sự trợ giúp của JavaScript

Để tất cả chúng cùng nhau

var baseURL = '//192.168.2.9:8085/hi-ee/hi.html';
var credentials = 'j_username=userName&j_password=userPassword';

function getParameterByName[name, url] {
    if [!url] url = window.location.href;
    name = name.replace[/[\[\]]/g, "\\$&"];
    var regex = new RegExp["[?&]" + name + "[=[[^&#]*]|&|#|$]"],
    results = regex.exec[url];
    if [!results] return null;
    if [!results[2]] return '';
    return decodeURIComponent[results[2].replace[/\+/g, " "]];
}

var url = baseURL +"?"+ getParameterByName['dir'] + "?" + getParameterByName['file'] + "?" + credentials;

var frameElement = document.createElement['iframe'];
frameElement.src = url; // variable created above
frameElement.style.height = "100%";
frameElement.style.width= "100%";
document.body.appendChild[frameElement];

Sao chép đoạn mã trên và lưu dưới dạng tệp JavaScript [Tệp JavaScript kết thúc bằng phần mở rộng. js]. Cung cấp bất kỳ tên nào bạn muốn và nếu bạn muốn tích hợp quy trình này vào một trang web, thì hãy giữ tệp này trong thư mục public_html nếu đó là WordPress. Nếu không, hãy giữ tệp JavaScript này để có thể truy cập bất cứ khi nào cần

Chúng ta cũng có thể đạt được điều tương tự trong PHP. Mã có thể được tải về từ đây. Tệp PHP & JS

Lưu tệp với phần mở rộng là. php trong thư mục public_html [nếu bạn muốn sử dụng mã PHP]. Chúng tôi có thể đặt bất kỳ tên nào cho tệp php. Ví dụ, tôi muốn lưu nó với tên hi. php. Bây giờ để mở báo cáo, URL mà chúng tôi phải cung cấp là

var credentials = 'j_username=userName&j_password=userPassword';

Trong URL trên, chúng tôi không chỉ ẩn chi tiết xác thực [tên người dùng và mật khẩu] mà chúng tôi còn thay đổi baseURL. Đó là nó

Làm cách nào để ẩn URL trong mã JavaScript?

Bạn có thể ẩn một URL?

Làm cách nào để ẩn các tham số trong URL trong JavaScript?