Preventing specific browsers from logging in

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/
LVL 25
Lee SavidgeAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GaryCommented:
0
Ray PaseurCommented:
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.
0
Lee SavidgeAuthor Commented:
I don't want to write my own based on the user agent string. I intend to use jReject.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

leakim971PluritechnicianCommented:
Test page : http://jsfiddle.net/rsmbuLL1/1/

$(document).ready(function() {
    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;
    if(!isIE) {
        $("#LOGONBOX").hide();
    }
});

Open in new window

0
Lee SavidgeAuthor 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.
0
Lee SavidgeAuthor Commented:
Regarding http://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.
0
Ray PaseurCommented:
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

0
Lee SavidgeAuthor 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.
0
leakim971PluritechnicianCommented:
I don't see any error on IE8 : http://fiddle.jshell.net/rsmbuLL1/1/show/
...but jsfiddle have issue on IE8
0
Lee SavidgeAuthor 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.
0
leakim971PluritechnicianCommented:
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
0
Ray PaseurCommented:
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
0
GaryCommented:
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
0
Lee SavidgeAuthor 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.
0
Ray PaseurCommented:
This "worked" for me.  I put "worked" in quote marks because, even though the hide() and show() effects did what we wanted, the HTML markup is so bad as to be nearly useless.  That may have been what was wrong with earlier attempts to use Chrome.  I can't say for sure.  You might want to learn about the HTML5 doctype - it will save you a lot of headaches!

Please check the markup here:
http://validator.w3.org/check?uri=http%3A%2F%2Ficonoun.com%2Fdemo%2Ftemp_leesavidge_2.php&charset=%28detect+automatically%29&doctype=Inline&group=0

See the script in action here (open in all of your test browsers):
http://iconoun.com/demo/temp_leesavidge_2.php

Code that you're seeing is here (cf lines 62-78).  You can add other tests for other browser types.  And if you do that, I recommend that you add them one-at-a-time so that you can be sure each incremental change works.
<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 type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){
    $("#LogonScreen").hide();
    $("#LogonMessageWrongBrowser").hide();
    var ua = window.navigator.userAgent;
    var ux = ua.indexOf("Trident");
    if (ux > -1)
    {
        $("#LogonScreen").show();
    }
    else
    {
        $("#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

This jQuery code also tests out correctly, adding a test for "MSIE" as well as "Trident."
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){
    $("#LogonScreen").hide();
    $("#LogonMessageWrongBrowser").hide();
    var ua = window.navigator.userAgent;
    var ut = ua.indexOf("Trident")>0;
    var um = ua.indexOf("MSIE")>0;
    var ux = ut || um;
    if (ux)
    {
        $("#LogonScreen").show();
    }
    else
    {
        $("#LogonMessageWrongBrowser").show();
    }
});
</script>

Open in new window

Best of luck with your project, ~Ray
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Lee SavidgeAuthor 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
0
Lee SavidgeAuthor Commented:
Thanks guys. All great help and much appreciated.
0
Ray PaseurCommented:
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
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.