...

View Full Version : security problem with home-made DHTML menu script...



kargrafx
12-04-2006, 01:40 AM
I have a page I am using DHTML on, to make an entire website in the one page. Each sub-page of content is simply separated into one of 6 DIV's, and using display:hidden CSS, I show only one DIV at a time.

The CSS and Javascript I use is here;


<style type="text/css">
#biography {
background: #fff3cd;
margin:10px 10px 10px 10px;
}

#gallery {
background: #fff3cd;
margin:10px 10px 10px 10px;
}

#faq {
background: #fff3cd;
margin:10px 10px 10px 10px;
}

#rates {
background: #fff3cd;
margin:10px 10px 10px 10px;
}

#links {
background: #fff3cd;
margin:10px 10px 10px 10px;
}

#contact {
background: #fff3cd;
margin:10px 10px 10px 10px;
}

</style>

<script type="text/javascript">

function biography() {
document.getElementById('biography').style.display=""
document.getElementById('gallery').style.display="none"
document.getElementById('faq').style.display="none"
document.getElementById('rates').style.display="none"
document.getElementById('links').style.display="none"
document.getElementById('contact').style.display="none"
}

function gallery() {
document.getElementById('biography').style.display="none"
document.getElementById('gallery').style.display=""
document.getElementById('faq').style.display="none"
document.getElementById('rates').style.display="none"
document.getElementById('links').style.display="none"
document.getElementById('contact').style.display="none"
}

function faq() {
document.getElementById('biography').style.display="none"
document.getElementById('gallery').style.display="none"
document.getElementById('faq').style.display=""
document.getElementById('rates').style.display="none"
document.getElementById('links').style.display="none"
document.getElementById('contact').style.display="none"
}

function rates() {
document.getElementById('biography').style.display="none"
document.getElementById('gallery').style.display="none"
document.getElementById('faq').style.display="none"
document.getElementById('rates').style.display=""
document.getElementById('links').style.display="none"
document.getElementById('contact').style.display="none"
}

function friends() {
document.getElementById('biography').style.display="none"
document.getElementById('gallery').style.display="none"
document.getElementById('faq').style.display="none"
document.getElementById('rates').style.display="none"
document.getElementById('links').style.display=""
document.getElementById('contact').style.display="none"
}

function contact() {
document.getElementById('biography').style.display="none"
document.getElementById('gallery').style.display="none"
document.getElementById('faq').style.display="none"
document.getElementById('rates').style.display="none"
document.getElementById('links').style.display="none"
document.getElementById('contact').style.display=""
}

</script>

The DIVs simply each have the 6 listed IDs, and are otherwise typical. The links are each done as follows (with each having the appropriate function and text);
<a href="#" onclick="biography()">Biography</a>

Now, this works, except in some browsers I get a security error (such as in IE6, "To help protect your security, Internet Explorer has restricted this file from showing active content that could access your computer. Click here for options..."). In addition to the error, all 6 DIVs are displayed at once, one beneath the other, which looks horrible and makes the menu of links I made irrelevant (and non-functional).

Aside from this major problem, I have another personal issue; I would prefer to use a single function that replaces the 6 individual functions...but am unsure how to write that. So that a click from a link instead calls the function like; onclick="display(biography)" and shows biography while hiding the other 5 divs, and another would call onclick="display(gallery)" and display the gallery but hide the other 5 divs. That is secondary to the security issue and related display problem...

_Aerospace_Eng_
12-04-2006, 01:43 AM
Let me guess you are testing the page locally? Locally you are going to get that warning. On a server it should go away.

kargrafx
12-04-2006, 01:48 AM
yes, indeed I am testing it locally... I guess this shows my ineptitude, lol. :o

So now I loaded the page to a server and you are correct that in all browsers (at least, the 5 I can test), it works fine.

So that 'fixes' the major problem, leaving me the secondary question - would it be very difficult to rewrite those 6 functions into one?

_Aerospace_Eng_
12-04-2006, 02:02 AM
Glad you asked. If you hadn't responded so soon I was going to append that to my previous post but it will be put into this one

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Content Switcher</title>
<style type="text/css">
.content { /* be sure your content divs have class="content" */
background:#FFF3CD;
margin:10px;
}
</style>
<script type="text/javascript">
var saveState = true; // set this to false if you do not want the selected content to be remembered
// DO NOT EDIT BELOW ================================

// This adds style tags to the head of the document hiding the content ONLY if JS is enabled
// IF JS is disabled then users will still see the content, this so no one is left out
var createStyle = document.createElement('style');
createStyle.setAttribute('type','text/css');
var createProp = document.createTextNode('.content {display:none;}');
createStyle.appendChild(createProp);
document.getElementsByTagName('head')[0].appendChild(createStyle);

// This is the function that actually shows the desired content, you pass the id of the content div into the function
function showContent(what)
{
var thecontent = document.getElementsByTagName('div');
for(var i = 0; i < thecontent.length; i++)
{
if(thecontent[i].className == 'content')
{
thecontent[i].style.display = 'none';
}
}
document.getElementById(what).style.display = 'block';
createCookie('whichcontent',what,9999);
return false;
}

// This function creates a cookie if saveState is set to true allowing the browser to remember which content was clicked
function createCookie(name,value,days)
{
if (days)
{
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}

// This function allows you to retrieve the cookie value
function readCookie(name)
{
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++)
{
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}

// This checks to see if saveState is equal to true.
// If it is then it runs the showContent() function using the readCookie() value.
window.onload = function()
{
if(saveState && readCookie('whichcontent') != null)
{
showContent(readCookie('whichcontent'));
}
}
</script>
</head>
<body>
<!--Be sure to follow the same format for the links or they will not work properly.-->
<a href="#" onclick="return showContent('biography')">Biography</a> <a href="#" onClick="return showContent('gallery')">Gallery</a> <a href="#" onClick="return showContent('faq')">Faq</a> <a href="#" onClick="return showContent('rates')">Rates</a> <a href="#" onClick="return showContent('links')">Links</a> <a href="#" onClick="return showContent('contact')">Contact</a>
<div id="biography" class="content">This is the biography content</div>
<div id="gallery" class="content">This is the gallery content</div>
<div id="faq" class="content">This is the faq content</div>
<div id="rates" class="content">This is the rates content</div>
<div id="links" class="content">This is the links content</div>
<div id="contact" class="content">This is the contact content</div>
</body>
</html>

kargrafx
12-04-2006, 02:16 AM
okay... wow.

That is a modification of the dynamic tab script on dynamicdrive, yes? I started to do that myself; but then I looked at the size of it and thought, "It has to be able to be done more simply."

So my 6 functions were written, using much less code, even though it took 6 separate functions. It lacks a feew features; such as changing the state of the active 'tab' and saving a cookie - but I didn't want either of those capabilities.

Is there no simpler way to do it in a single function?

[edit] Oh, and another probable issue; I have many other DIVs in my page besides the content DIVs, and while I have a long way to go on being a good coder... I think it would hide everything that is a DIV, aside from the one...yes? That would be a problem for me.

_Aerospace_Eng_
12-04-2006, 02:50 AM
No its not a modification. I wrote it myself. And no it won't hide all divs on the page. It would only hide divs that had class="content". Here is the slimmed down version. It doesn't remember the content div that was clicked and all divs are hidden by default.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Content Switcher</title>
<style type="text/css">
.content { /* be sure your content divs have class="content" */
background:#FFF3CD;
margin:10px;
display:none;
}
</style>
<script type="text/javascript">
// This is the function that actually shows the desired content, you pass the id of the content div into the function
function showContent(what)
{
var thecontent = document.getElementsByTagName('div');
for(var i = 0; i < thecontent.length; i++)
{
if(thecontent[i].className == 'content')
{
thecontent[i].style.display = 'none';
}
}
document.getElementById(what).style.display = 'block';
createCookie('whichcontent',what,9999);
return false;
}
</script>
</head>
<body>
<!--Be sure to follow the same format for the links or they will not work properly.-->
<a href="#" onclick="return showContent('biography')">Biography</a> <a href="#" onClick="return showContent('gallery')">Gallery</a> <a href="#" onClick="return showContent('faq')">Faq</a> <a href="#" onClick="return showContent('rates')">Rates</a> <a href="#" onClick="return showContent('links')">Links</a> <a href="#" onClick="return showContent('contact')">Contact</a>
<div id="biography" class="content">This is the biography content</div>
<div id="gallery" class="content">This is the gallery content</div>
<div id="faq" class="content">This is the faq content</div>
<div id="rates" class="content">This is the rates content</div>
<div id="links" class="content">This is the links content</div>
<div id="contact" class="content">This is the contact content</div>
</body>
</html>

Try things before you think they won't work.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum