Prevent copy/paste and Print Screen online

Posted by & filed under Developer Blog.

NOTE: This script is no longer supported in Flash Player 10.

(It was fun while it lasted!)

Let’s face it, there is such a thing as sensitive material on the web. I was recently put to the task of protecting a certain page on our company’s intranet from being redistributed outside the company. In other words, we have a page on the intranet that is so sensitive, upper managment doesn’t want our employees to be capable of sending it to anyone outside the company.

So, I started thinking, what are the ways an average, non-techie employee, could reproduce this information? Since it’s on our password/firewall protected intranet, the risk of someone just emailing the link isn’t an issue. Of course the obvious is that they could copy and paste the text into an email and send it that way. They could also press the Print Screen button and paste a snapshot of the page as an email attachment or whatever.

I decided that beyond more “advanced” measures (like view source then save as), the clipboard was the method most people know how to use. So, the question became “how to disable the clipboard?”

I started tinkering around with JavaScript solutions, attempting to intercept any ctrl+c or PrintScreen commands and over-ride them with a call to write a message to the clipboard: “You’re fired! Pack your things and go home.” which would in turn be pasted into their email if they attempted it. But this was klugy at best. First, JavaScript really needs a form field to have focus in order to fire an onClick type event. I figured the best way around that was to run as an onBlur and onFocus in the <body> tag and just over-ride the clipboard whether they tried to copy or not. This seemed to be a great solution until I realized that for some unknown reason, when you select text and then blur (remove focus) a browser window, it doesn’t actually fire any onBlur commands. Not only that, but it’s a big mess to add anything to the clipboard with Firefox (IE makes it really, really easy). I suppose that Firefox doesn’t make writing to the clipboard easy due to security issues, and I’m not going to complain about any attempt to make my favorite browser more secure.  😉

Then I remembered an Adobe Flash (that still sounds weird, doesn’t it?) application that I worked on a few years ago that used Flash’s built in clipboard functions. Booya! I cranked up Flash and wrote the following simple and very easy actionscript in the first line of the first frame:

this.onEnterFrame = function(){
System.setClipboard(“As long as this page is open your copy/paste functionality has been disabled.”);
}

(Added 08/28/2007: for the new CS3 use:)

addEventListener(Event.ENTER_FRAME, onEnterFrame);
function onEnterFrame(E){

System.setClipboard(“As long as this page is open your copy/paste functionality has been disabled.”);
}

I then set the movie size to 1px wide and 1px high and published. I then placed the Flash somewhere on the sensitive document.

Since I left my movie at the default 12 frames per second, the text “As long as this page is open your copy/paste functionality has been disabled.” will be set on the clipboard 12 times per second. Go ahead, try to beat that time with ctrl+c and then ctrl+v!

As invasive as this method is, it works. As long as that page is open even in the background, it will prevent any copying and pasting and even Print Screen and paste. The only problem is, that it requires Flash v6 or higher, which is required in my company to use many of our Flash based applications. But just in case, I left the following IE only code as a backup:

<body onBlur=’window.clipboardData.setData(“Text”, “As long as this page is open your copy/paste functionality has been disabled.”);’>

USB Autorun

Posted by & filed under Developer Blog.

This solution doesn’t create an actuall Autorun, but it does allow you to specify an app you want to run when double clicked from My Computer using the AUTORUN.INF

First I turned off all XP Autorun for my USB drive by right clicking the drive in My Computer folder, selecting the Autorun tab, then selecting each media type individually and selecting the “take no action” option.

Next I created a file called AUTORUN.INF and set it to be a hidden file. I placed that hidden file on the root of my USB drive. Then I opened the AUTORUN.INF file in notepad and entered the following:

[autorun]
shellAuto=&amp;Autoplay
shellAutocommand=appspstartPStart.exe
ICON=appspstartPStart.exe
 
shell=Auto
label=My USB Drive

Where appspstartPStart.exe is the application to run when double clicked in My Computer.

Dynamic Navigation using SiteMesh

Posted by & filed under Developer Blog.

We’ve started using SiteMesh at my workplace. I have really fallen in love with SiteMesh, and I feel it has many advantages. We actually started using it because it is integrated into AppFuse.

Although I love SiteMesh one of my biggest complaints was that I couldn’t use a dynamic navigation, which highlights the link for the page I’m currently visiting. At least not without creating a new decorator for each page; but then, what would be the point of using SiteMesh at all!?

However, the problem wasn’t SiteMesh, the problem was the SiteMesh Documentation’s lack of good examples and explainations on how to use the darn thing. Which is why I’m posting this blog now; hopefully enough people using SiteMesh will start documenting new ways to use it (or old ways undocumented) so that more information is available to those of us who are not Java programmers and can’t decipher all of the documentation available.

The Problem:

In order to create a dynamic navigation, which highlights the page you are currently visiting, you need to have the page being decorated tell the decorator which page it’s decorating. You also need to set up the navigation to say "if I’m on page A, highlight link A" or in other words, "if I’m on page A, set the css class for link A to a different class than the rest of the links." What I had a hard time figuring out was how to pass that information from the page to the decorator in a useful format. To those of you saying, "well couldn’t you already pass variables using the <decorator:getProperty /> tag?" the answer is "yes." But, what you can’t do with <decorator:getProperty /> is stick it inside a jsp if/then statement on your decorator.

The Solution:

After much trial and error (my favorite way to code), and after much google searching. I finally figured out how you can use meta tags to pass variables from the page being decorated, to the decorator. Then rather than using <decorator:getProperty> tag, you use the <decorator:usePage /> tag. Here’s where the example from the documentation is poor at best. With my miniscuel knowledge of Java, I believe that the example assumes that the property "rating" has been set using java or even jsp somewhere in the page. But I’m trying to decorate static HTML files using a jsp decorator. I can’t just set a property.

In the OpenSymphony Forum I stumbled upon the answer. Not that this thread of discussion was about how to set up your navigation, but it gave me a clue into how to use the Meta tags to pass information to the decorator.

First I need to set up my meta tag in the page being decorated:

<meta name="currentPage" content="About Us"/>

The next thing to do is capture that information in my decorator using the <decorator:usePage /> tag along with some jsp code:

<decorator:usePage id="thePage" />
<% String pageName = thePage.getProperty("meta.currentPage");%>
<!–<%= pageName %>–>

The ID you give the page doesn’t matter, as long as you use the same ID in your jsp. I’ve added an HTML commented output of the pageName, now when you view the source from your browser you can see exactly which page is being decorated. In this case the comment would look like this:

<!–About Us–>

Now all you need to do is set up your navigation to look something like this:

<div id="navigation">
  <ul>
    <li <%if (pageName.equals("Home")) {%>class="active"<% } %>><a href="/">Home</a></li>
    <li <%if (pageName.equals("About Us")) {%>class="active"<% } %>><a href="/">About Us </a></li>
    <li <%if (pageName.equals("Contact Us")) {%>class="active"<% } %>><a href="/">Contact Us</a></li>
  </ul>
</div>

In my AppFuse app, I was able to cut my three different decorators down to only one. Maintenance is now much easier and I still get to keep my dynamic navigation.

Using css to center an image with position:absolute

Posted by & filed under Developer Blog.

I ran into an interesting problem yesterday while building a simple web page. I needed to cause the main image at the top of the page to do two things: 1) Be centered on a liquid layout page, so that no matter what size the window the image was centered. 2) "Float" above the design on it’s own z-index.

Of course to get the image to be on it’s own layer, it must be set to position:absolute; but once you give it an absolute position it loses all references to being centered.

I thought I had the solution at one point, until I tested it in IE and it was all wrong. After a few hours of struggling, I finally came up with what now seems like a simple solution:

Adding styles to the image itself was my mistake. In this case I had to wrap the image with a div and give it an id. I then applied the following styles to that div in my stylesheet:

#image {
  position:absolute;
  width: 100%;
  text-align: center;
}

The image itself doesn’t need any other styles.

Large tables inside of CSS two column layout causes problems

Posted by & filed under Developer Blog.

I’ve been dealing with a CSS problem for months. One that almost converted me back to using Table layouts instead of CSS (heaven forbid). Luckily, after many unsuccessful google searches and after much trial and error, I finally come up with a solution.

The problems occurs when you try to fit an extremely long table inside of a CSS layout. For example, you are designing a web based application that has a navigation bar on the left (column 1) and the main content on the right (column 2). In trying to be a good, upstanding, standards conforming citizen, you design the two column layout using css (see example).

Everything seems to be working properly, until that fateful moment in which you add a long table. The table is being used properly because it contains the budget report for this month, i.e. not for layout purposes. This long table creates a lot of problems with the typical two column CSS layout. The craziest part about this whole mess is that depending on which browser you are using completely different problems occur (see example in both IE and Firefox). As you can see from the example, our friend Internet Explorer causes the table to start below the last navigation link. Not only that, but anything above the table seems to disapear. What the devil is IE thinking you might ask? Good question. By viewing the same example in firefox, you will notice that the IE bug does not appear but the table does float right off the mainBody div, past the right border, and does not cause the mainBody to stretch with it’s contents. What the devil is FF thinking? Also a good question—fortunately I have a partial answer to this one.

Firefox, and many other standards friendly browsers will cause the table to bleed on outside the mainBody. As far as my Google research can tell me, this is a correct and standards compliant way to display our example. That’s as much as I know. So to combat the problem, if you are experiencing it, you can add a little <div> around your table and add the following style to it (see example):

overflow:auto;

Now for the IE problem. The simple solution to this problem, but the one that I cannot find documented anywhere on the web, is to place the following style on your navigation (see example):

position:absolute;

This will cause the navigation to "float" on a higher plane than the rest of the content and therefore the long table is unaffected by it. Because it appears within the container, it won’t lose it’s position unless you add other positioning styles such as top or left so you shouldn’t use them in this case.