非HTTPS页面登录字段点击跳转HTTPS版login.php的JS实现方案问询

Absolutely, this is totally doable with vanilla JavaScript—no fancy libraries required, and it’ll play perfectly with your gradual HTTPS transition plan. Let’s walk through a reliable approach:

Core Idea #

We’ll listen for user interactions (clicks or keyboard focus) on sensitive login fields, check if we’re on an HTTP page, and immediately redirect to your HTTPS login.php if so. This keeps crawlers out of the redirect flow (protecting your indexing) while securing login attempts.

Implementation Code (Inline for Reliability) #

Add this snippet right before your closing </body> tag on HTTP pages (inline works best here to avoid issues with external script loading over HTTP):

// Wait for the page to fully load before targeting elements
document.addEventListener('DOMContentLoaded', function() {
  // Only run this logic if we're on an HTTP page
  if (window.location.protocol !== 'https:') {
    // Target password fields and fields with names starting with "lo" (e.g., "login", "username")
    const loginFields = document.querySelectorAll('input[type="password"], input[name^="lo"]');
    
    // Attach listeners to each target field
    loginFields.forEach(field => {
      // Cover both mouse clicks and keyboard tabbing into the field
      field.addEventListener('click', redirectToSecureLogin);
      field.addEventListener('focus', redirectToSecureLogin);
    });
  }

  function redirectToSecureLogin() {
    // Build the HTTPS login URL using your site's current host
    const secureLoginUrl = `https://${window.location.host}/login.php`;
    // Send the user to the secure login page
    window.location.href = secureLoginUrl;
  }
});

Key Tips for Your Transition #

• Crawler-Friendly: This redirect only triggers when a human user interacts with the field—Google’s crawlers won’t hit this, so your gradual reindexing plan stays on track.
• Covers All User Actions: Listening for both click and focus ensures users who tab into the password field (instead of clicking) are also redirected.
• Lightweight & Compatible: Vanilla JS works on all modern browsers, plus IE11 if you still need support.

Optional: Add User Feedback (For Clarity) #

If you want to let users know they’re being redirected to a secure page, tweak the redirect function like this:

function redirectToSecureLogin() {
  // Show a quick notice (add this div to your page first)
  const redirectNotice = document.getElementById('login-redirect-alert');
  if (redirectNotice) {
    redirectNotice.style.display = 'block';
    redirectNotice.textContent = 'Redirecting to our secure login page...';
  }

  // Redirect after a 1-second delay so users see the message
  setTimeout(() => {
    const secureLoginUrl = `https://${window.location.host}/login.php`;
    window.location.href = secureLoginUrl;
  }, 1000);
}

And add this HTML somewhere on your page:

<div id="login-redirect-alert" style="display: none; color: #28a745; margin: 10px 0; font-weight: bold;"></div>

This approach keeps your login flow secure while maintaining your careful HTTPS rollout without disrupting search indexing.

内容的提问来源于stack exchange，提问作者woostar