We help IT Professionals succeed at work.

Preventing specific browsers from logging in

459 Views
Last Modified: 2014-09-03
I reasonably proficient at javascript but I've never really ventured into using jQuery. Now I need to and I have a problem. I have a login screen. The bulk of it is generated code which I can't change but I can put stuff in the header and footer of the page. For reasons I'm not going into, I have to block everyone from logging in unless they're using IE. This is not my choice. I found jReject which seems to offer the functionality. The login screen clearly needs to run for any browser hence I thought jQuery would be a good choice.

I need to hide the div with ID of LOGONBOX if the browser isn't IE. HEre is the code so far, which, needless to say, doesn't work.

<html>
<head>
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="jquery.reject.js" type="text/javascript"></script>
</head>
<body>
<div align="center">
  <table width="95%" height="95%" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td align="center" valign="middle">
        <table width="600" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td height="1" colspan="3" style="background-color:#">
            </td>
            <td rowspan="3" width="1" style="background-color:#">
            </td>
          </tr>
          <tr>
		  <td height="100" width="43" style="background-color:#FFFFFF"></td>
		  <td height="100" width="372" style="background-image:url(#left2.jpg);background-position: top left"></td>
            <td height="100" width="185" style="background-image:url(#right1.jpg);background-position: top right"></td>
			</tr><tr><td width="43" height="300" align="left" bgcolor="#FFFFFF"></td><td width="372" height="300" align="left" bgcolor="#FFFFFF">
            <input type="hidden">
            <FORM AUTOCOMPLETE="off" name=lForm METHOD="POST" ACTION="/Secure/Logon.aspx"><BR>
            <DIV ID=LOGONBOX>
            <TABLE CLASS=IPan>
            <TR>
            <TD>User &nbsp; </TD><TD><input name="uid" value="" maxlength=50 size=20  style="width:200"></TD>
            </TR>
            <TR>
            <TD>Password</TD><TD><input type="password" CLASS="pedit" name="pword" value="" maxlength=20 size=20 style="width:200"></TD>
            </TR>
            <TR>
            <TD COLSPAN=2><input type=Submit value="Log On">
            </td>
            </tr>
            </TABLE></DIV></FORM>
            </td>
            <td height="300" width="185" style="background-image:url(#right2.jpg)"></td>
            </td>
          </tr>
          <tr>
		  <td width="1" rowspan="3" style="background-color:#">
            </td>
			<td height="1" colspan="3" style="background-color:#">
            </td>
          </tr>
        </table>
	  </td>
    </tr>
  </table>
</div>
</body>
<script>
$(document).ready(function()
{
  $("div.LOGONBOX").hide();
});
</script>
</html>

Open in new window


The jReject library I got from here http://jreject.turnwheel.com/
Comment
Watch Question

CERTIFIED EXPERT
Expert of the Year 2014
Top Expert 2014

Commented:
Most Valuable Expert 2011
Author of the Year 2014

Commented:
Generally speaking the "login" process involves a server-side script that validates the client credentials and sets a cookie on the browser.  The browser returns the cookie on subsequent accesses, and the presence of the cookie in the request tells the server that the client is logged in.  Since the server-side script would need to test the client's credentials, it seems to me that the server-side script is the place to identify the browser(s) and reject the ones that are not MSIE.  Note that you can set cookies in JavaScript, but they have a reputation for being a security risk, and so they are less reliable since they may be disabled by clients.
CERTIFIED EXPERT

Author

Commented:
I don't want to write my own based on the user agent string. I intend to use jReject.
leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
CERTIFIED EXPERT

Author

Commented:
The logon process is fixed. I cannot change it hence I am using jReject because I have limited access to the main logon screen code.

The login process is fixed to the application this is from.
CERTIFIED EXPERT

Author

Commented:
Regarding https://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/Q_28509774.html#a40298585

The script does work although it gives an error if you use IE8. This is one of the reasons I thought I'd try jReject as it covers all that for me.
Most Valuable Expert 2011
Author of the Year 2014

Commented:
See also: https://developer.mozilla.org/en-US/docs/Using_Web_Standards_in_your_Web_Pages/Developing_cross-browser_and_cross-platform_pages

Executive summary: This information is user-settable, and if your users choose to set these values, you cannot guarantee that you're only showing the site to IE clients.  But that aside, this seems to test out OK with "vanilla" browser settings.
http://iconoun.com/demo/temp_leesavidge.php

<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){
    $("#loginbox").hide();
    $("#iemessage").hide();
    var ua = window.navigator.userAgent;
    var ux = ua.indexOf("Trident");
    if (ux > -1)
    {
        $("#loginbox").show();
    }
    else
    {
        $("#iemessage").show();
    }
});
</script>

<title>HTML5 Page Responds to IE Only</title>
</head>
<body>

<div id="loginbox">THE LOGIN FORM GOES HERE</div>
<div id="iemessage">TO USE THIS SITE, PLEASE USE A MODERN VERSION OF INTERNET EXPLORER</div>

</body>
</html>

Open in new window

CERTIFIED EXPERT

Author

Commented:
Hi Ray,

That looks like it could do the job. I'm really not worried about the users being able to override the user agent string. The app is technically ok with running in any browser however the many extensions that have been added to it to do certain things via javascript have been centered around IE. This is a historical thing really as the app never used to be cross browser.

The problem is that the users on this particular site keep using Chrome which causes many of the extentions to be bypassed which causes problems for us. Stopping the user logging in will stop these problems. They know they're not supposed to use Chrome but the customer has no IT policies in place and the users pretty much do what they want which is a pain in the neck. Hence the need for this. The customer has requested a customisation that prevent the users from logging in unless they have IE.
leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
I don't see any error on IE8 : http://fiddle.jshell.net/rsmbuLL1/1/show/
...but jsfiddle have issue on IE8
CERTIFIED EXPERT

Author

Commented:
Almost there. It doesn't work in Chrome. Here is the code I have so far.

<html>
#Header
<head>
#Metadata

<style type="text/css">
<!--
.BlueText {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: ##ff0000;
}
.GreyText {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #999999;
	font-weight: bold;
}

.VersionInfo{
   font-family:Arial, Helvetica, sans-serif;
   color: black;
   font-weight:bold;
   font-size: 10px;
}


.InfoPanel{
        background: white;
        color: black;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-weight: normal;
        font-size: 12px;
}


.Logonbutton{
        background: url(#ImgURL/gif/logon.jpg) no-repeat bottom;
		border: #675C53;
        font-family: Tahoma, Arial;
        font-weight: bold;
        font-size: 11px;
        color: black;
        text-decoration: none;
        cursor: pointer;
}

.WrongBrowser{
        background: red;
        color: white;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-weight: bold;
        font-size: 12px;
        text-align: center;
}

-->
</style>
#Head
<script src="jQuery/jquery-1.7.1.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
	$("#LogonScreen").show();
	$("#LogonMessageWrongBrowser").hide();

    var ua = navigator.userAgent;
    var IEBeforev11 = ua.indexOf("MSIE")>0;
    var IEAtLeastv11 = /Trident\/.*rv:([0-9]{1,}[\.0-9]{0,})/.test(ua);
    var isIE = IEBeforev11 || IEAtLeastv11;
    var isChrome = ua.toLowerCase().indexOf('chrome') > -1;

    if(!isIE)
    {
      $("#LogonScreen").hide();
      $("#LogonMessageWrongBrowser").show();
    }
});
</script>

</head>

<body #BodyTag bgcolor="#E6E6E6">
<div align="center">
  <table width="95%" height="95%" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td align="center" valign="middle">
        <table width="600" border="0" cellspacing="0" cellpadding="0" class="VersionInfo">
          <tr>
            <td height="1" colspan="3" style="background-color:#">
            </td>
            <td rowspan="3" width="1" style="background-color:#">
            </td>
          </tr>
          <tr>
		  <td height="100" width="43" style="background-color:#FFFFFF"></td>
		  <td height="100" width="372" style="background-image:url(#ImgURL/gif/logon_left2.jpg);background-position: top left"></td>
            <td height="100" width="185" style="background-image:url(#ImgURL/gif/logon_right1.jpg);background-position: top right"></td>
			</tr><tr><td width="43" height="300" align="left" bgcolor="#FFFFFF"></td><td width="372" height="300" align="left" bgcolor="#FFFFFF">
            <input type="hidden">
            <DIV ID="LogonScreen">
<!-- The Form Object is generated code that I cannot alter-->
<FORM AUTOCOMPLETE="off" name=LForm METHOD="POST" ACTION="Secure/Logon.aspx"><BR><DIV ID=LOGONBUTTON><TABLE CLASS=InfoPanel ><TR><TD>User Name &nbsp; </TD><TD><input name="UID" value="admin" maxlength=50 size=20  style="width:155"></TD></TR><TR><TD>Password</TD><TD><input type="password" CLASS="EDIT" name="PASSWORD" value="" maxlength=20 size=20 style="width:155"></TD></TR><TR><TD><input type=hidden value='' name=CHANGEPASSWORDCLICKED>Change Password</TD><TD><input type=checkbox name=CHANGEPASSWORD maxlength=20 size=12 onClick="{this.form.CHANGEPASSWORDCLICKED.value='Y';document.LoginForm.submit();};"></TD></TR><SCRIPT>var LOGONBUTTON = document.getElementById("LOGONBUTTON");var msgint;function Msg(){clearInterval(msgint);LOGONBUTTON.innerHTML='<BR>The first logon may take a minute while the CRM server starts up.<BR>Please wait...<BR><BR><BR><BR><BR><BR>';}</SCRIPT><TR><TD COLSPAN=2> <tr><td rowspan="2" valign="bottom"> <div align="left"></div>  <div align="right"></div></td> <td class=Logonbutton width="142" height="22" onClick="msgint=setInterval(Msg,100);document.LoginForm.submit();" onMouseOver="window.status='Log On';return true;"  onMouseOut="window.status=window.defaultStatus;return true;"> <div align="center">Log On </div></td></tr></TD></TR>                  <DIV style="position:absolute;clip:rect(0 0 0 0)"><INPUT TYPE=SUBMIT ONCLICK="msgint=setInterval(Msg,100);"></DIV>
</TABLE></DIV></FORM>

            </DIV>
            <DIV ID="LogonMessageWrongBrowser" class="WrongBrowser"><BR>You must use  Explorer to login<BR><BR></DIV>
              #Version
            </td>
            <td height="300" width="185" style="background-image:url(#ImgURL/gif/logon_right2.jpg)"></td>
            </td>
          </tr>
          <tr>
		  <td width="1" rowspan="3" style="background-color:#">
            </td>
			<td height="1" colspan="3" style="background-color:#">
            </td>
          </tr>
        </table>
	  </td>
    </tr>
  </table>
</div>
</body>
</html>

Open in new window


Ignore the keywords like:

#Header
#Metadata
#Version

The application loads the HTML file and parses it and replaces those. The Form object is also hidden behind a #Form tag but I have pasted it in so you can see the problem.

In Firefox I get the error message as expected. In IE I get the login boxes as expected. In Chrome I get both. It is as if it has ignored the function ccall at the top.
leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
please try the last link provided, let me know if it don't work on Chrome (it's my main and first tes browser...)
it work fine on chrome

Here a list of IE userAgent :
http://www.useragentstring.com/pages/Internet%20Explorer/

There's no reason to use your plugin until you have to handle multiple logic by web browser IMHO
Most Valuable Expert 2011
Author of the Year 2014

Commented:
Did you try this in Chrome, Firefox, Safari, Opera, IE?  I think it shows the principles correctly.  Just a few clicks to test it :-)
http://iconoun.com/demo/temp_leesavidge.php
CERTIFIED EXPERT
Expert of the Year 2014
Top Expert 2014

Commented:
To backup leakim - NavigatorID.userAgent is all you need to use and test against - no need for a plugin or jquery, this is built into js
CERTIFIED EXPERT

Author

Commented:
Both suggestions work on their own but as soon as I move it into my page it stops working in Chrome. I posted what I have got that doesn't work.
Most Valuable Expert 2011
Author of the Year 2014
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
CERTIFIED EXPERT

Author

Commented:
Ray,

This code is generated. I have little control over what I can do with it which is a pain. I would rewrite it properly if I had the choice.

Anyway, much as I code wax lyrical about the faults in the existing generated stuff, your suggested changes worked perfectly so thanks for the effort and great help.

Lee
CERTIFIED EXPERT

Author

Commented:
Thanks guys. All great help and much appreciated.
Most Valuable Expert 2011
Author of the Year 2014

Commented:
Thanks for the points.  I think I would find whoever is generating that code and try to get them to move forward out of the last millennium!  Best regards, ~Ray
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.