[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Preventing specific browsers from logging in

Posted on 2014-09-02
18
Medium Priority
?
347 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/
0
Comment
Question by:Lee Savidge
  • 8
  • 5
  • 3
  • +1
18 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 40298571
0
 
LVL 111

Expert Comment

by:Ray Paseur
ID: 40298580
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
 
LVL 25

Author Comment

by:Lee Savidge
ID: 40298583
I don't want to write my own based on the user agent string. I intend to use jReject.
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 83

Assisted Solution

by:leakim971
leakim971 earned 400 total points
ID: 40298585
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
 
LVL 25

Author Comment

by:Lee Savidge
ID: 40298588
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
 
LVL 25

Author Comment

by:Lee Savidge
ID: 40298622
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
 
LVL 111

Expert Comment

by:Ray Paseur
ID: 40298646
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
 
LVL 25

Author Comment

by:Lee Savidge
ID: 40298716
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
 
LVL 83

Expert Comment

by:leakim971
ID: 40298729
I don't see any error on IE8 : http://fiddle.jshell.net/rsmbuLL1/1/show/
...but jsfiddle have issue on IE8
0
 
LVL 25

Author Comment

by:Lee Savidge
ID: 40298883
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
 
LVL 83

Expert Comment

by:leakim971
ID: 40298946
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
 
LVL 111

Expert Comment

by:Ray Paseur
ID: 40298986
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
 
LVL 58

Expert Comment

by:Gary
ID: 40298993
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
 
LVL 25

Author Comment

by:Lee Savidge
ID: 40300326
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
 
LVL 111

Accepted Solution

by:
Ray Paseur earned 1600 total points
ID: 40300411
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
 
LVL 25

Author Comment

by:Lee Savidge
ID: 40300467
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
 
LVL 25

Author Closing Comment

by:Lee Savidge
ID: 40300469
Thanks guys. All great help and much appreciated.
0
 
LVL 111

Expert Comment

by:Ray Paseur
ID: 40300533
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

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

A quick Powershell script I wrote to find old program installations and check versions of a specific file across the network.
The Windows functions GetTickCount and timeGetTime retrieve the number of milliseconds since the system was started. However, the value is stored in a DWORD, which means that it wraps around to zero every 49.7 days. This article shows how to solve t…
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month18 days, 6 hours left to enroll

829 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question