...

View Full Version : Password Protection Code modification



Mayankode
12-08-2012, 09:57 PM
I am using a password protect code from http://javascriptkit.com/script/cut34.shtml . The code works perfect for me since i need to have different passwords to access different pages in the same interface, and here the password is the name of the html files.

Concept Used: The pop up window asks for password and then looks for an html file with the same name in the root folder. If there is no such file then the pop up stays and the base page returns again.

Modification Needed: I want to make the code look for the html file in a specific folder instead of in the root.

I changed the 5th line of the following code to make it location=\/folder\/password +".html"

But it does not work. Kindly suggest me my mistake. needless to say that I am a beginner. Your help shall be highly appreciated. Thanks

function goForit() {
var location;
var password;
password=this.document.testform.inputbox.value
location=password + ".html"
fetch(location)
theKeeper=window.close()
}

function fetch(location) {
var root;
if (opener.closed) {
root=window.open('','theKeepersGopher','toolbar=yes,location=yes,status=yes,menubar=yes,scrollbars=y es,resizable=yes,copyhistory=no');
root.location.href = location;
} else {
opener.location.href = location;
}
}

felgall
12-08-2012, 10:03 PM
location='foldername/'+password + ".html"

or

location='/anotherfoldername/'+password + ".html"

Mayankode
12-08-2012, 10:40 PM
Thank you so much. The first one worked.

By entering the wrong password it tries to open the respective non existent html file in the folder in the directory. and stays there with a file not found page. Is there any way in using javascript, the page can be redirected to a predefined page when the user enters a password(wrong), and no such html file exists in the folder ?

Please guide.

AndrewGSW
12-08-2012, 11:01 PM
A thought occurs that you could try to load the page in a hidden iframe, using onload to try to reference an element on the page, even document.body, and if this fails redirect to another page. But I don't know without a little googling whether onload fires if the page is not found(?).

[I think there might be another way to do this using ajax or some other similar technology.]

But given that this is not secure at all.. you could store the passwords in an array and check if the one they've entered exists in the array.

Mayankode
12-08-2012, 11:23 PM
Thank you Andrew. That seems to be a clever idea. I do not have adequate know how to execute that though. I am getting the files hosted and hopefully configuring a 404 not found page might help. I will continue to investigate. Thank you again.

AndrewGSW
12-09-2012, 12:19 AM
Yes I was reading a little further. If you provide your own 404 page then there will be something on the page that you can refer to that identifies it. Or, of course, this 404 page could offer to redirect the user.

I had what I thought was a clever idea, which was to wait for onload to complete and just read the location (the address); if it's different then the page they were seeking doesn't exist. But I don't know if this would work. Something like:


var oIframe = document.getElementById("secretIframe");
oIframe.onload = function () {
// for compatibility
var oDoc = oIframe.contentWindow || oIframe.contentDocument;
if (oDoc.document) {
oDoc = oDoc.document;
}
alert(oDoc.location.href);
if (oDoc.location.href != thePasswordAddress) {
// that is, having stripped out 'http://'
// 404 - out of luck!
}
};
Anyway, good luck. Andy.

Mayankode
12-09-2012, 01:20 PM
Andy I would like to test this idea. Please correct me

So I need to put an i frame with id=secretIframe

and then put the contents of the above code in the password seeking pop up window.
What else do i need to do to achieve the redirection back to the predefined page.. where in the code does it define the predefined page.

AndrewGSW
12-09-2012, 02:24 PM
You could play with the following. But, erm...., it's not quite working?! Added: actually, I think it is working, if uploaded to a server.


<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>

<script>
var thePasswordAddress = "not_carousel.html";
window.onload = function () {
var oIframe = document.getElementById("secretIframe");
oIframe.onload = function () {
// for compatibility
var oDoc = oIframe.contentWindow || oIframe.contentDocument;
if (oDoc.document) {
oDoc = oDoc.document;
}
var newLoc = oDoc.location.href;
//console.log(oDoc);
alert(newLoc);
if (newLoc.indexOf(thePasswordAddress) + 1) {
alert('Yes, it is the correct page!');
} else {
// 404 - out of luck!
alert('Doh! Not found!');
window.location = "dragto.html";
}
};
oIframe.src = "carousel.html";
};

</script>
</head>
<body>
<h1>Just a Heading</h1>
<iframe id="secretIframe">Hello</iframe>

</body>
</html>

Mayankode
12-10-2012, 01:41 AM
I tested the code in dropbox using the web address.. and it seems to be working.. but I am not able to use the code with the password pop up page i am using...

@Andy, Please see this link https://dl.dropbox.com/u/25512757/Sand-Box/index.html (note for others who are seeing this link at a later date : it has been taken off. Sorry)

Currently since it is in dropbox server, it is giving a 404 page, but i want it to redirect to a predefined /dragto.html page if it is not leading the user to /Codebox/xyz.html

I understand that you are saying to put your code in the popup page. bur then where should I put the secretIframe, in the resulting page (treasure) ? Please help me..

nb. I am following you in another post in an alternative to make this happen in google app engine.

AndrewGSW
12-10-2012, 02:03 AM
Haven't looked in detail but I'm guessing you can put the hidden iframe in the popup. If it succeeds then reload the same page in the main window, via window.opener.

I don't know what treasure refers to, unless it is a compliment :D

Mayankode
12-10-2012, 02:32 AM
:D @Andy

I am not sure.. When I put the code in the popup then it shows a messagebox in the pop up itself, as soon as it loads and on clicking ok, takes me to the dump (dragto.html)... but the user never gets to input the password...

Here is the file structure I am using

Webroot
-index.html (the homepage)
-dragto.html ( refered to as dump)
-gate.html (the pop up )
-Codebox
--xyz.html (refered to as treasure)


The desired behavior is on clicking a button in index.html it opens the gate.html as a pop up. Then if you put xyz as the password in the popup, it takes you to /Codebox/xyz.html but entering anything else should take you to dragto.html.

The codes of pages without your code are the following.

Code of Index.html

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>The Home Page</title>
<SCRIPT LANGUAGE="javascript">
<!--- Hide from tired old browsers
var nifty_little_window = null;
function gateKeeper() {
nifty_little_window = window.open('gate.html', 'theKeeper',
'width=390,height=200,top=450,left=500,resizable=no');
}
// End hiding --->
</SCRIPT>
</head>
<body>
<div>
<h1>This is the homepage</h1></br><h2>If you enter password xyz in the following pop up you will get the trasure</h2></br><h3>giving any other password will take you to the Dump page</h3>
</div>


<form>
<input type="button" value="Submit" onClick="gateKeeper()" class="button">
</form>
</body>


The code of gate.html


<HTML>
<HEAD>
<TITLE>Match Documents</TITLE>

<SCRIPT LANGUAGE="JavaScript">
function goForit() {
var location;
var password;
password=this.document.testform.inputbox.value
location='Codebox/'+password + ".html"
fetch(location)
theKeeper=window.close()
}

function fetch(location) {
var root;
if (opener.closed) {
root=window.open('','theKeepersGopher','height=500,width=400,left=100,top=100,toolbar=no,location=no ,status=no,menubar=no,scrollbars=yes,resizable=no,copyhistory=no');
root.location.href = location;
} else {
opener.location.href = location;
}
}

// End hiding --->
</SCRIPT>


</HEAD>

<BODY>
<iframe id="secretIframe">Hello</iframe>
<FONT FACE="ARIAL" SIZE=2 color=#000><B>password xyz for treasure for any other password you will be taken to dump</B></FONT><BR>
&nbsp;


<CENTER>
<FORM NAME="testform">
<INPUT TYPE="password" NAME="inputbox" VALUE="" size=20 class="pass"><p>
<INPUT TYPE="button" NAME="button" Value="get treasure" onClick="goForit(this.form)" class="button">

</FORM>
</CENTER>

</BODY>

</HTML>


Sorry for pasting crude codes... right now if you go to the https://dl.dropbox.com/u/25512757/Sand-Box/index.html I have added your code in the pop up and it is not functioning desirably... Here are all the files you can test easily https://dl.dropbox.com/u/25512757/Sand-Box.rar Please guide me... Thank you...

AndrewGSW
12-10-2012, 02:46 AM
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>

<script>
var thePasswordAddress = "not_carousel.html"; // this is your variable named 'password'
window.onload = function () {
var oIframe = document.getElementById("secretIframe");
oIframe.onload = function () {
// for compatibility
var oDoc = oIframe.contentWindow || oIframe.contentDocument;
if (oDoc.document) {
oDoc = oDoc.document;
}
var newLoc = oDoc.location.href;
//console.log(oDoc);
alert(newLoc);
if (newLoc.indexOf(thePasswordAddress) + 1) {
alert('Yes, it is the correct page!');
} else {
// 404 - out of luck!
alert('Doh! Not found!');
window.location = "dragto.html";
}
};
oIframe.src = "carousel.html"; // take this line out
// when you've obtained the password then use..
// oIframe.src = "Codebox/" + password + ".html";
// ..which will start the loading of the iframe.
};

</script>
</head>
<body>
<h1>Just a Heading</h1>
<iframe id="secretIframe">Hello</iframe>

</body>
</html>
The alerts or only there for testing. And carousel and dragto are just .html files that I happened to have to hand :p

Aaaaaarggh!! Just seen the FONT FACE and CENTER tags in your HTML.. That is a very old script :mad:

AndrewGSW
12-10-2012, 02:50 AM
FWIW carousel.html (not my work!!)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><title>Carousel Slideshow</title>
<script type='text/javascript'>

function carousel(params){
if(!(params.width>0&&isFinite(params.width)))params.width=100;
if(!(params.height>0&&isFinite(params.height)))params.height=100;
if(!(params.sides>2&&isFinite(params.sides)))params.sides=4;
if(!(params.steps>0&&params.steps<100&&isFinite(params.steps)))params.steps=20;
if(!(params.speed>0&&isFinite(params.speed)))params.speed=8;
if(!(params.image_border_width>=0&&isFinite(params.image_border_width)))params.image_border_width=0;
if(isFinite(params.id)||!params.id)params.id='bad_id_given_'+Math.random();

document.write("<div style='position:relative;overflow:hidden;' id='"+params.id.replace(/[^a-zA-Z0-9]+/g,'_')+"'></div>");
var cdiv=document.getElementById(params.id.replace(/[^a-zA-Z0-9]+/g,'_'))
cdiv.style.width=params.width+'px';
cdiv.style.height=params.height+'px';
cdiv.style.border=params.border;
cdiv.style.position='relative';
cdiv.style.overflow='hidden';
cdiv.title=params.id;

var counter=0,spinning=true,interval=Math.floor(60000/params.sides/params.steps/params.speed)-5;
interval=isNaN(interval)?200:interval;
var img_position=[],images=[],img_dimension=[];
var img_index=params.images.length+1,img_index_cap=2*params.images.length;
var faces=Math.ceil(params.sides/2), dimension, direction, targ, attr, faraway;

function init(){
if(params.direction=="left" || params.direction=="right"){
direction=params.direction;
dimension="width";
}
else if(params.direction=="top" || params.direction=="bottom"){
direction=params.direction;
dimension="height";
}
else {
direction="left";
dimension="width";
}
faraway=(direction=="left"||direction=="top")?'-20000px':'20000px';
cdiv.style[dimension]=params[dimension]/(params.size_mode=='image'?Math.sin(Math.PI/params.sides):1)+'px';
var img=new Image();
img.style.position='absolute';
img.style[direction]=faraway;
img.style.width=params.width-2*params.image_border_width+'px';
img.style.height=params.height-2*params.image_border_width+'px';
img.style.border=(params.image_border_width||0)+'px solid '+params.image_border_color;

for(var i=0;i<params.images.length;i++){
images[i]=img.cloneNode(true);
images[i].src=params.images[i];
if(params.links&&params.links[i]&&params.links[i]!=''){
targ=params.lnk_targets&&params.lnk_targets[i]||params.lnk_base||'new';
if(targ=="_blank"){
attr=(params.lnk_attr&&params.lnk_attr[i])?",'"+params.lnk_attr[i]+"'":"";
images[i].onclick=new Function("window.open('"+params.links[i]+"','"+targ+"'"+attr+")");
}
else if(targ.substr(0,1)=="_"){
images[i].onclick=new Function(targ.substr(1)+".location='"+params.links[i]+"'");
}
else{
attr=(params.lnk_attr&&params.lnk_attr[i])?",'"+params.lnk_attr[i]+"'":"";
images[i].onclick=new Function("var t='"+targ+"';if(window[t]){try{window[t].close()}catch(z){}}window[t]=window.open('"+params.links[i]+"',t"+attr+");window[t].focus()");
}
images[i].style.cursor=document.all?'hand':'pointer';
}

if(params.titles&&params.titles[i]&&params.titles[i]!='')
images[i].title=params.titles[i];
if(document.all)
images[i].alt=images[i].title;
images[i+params.images.length]=images[i];
if(params.images.length==faces)
images[i+2*params.images.length]=images[i];
cdiv.appendChild(images[i]);
}

var face_size=params.size_mode=='image'?params[dimension]:params[dimension]*Math.sin(Math.PI/params.sides);
var face_offset=params[dimension]*Math.cos(Math.PI/params.sides)/(params.size_mode=='image'?Math.sin(Math.PI/params.sides):1)/2-.5;
var pi_piece=2*Math.PI/params.steps/params.sides;
for(i=0;i<=params.steps*faces;i++){
img_dimension[i]=face_size*Math.sin(pi_piece*i);
img_position[i]=(i<params.steps*params.sides/2)?Math.floor(params[dimension]/2/(params.size_mode=='image'?Math.sin(Math.PI/params.sides):1)-face_offset*Math.cos(pi_piece*i)-img_dimension[i]/2)+'px':faraway;
img_dimension[i]=img_dimension[i]-2*params.image_border_width>1?Math.ceil(img_dimension[i])-2*params.image_border_width+'px':'1px';
}
}
init();

cdiv.rotate = function(){
setTimeout('document.getElementById("'+cdiv.id+'").rotate()',interval);
if(!spinning) return;
if(++counter>=params.steps){
counter=0;
if(++img_index>=img_index_cap)
img_index=params.images.length;
}
images[img_index-faces].style[direction]=faraway;
for(var i=faces-1;i>=0;i--){
images[img_index-i].style[direction]=img_position[counter+i*params.steps];
images[img_index-i].style[dimension]=img_dimension[counter+i*params.steps];
}
}
cdiv.onmouseover=function(){
spinning=false;
}
cdiv.onmouseout=function(){
spinning=true;
}
setTimeout('document.getElementById("'+cdiv.id+'").rotate()',100);
}
</script>
</head><body>
<div id='jake' style='width:180px;float:left;'>
<h4>Linkage</h4>All of these images will open a google search in single (reused) window.
<script type='text/javascript'>
carousel({id:'carousel_2',
border:'',
size_mode:'carousel',
width:144,
height:100,
sides:4,
steps:20,
speed:8,
direction:'right',
images:['http://www.codingforums.com/images/icons/icon7.gif',
'http://www.codingforums.com/images/icons/icon8.gif',
'http://www.codingforums.com/images/icons/icon9.gif',
'http://www.codingforums.com/images/icons/icon10.gif',
'http://www.codingforums.com/images/icons/icon2.gif',
'http://www.codingforums.com/images/icons/icon3.gif',
'http://www.codingforums.com/images/icons/icon4.gif',
'http://www.codingforums.com/images/icons/icon5.gif',
'http://www.codingforums.com/images/icons/icon6.gif'],
links: ['http://www.google.com/search?q=happy',
'http://www.google.com/search?q=angry',
'http://www.google.com/search?q=sad',
'http://www.google.com/search?q=big+grin',
'http://www.google.com/search?q=look+here',
'http://www.google.com/search?q=bright+idea',
'http://www.google.com/search?q=caution',
'http://www.google.com/search?q=question',
'http://www.google.com/search?q=cool'],
lnk_base:'google',
titles:['Happy',
'Angry',
'Sad',
'Big Grin',
'Look Here',
'Bright Idea',
'Caution',
'Question',
'Cool!'],
image_border_width:1,
image_border_color:'red'
});
</script></div>
<div id='wendel' style="width:300px;float:right">
<h4>More Linkage</h4>Two photos share a single window, closing/reopening it with each click to allow the attributes to change. One photo opens in a _blank window, with another window added each click. The last photo opens in an iframe.
<script type='text/javascript'>
carousel({id:'Photos Courtesy of Dynamic Drive',
border:'',
size_mode:'image',
width:140,
height:225,
sides:6,
steps:20,
speed:5,
direction:'left',
images:['http://www.dynamicdrive.com/dynamicindex14/photo1.jpg',
'http://www.dynamicdrive.com/dynamicindex14/photo2.jpg',
'http://www.dynamicdrive.com/dynamicindex14/photo3.jpg',
'http://www.dynamicdrive.com/dynamicindex14/photo4.jpg'],
links:['http://www.dynamicdrive.com/dynamicindex14/photo1.jpg',
'http://www.dynamicdrive.com/dynamicindex14/photo2.jpg',
'http://www.dynamicdrive.com/dynamicindex14/photo3.jpg',
'http://www.dynamicdrive.com/dynamicindex14/photo4.jpg'],
lnk_base:'',
lnk_targets:['photo',
'photo',
'_blank',
'_steve' ],
lnk_attr:['width=200,height=300,top=200,menubar=yes',
'width=300,height=200,left=400,scrollbars=yes',
'width=150,height=250,left=300,top=100',
''],
titles:['Opens in \'photo\' window',
'Opens in \'photo\' window',
'Opens in blank window',
'Opens in iframe'],
image_border_width:0,
image_border_color:'blue'
});
</script></div>
<iframe name='steve' style="margin-top:20px;width:300px;height:300px;border:0px solid white"></iframe>
</body></html>

Mayankode
12-10-2012, 01:25 PM
I added the above code to the pop up file and placed a carousel.html in the root drive. But I am not getting the desired result. It does not give a chance to enter the password and then takes to the dragto.html everytime... May be I am missing something here. :(

AndrewGSW
12-10-2012, 05:27 PM
Did you delete the line

oIframe.src = "carousel.html";
from its current location? Sounds like you've put code in the wrong place. Post the current js code.

Mayankode
12-10-2012, 11:12 PM
I have replaced the carousel code with

oIframe.src = "Codebox/" + password + ".html";

and it does the right thing when I enter the right password..
But does not bring back to dump if I enter wrong password... it just takes me (as intended by the original code) to /Codebox/wrongpassword.html

The problem here is, a wrong password can be any thing and the code contend in the pop up box does not know when it opens, what password the user is going to enter.

I know I am not understanding the code. Here is the file arrangement.
Webroot
-index.html (the homepage)
-dragto.html ( refered to as dump)
-gate.html (the pop up )
-Codebox
--xyz.html (refered to as treasure)
Please suggest what should the code be which I need to put in the pop up (gate.html).

I think I am confused about the not-carousel.html in the code. Please help
Here is the link with the implemented code. https://dl.dropbox.com/u/25512757/Sand-Box/index.html

AndrewGSW
12-10-2012, 11:25 PM
Erm.. I see that you have kept your original script and just added mine as a completely independent script :confused:. You've even kept my reference to non-existent carousel, etc., pages - so no wonder it won't work.

You need to combine my script with yours - that is, with your goForit() function. If you have no idea how to do this then I can't help you any further and perhaps you should consider hiring someone to do this for you.

Good luck. Andy.

Mayankode
12-10-2012, 11:33 PM
I was thinking the same. I wish I could merge it.

I will figure it out. Thank you for the heads up. I am sincerely thankful for your help. Will ask you if I run into any problem with this code. Thank you.

AndrewGSW
12-11-2012, 12:06 AM
Well, seeing as it's Christmas, this will be nearer (its the code for the pop-up):

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>Match 2014 Secret Documents</TITLE>

<script type="text/javascript">

////////////////////////////////////////////////////////////////////
/// Get your very own Gate Keeper from Professional Web Design ///
/// http://junior.apk.net/~jbarta/weblinks/gate_keeper/ ///
////////////////////////////////////////////////////////////////////

var password = '', newLocation;
var oIframe;

window.onload = function () {
oIframe = document.getElementById("secretIframe");
oIframe.onload = function () {
// for compatibility
var oDoc = oIframe.contentWindow || oIframe.contentDocument;
if (oDoc.document) {
oDoc = oDoc.document;
}
var newLoc = oDoc.location.href;
if (newLoc.indexOf(password) + 1) {
// alert('Yes, it is the correct page!');
fetch(newLocation);
theKeeper = window.close();
} else {
// 404 - out of luck!
opener.location.href = "dump.html";
theKeeper = window.close();
}
};
};

function goForit() {
password = this.document.testform.inputbox.value;
newLocation = 'Codebox/'+ password + ".html";
oIframe = document.getElementById("secretIframe");
oIframe.src = newLocation;
}

function fetch(locn) {
var root;
if (opener.closed) {
root = window.open(locn,'theKeepersGopher','height=500,width=400,left=100,top=100,toolbar=no,location=no,st atus=no,menubar=no,scrollbars=yes,resizable=no,copyhistory=no');
} else {
opener.location.href = locn;
}
}

// End hiding --->

</script>

</HEAD>

<BODY>
<iframe id="secretIframe">Hello</iframe>
<FONT FACE="ARIAL" SIZE=2 color="#000"><B>password xyz for treasure for any other password you will be taken to dump</B></FONT><BR>
&nbsp;


<CENTER>
<FORM NAME="testform" action="" method="get">
<INPUT TYPE="password" NAME="inputbox" VALUE="" size=20 class="pass"><p>
<INPUT TYPE="button" NAME="button" Value="get treasure" onClick="goForit(this.form)" class="button">

</FORM>
</CENTER>

</BODY>

</HTML>
It assumes a page called dump.html exists, as you suggested previously. I haven't tested it in combination with the main page.

Mayankode
12-11-2012, 12:52 AM
I really appreciate your help Andy. I used the above code for the popup and I feel I am almost there. I can see the pop up box load the page after clicking submit in the password form. And as expected it does close itself after opening the page in the main window too. But the page it opens in the main window is not the dump.html (which is present in the root)rather it takes to the /Codebox/wrongpassword.html I have implemented it here https://dl.dropbox.com/u/25512757/Sand-Box/index.html

I don't want to bother you with this, And I appreciate your time and effort. I would still appreciate it even if you drop this out now. Thank you...

AndrewGSW
12-11-2012, 01:13 AM
It won't work from dropbox or locally - it should work from a server (probably..).

When the wrong password is entered it doesn't have a 404 page to display, so the address bar still contains 'wrongpassword' - so it thinks the right password was entered.

Mayankode
12-11-2012, 01:33 AM
The whole thing boils down to the absence of a 404page...
I just uploaded them to the server in google appengine.. but like I was saying in the other post the errors are displayed with some gibberish error codes and it actually does not reach a 404 page. The page address remains the same.

So this did not work in the server too. And it will not work until I fix the definable 404page issue. Once I set it up, This pop up code will work like a charm I think. You have been very kind to me. And I appreciate that. Please do not worry about this. I will have it figured out by some friend of mine some time later.

Heartfelt thanks to you...

AndrewGSW
12-11-2012, 01:43 AM
No worries. You could delete (temporarily) that stuff in your config-file, just leaving the redirection at the bottom to your own 404 page. Andy.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum