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.
The jReject library I got from here http://jreject.turnwheel.com/
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 </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>The jReject library I got from here http://jreject.turnwheel.com/
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.
ASKER
I don't want to write my own based on the user agent string. I intend to use jReject.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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.
The login process is fixed to the application this is from.
ASKER
Regarding https://www.experts-exchange.com/questions/28509774/Preventing-specific-browsers-from-logging-in.html?anchorAnswerId=40298585#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.
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.
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
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>ASKER
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.
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.
I don't see any error on IE8 : http://fiddle.jshell.net/rsmbuLL1/1/show/
...but jsfiddle have issue on IE8
...but jsfiddle have issue on IE8
ASKER
Almost there. It doesn't work in Chrome. Here is the code I have so far.
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.
<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 </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>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.
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
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
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
http://iconoun.com/demo/temp_leesavidge.php
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
ASKER
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.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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
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
ASKER
Thanks guys. All great help and much appreciated.
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
https://developer.mozilla.org/en-US/docs/Web/API/NavigatorID.userAgent
And check for MSIE or Trident