Solved

placebo .htacces login/pass

Posted on 2000-02-24
30
346 Views
Last Modified: 2012-05-04
HI is it possiple to make a javascript or like(pop), item like this one:
http://207.246.139.153/1.gif

i want it to pop when a user acces a html file.. and the password/login should be filled with a default value
and the ok button should lead to
http://www.blah.com target="blank_"

If there is another way to do it..then it just fine with me...
0
Comment
Question by:nicce
  • 14
  • 11
  • 5
30 Comments
 
LVL 8

Expert Comment

by:jbirk
Comment Utility
You can't really do a secure password protection with client side JavaScript, but you can do some neat tricks.  Check out:
http://javascript.internet.com/passwords/
for a bunch of different tricks on JavaScript password protection.
If you want a variation of one of the scripts from that page, I or someone here can modify them for you.

As for other options, the unix .htaccess which you mentioned in the title is a good way to do it.

I'm sure there are a few other ways out there as well :)

-Josh
0
 

Author Comment

by:nicce
Comment Utility
The thing i need is a popup that looks like the .httacces but it not protecting anything it should just look that way..
i can pop a gif screenshot..in a layer..but it loads to slow
0
 
LVL 1

Expert Comment

by:tbain44
Comment Utility
Okay, you can have another page that looks like this: (I called this page testPage.htm)

<HTML>
<HEAD>
<TITLE>Enter Network Password</TITLE>
<script language="JavaScript">
 function openUrl()
 {
  window.open("http://www.blah.com")
  window.close()
 }
</script>
</HEAD>
<BODY bgColor=silver>
<blockquote>
Please type your username and password.
<table cellpadding="5">
 <tr>
  <td>Site:</td>
  <td>www.whatever.com</td>
 </tr>
 <tr>
  <td>Realm</td>
  <td>Whatever</td>
 </tr>
 <tr>
  <td>Username</td>
  <td><input value="Admin"></td>
 </tr>
 <tr>
  <td>Password</td>
  <td><input value="Password"></td>
 </tr>
</table>
<INPUT type="checkbox" checked> Save this password in your password list.<p>
<blockquote><INPUT type="submit" value="OK" style="WIDTH: 60px" onClick="openUrl()"> <INPUT type="button" value="Cancel" style="WIDTH: 60px"></blockquote>
</blockquote>
</BODY>
</HTML>

---------------------------------------

and in whatever page you're in you call that page something like:

<script language="javascript">
 window.open('testPage.htm','' , 'toolbar=no,menubar=no,scrollbars=no,resizable=no,width=400,height=250');
</script>

---------------------------------------

that'll call testPage.htm (first code I wrote) in a new screen - sorta like a popup.  Then when you hit the ok button it'll open another browser with your www.blah.com page and close that popup screen.

---------------------------------------

Is that what you're looking for?

-Tara
0
 
LVL 8

Expert Comment

by:jbirk
Comment Utility
Tara, your solution simulates the window pretty well.  Just a few changes I thought were needed: input type="password" to have the stars instead of letters.  The style="width:60px" is IE only, and cause netscape to break the buttons.  So I just took it out...  And the cancel button normally closes the window without forwarding, so I added window.close() to the cancel button.

nicce,  this method is not actually doing anything with the username and password, and is also not saving the typed information even if the checkbox is checked.  This is what wanted, right?

Anyway, here is Tara's code with my mods:

<HTML>
<HEAD>
<TITLE>Enter Network Password</TITLE>
<script language="JavaScript">
function openUrl()
{
window.open("http://www.blah.com")
window.close()
}
</script>
</HEAD>
<BODY bgColor="silver">
<FORM>
<blockquote>
Please type your username and password.
<table cellpadding="5">
  <tr><td>Site:</td>
    <td>www.whatever.com</td>
  </tr>
  <tr>
    <td>Realm</td>
    <td>Whatever</td>
  </tr>
  <tr>
    <td>Username</td>
    <td><input type="text" value="Admin"></td>
  </tr>
  <tr>
    <td>Password</td>
    <td><input type="password" value="Password"></td>
  </tr>
  <TR><TD colspan=2"><INPUT type="checkbox" checked> Save this password in your password list.<p> </TD>
  </TR>
  <TR><TD>&nbsp;</TD><TD><INPUT type="submit" value="OK" onClick="openUrl()">&nbsp;<INPUT type="button" value="Cancel" onClick="window.close();"></TD></TR>
</table>
</blockquote>
</FORM>
</BODY>
</HTML>


-Josh
0
 

Author Comment

by:nicce
Comment Utility
Thanks alot:-) i´ll try it out on my site!
is it impossiple to pop something exactly like the gif file?
0
 
LVL 8

Expert Comment

by:jbirk
Comment Utility
That was a pretty close approximation.  HTML and the web is a very inexact science at the moment, and since all the different browsers and versions seem to display the same code slightly differently (or some times not at all:) it's impossible to ever have an exact design (with HTML).

Was there something in particular about this popup that you wanted to look more like the gif file?

-Josh
0
 

Author Comment

by:nicce
Comment Utility
Hmm the reason i want it to look like the gif is because its a pop people know.., and it have to be a copy of it, just with other behavoirs...i dont care if it made in html ot any other web langui..as long as its the same...
0
 
LVL 8

Expert Comment

by:jbirk
Comment Utility
The only things that I see different are that the little image isn't there.  If you have a copy of the image it can easily be thrown in...

The buttons aren't as wide.  Tara added code which makes them a little wider but it was throwing netscape off.  It doesn't like to make them bigger than the default for some reason.

Also the title bar is a little different since it has the netscape icon, and "- Netscape" appended to the end of the title, and the htree buttons on the right instead of the two.  Unfortunately there's nothing that can be done about these.

Last, the spacing is a little different, but all the browsers like to make their table spacing just a little different.

I don't see much that can be improved upon.  Is this still not close enough for you??  Are you trying to actually fool them into thinking it's an official microsoft popup?  If not, I think ANYBODY who is familiar with the normal popup will recognize this one.

-Josh
0
 
LVL 1

Expert Comment

by:tbain44
Comment Utility
Here's the image from that popup.

http://tarabain.webhostme.com/images/login.gif

So you can copy that, it's the key thing that's on the popup you want.

I don't know how much background you have, but to insert the image it's,

<img src="login.gif">

I guess i'll just format the html for you since it would need to be a bit different.

Cont...

0
 
LVL 1

Expert Comment

by:tbain44
Comment Utility
So this is with the image added in.  But note that you have to go to my site listed above and copy that image.

Also you don't mention what you want to look different so we can't really help make any other changes.  But what we have here is very very similar to that gif we're looking at.  I'm sure no one would know the difference.  

But if you'd like some changes to it, let us know what so we can see if it's possible.

<HTML>
<HEAD>
<TITLE>Enter Network Password</TITLE>
<script language="JavaScript">
function openUrl()
{
window.open("http://www.blah.com")
window.close()
}
</script>
</HEAD>
<BODY bgColor="silver">
<FORM>
<table>
<tr><td valign="top"><img src="login.gif"></td>
<td>
&nbsp;&nbsp;Please type your username and password.
<table cellpadding="5">
  <tr>
    <td>Site:</td>
    <td>www.whatever.com</td>
  </tr>
  <tr>
    <td>Realm</td>
    <td>Whatever</td>
  </tr>
  <tr>
    <td>Username</td>
    <td><input type="text" value="Admin"></td>
  </tr>
  <tr>
    <td>Password</td>
    <td><input type="password" value="Password"></td>
  </tr>
  <TR><TD colspan=2"><INPUT type="checkbox" checked> Save this password in your password list.<p> </TD>
  </TR>
  <TR><TD>&nbsp;</TD><TD><INPUT type="submit" value="OK" onClick="openUrl()">&nbsp;<INPUT type="button" value="Cancel" onClick="window.close();"></TD></TR>
</table>
</td></tr></table>
</FORM>
</BODY>
</HTML>
0
 

Author Comment

by:nicce
Comment Utility
Im more than happy with the effords u all put into this. But im not satisfied with the html solution..
Isnt it possiple to do it in a nother type of programming? im not very used to .htacces..but its htacces that pops the one that im trieng to copy right?
cant it be popped with default value in pass/login..and a default url on the ok button?
0
 
LVL 8

Expert Comment

by:jbirk
Comment Utility
The one you are trying to copy is a Microsoft popup, and you will only see it when booting/logging in on a microsoft OS.  The .htaccess popup is different.  It is smaller and only asks for username and password, has nothing else on the popup.  The only other possibility I can think of would be to use Java, but I'm very unfamiliar with that and it's capabilities, so I don't even know if it can do this or not.  I'm pretty sure that any windows poped up via java have the java cup icon on the title bar though...

-Josh
0
 
LVL 1

Expert Comment

by:tbain44
Comment Utility
nicce,
Okay, other work arounds.

Let's see, first of all what browsers does this need to be compatable with?  That will help us know what type of things we can try to do.  Netscape, IE, both, 4.0 and up, or higher versions even?

Well, one thing I can sorta think of is using that gif (if you need the image to load faster we can try to compress it a little more too - but it's only 5k which is rather small).  We can have that image load on some page overlapping the text so it looks like a popup.  We can even make it so when the user scrolls on the webpage in the background that the image doesn't move (might be an ie thing though - have to check if that'll work in netscape too).  Then we can try a onclick method to see where the user clicked and if it is where the ok is then change the page to that whatever.com and if where the cancel button is then maybe hide the image.

Just a suggestion, but I'm not even gonna try to work on something till you say what you're looking for.  
0
 
LVL 1

Expert Comment

by:tbain44
Comment Utility
This is the code that when the user scrolls the background page that the image will stay in place.  You can try that out and see how it looks.  It just sort of simulates the popup because it looks like it's sorta unattached to the page.  (note: all the <p>blah</p> is just so that the page is long so you can try scrolling)

<html>

<head>

<script language="JavaScript">

function moveObject()
{
        myObject.style.left = document.body.scrollLeft + 250;
        myObject.style.top = document.body.scrollTop + 150;
}

window.onscroll = moveObject;

</script>

<title>Scrolling Objects</title>
</head>

<BODY bgcolor="#FFFFFF">

<font size="1"></font>

<SPAN ID="myObject" STYLE="position:absolute; left:250; top:150">
<img src="loginscreen.gif">
</SPAN>


<h2>Login Screen</h2>

<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>

</body>
</html>
0
 
LVL 1

Expert Comment

by:tbain44
Comment Utility
oh, and i copied that image you wanted the login to look like and called it loginscreen.gif.
0
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 

Author Comment

by:nicce
Comment Utility
tbain44:
thanks alot for your try...its kinda what im doing now..just without the scrolling effect...
the reason why i need it load so fast..if not say, i need allmost no loading time at all is, that speed is the most important factor on my site..
but i think this is the best solution sofar..
lets just stick to tthis..
if u can learn me how i can expand the imgmap, to letting the giffile disapear on cansel..or the x in the corner then i´ll give you the points for helping me..
nicce  

<html>

<head>
<title>INDEX/MEMBERS..</title>
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type">
<script language="javascript">
popi=0;
function pop() {
popi=popi+1
if (popi==1){
window.focus();
mydiv=document.all.tags("div");
mydiv[0].style.visibility='visible';

}
}
</script>

<meta content="Microsoft FrontPage 3.0" name="GENERATOR">
</head>

<body onload="setTimeout('pop()',4000)" text="#FFFFFF" bgcolor="#000000" vlink="#505CFE"
alink="#0000FF" link="#2636FD">
<div id="Layer1"
style="HEIGHT: 254px; LEFT: 300px; POSITION: absolute; TOP: 180px; VISIBILITY: hidden; WIDTH: 403px; Z-INDEX: 1">
<dd><!--webbot bot="ImageMap"
  rectangle="(0,0) (403,254)  http://www.crispyteens.com/cgi-bin/ucj/c.cgi?link=members##_blank"
  style="CURSOR: nw-resize" src="http://www.crispyteens.com/loginani.gif" border="0"
  width="403" height="254" --></dd>
</div>

<h1>login/members/area/</h1>
</body>
</html>
0
 

Author Comment

by:nicce
Comment Utility
and another problem with the gif...
I have 100.000-130.000 visitors a day..so it also a bandwith issue:-!
0
 
LVL 1

Expert Comment

by:tbain44
Comment Utility
Then the idea proposed above with the popup would be best.  Can't think of any way to make it look "exactly" alike.  Again, I don't think people would really notice the difference.

But what else from the popup did you want to look more similar?
0
 
LVL 1

Expert Comment

by:tbain44
Comment Utility
This sites a little slow, so my last message may sound strange.  I'll try out some imagemap things though.
0
 

Author Comment

by:nicce
Comment Utility
ok thanks:-)
0
 
LVL 1

Expert Comment

by:tbain44
Comment Utility
Okay, changed things around a bit.  Still using div's though and it won't work on ie, but i don't think the code you gave from above will either.

Well, instead of your div with the image map..

<div id="divlogin" style="POSITION: absolute; top: 200px; left: 200px;">
<img src="http://www.crispyteens.com/loginani.gif">
</div>
----------------------------
then have other divs whose coordinates will be where the buttons and X will be (note: These coordinates are NOT correct)  These div's have onClick methods which will call a javascript function.

<div onClick="goPage()" style="POSITION: absolute; top: 200px; left: 400px; height: 200px; width: 200px;">
</div>
<div onClick="hideImg()" style="POSITION: absolute; top: 200px; left: 200px; height: 200px; width: 200px;">
</div>
------------------------------
and the functions will look like this..

<script language="javascript">

function hideImg() {
  window.divlogin.style.display='none';
}

function goPage() {  window.location.href="http://www.crispyteens.com/cgi-bin/ucj/c.cgi?link=members##_blank";
}

************************************

or if you want to use your image maps then you can create another page without the image on it and have the cancel and X go to that page or just any other url.
0
 
LVL 1

Expert Comment

by:tbain44
Comment Utility
whoa, I wrote won't work on ie, i mean won't work on netscape.

So how does that work for you nicce?
0
 

Author Comment

by:nicce
Comment Utility
Im not sure ofcourse it would be nice if the code works on all browsors..but its probably to easy to achive:-(
the thing with the 2 divs looks good, and i´ll go try it now...
thanks
nicce
0
 
LVL 1

Expert Comment

by:tbain44
Comment Utility
Ok, cross browser.  It used div's for IE and layers for NET.  Will work for netscape 4.X.  Again the div's and layer's which will represent where the ok and cancel are, are not over the ok and cancel.  If you want to take exactly this code and try it out, the ok is around the upper left corner of the image, and the cancel is around the top middle-right.  Also when the cancel is pressed, the image dissapears and clicking on the space where the ok div/layer would be won't be like pressing ok.

<html>

<head>

<script language="javascript">
function init() {
  if (document.layers) {
    document.cancel.captureEvents(Event.CLICK)
    document.cancel.onclick=hideImg;
    document.ok.captureEvents(Event.CLICK)
    document.ok.onclick=goPage;
  }
}

function hideImg() {
  if (document.all) {
    window.login.style.display='none';
    window.ok.onclick='';
  }
  if (document.layers) {
    window.document.login.visibility='hide';
    document.ok.releaseEvents(Event.CLICK)
  }
  return false;
}

function goPage() {
  location.href="test2.htm";
}

</script>

<title>INDEX/MEMBERS..</title>

</head>

<body onLoad="init()">

<script language="JavaScript">
if (document.all) {
  document.write("<div id='login' style='POSITION: absolute; top: 200px; left: 200px;'><img src='http://www.crispyteens.com/loginani.gif'></div>");
  document.write("<div onClick='hideImg()' style='POSITION: absolute; top: 200px; left: 400px; height: 200px; width: 200px;'></div>");
  document.write("<div id='ok' onClick='goPage()' style='POSITION: absolute; top: 200px; left: 200px; height: 200px; width: 200px;'></div>");
} else if (document.layers) {
  document.write("<layer id='login' top='200' left='200' src='http://www.crispyteens.com/loginani.gif' visibility='show'></layer>");
  document.write("<layer id='cancel' top='200' left='400' height='200' width='200'></layer>");
  document.write("<layer id='ok' top='200' left='200' height='200' width='200'></layer>");
}
</script>
<h1>login/members/area/</h1>

</body>
</html>
0
 
LVL 1

Expert Comment

by:tbain44
Comment Utility
Ok, cross browser.  It used div's for IE and layers for NET.  Will work for netscape 4.X.  Again the div's and layer's which will represent where the ok and cancel are, are not over the ok and cancel.  If you want to take exactly this code and try it out, the ok is around the upper left corner of the image, and the cancel is around the top middle-right.  Also when the cancel is pressed, the image dissapears and clicking on the space where the ok div/layer would be won't be like pressing ok.

<html>

<head>

<script language="javascript">
function init() {
  if (document.layers) {
    document.cancel.captureEvents(Event.CLICK)
    document.cancel.onclick=hideImg;
    document.ok.captureEvents(Event.CLICK)
    document.ok.onclick=goPage;
  }
}

function hideImg() {
  if (document.all) {
    window.login.style.display='none';
    window.ok.onclick='';
  }
  if (document.layers) {
    window.document.login.visibility='hide';
    document.ok.releaseEvents(Event.CLICK)
  }
  return false;
}

function goPage() {
  location.href="test2.htm";
}

</script>

<title>INDEX/MEMBERS..</title>

</head>

<body onLoad="init()">

<script language="JavaScript">
if (document.all) {
  document.write("<div id='login' style='POSITION: absolute; top: 200px; left: 200px;'><img src='http://www.crispyteens.com/loginani.gif'></div>");
  document.write("<div onClick='hideImg()' style='POSITION: absolute; top: 200px; left: 400px; height: 200px; width: 200px;'></div>");
  document.write("<div id='ok' onClick='goPage()' style='POSITION: absolute; top: 200px; left: 200px; height: 200px; width: 200px;'></div>");
} else if (document.layers) {
  document.write("<layer id='login' top='200' left='200' src='http://www.crispyteens.com/loginani.gif' visibility='show'></layer>");
  document.write("<layer id='cancel' top='200' left='400' height='200' width='200'></layer>");
  document.write("<layer id='ok' top='200' left='200' height='200' width='200'></layer>");
}
</script>
<h1>login/members/area/</h1>

</body>
</html>
0
 

Author Comment

by:nicce
Comment Utility
the idea is great..but i cant get it working? when i run the code all i get is a broken image..?
0
 
LVL 1

Expert Comment

by:tbain44
Comment Utility
I can't see how you have a broken image because the path is an absolute reference and I checked and it's still up on the site.

And you copied this code directly?  Because I'm at a different computer now and this code directly works here.  

What Browser and version by the way?
0
 

Author Comment

by:nicce
Comment Utility
its working now:-() it was my fault..i messed something up!
Im not sure how to make the correct koordinates fort the ok/cancel buttons?
can a imagemap be used`?
nicce
0
 
LVL 1

Accepted Solution

by:
tbain44 earned 500 total points
Comment Utility
Here are the coordinates, replace this part in the code.

These coordinates are all from top left corner, so if you move around the login gif you also need to adjust the div/layer coordinates accordingly.

------------------------------------

if (document.all) {
  document.write("<div id='login' style='POSITION: absolute; top: 200px; left: 200px;'><img src='http://www.crispyteens.com/loginani.gif'></div>");
  document.write("<div id='ok' onClick='goPage()' style='POSITION: absolute; top: 408px; left: 418px; height: 25px; width: 80px;'></div>");
  document.write("<div onClick='hideImg()' style='POSITION: absolute; top: 408px; left: 510px; height: 25px; width: 80px;'></div>");
} else if (document.layers) {
  document.write("<layer id='login' top='200' left='200' src='http://www.crispyteens.com/loginani.gif' visibility='show'></layer>");
  document.write("<layer id='ok' top='408' left='418' height='25' width='80'></layer>");
  document.write("<layer id='cancel' top='408' left='510' height='25' width='80'></layer>");
}
0
 

Author Comment

by:nicce
Comment Utility
Thanks alot for your great help:-)
I´ll upload the page with the new codes:-)

nicce
0

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
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…

763 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now