Current version of saywire.com.

Current version of saywire.com.

Highlights

  • Among the first social Network for Minors
  • Live in 2007

Description

Saywire is one of the first social networks for minors complying in large part with COPPA. In fact, it was started even before the term social network came into common use. My company was hired to provide remote web application development services, both front and back ends. We set up and maintained the code repository and automated deployment into staging and production environments, including the ability to roll back if needed. We provided PHP and corresponding MySQL, HTML, and JavaScript for large portions of early versions of the web site and provided input on how best to use the Fusebox web application framework.

Technical

Early versions of saywire.com were based on Fusebox in a LAMP environment. We used Subversion as our code repository and incorporated a variety of client-side technologies (CSS2 and JavaScript).

 

Ambrosi & AssociatesHighlights

  • Simple, Fast Search Interface
  • Tab-delimited Text Export Option
  • Simplified Data Maintenance
  • Basic Security
  • Displays Other People in Same Department
  • Formats Data Suitable for Printing

Description

Created in 1999 and still in use today, the Employee Directory constitutes one part of the company’s intranet. All users are allowed to modify the data as needed. The system logs add/edit/delete activity for security purposes. The directory can be updated via the intranet or via FileMaker Pro directly and changes are reflected immediately.

Technical Info

Database: FileMaker Pro 4 Server with the Web Companion running on a Macintosh (OS 9).

People visiting your site can easily download or copy your copyrighted images without your permission using four different methods: hotlinkingright clickingscreen shots, and web archiving.

What follows is a description of each method including:

  • counter measures for inhibiting unauthorized copying
  • methods for circumventing the counter measures
  • potential incompatibilities / issues of implementing a counter measure
  • some of the system requirements for each counter measure.

Hotlinking

Description
Hot Linking is when someone sets the SRC attribute of an IMG tag to an image on your web site. Besides making it look like your images are on their web page, they also consume some of your allotted bandwidth.The following is an example of the HTML one would use to display an image from susansexton.com on their own web site.

<img src="http://www.susansexton.com/images/horse1.jpg" alt="" />
Counter Measures
Limit display of images to users who are visiting your site (your domain). This is accomplished by implementing two server-side technologies: Sessions and custom File Handler rules.

Sessions
When a user first visits your site, they are sent a cookie that uniquely identifies them. Before each image is sent to the browser, the system checks to see if the cookie has been set. If it has, the image is sent. If it hasn’t, no image is sent. This method requires users to view your images in the context of a web page on the first visit. From that point on, they can, theoretically, access the images directly by entering the image’s SRC attribute in their browser’s Location bar.
Custom File Handler Rules
This method can be modified so that images can only be viewed in the context of a web page. This is accomplished by telling the web server to handle image files using a custom script. The custom script looks for a unique key in the Session variable. If the key exists, the image is served. If not, it’s not.In practice, we set the key at the start of the page. The server then sends the image and destroys the key immediately after the image has been sent. If the key doesn’t exist, the images cannot be viewed and thus, cannot be viewed except in the context of a web page. This is accomplished in Apache by adding the following two lines to .htacces (for the directory you wish to protect):
Action blockhotlinking /hotlinkcheck.php
AddHandler blockhotlinking .jpg .jpeg

where hotlinkcheck.php is a PHP script that does what we’ve described.

Any anti-hotlinking counter measure incorporating both of these techniques will be very successful.

Circumvention Techniques
This technique can be circumvented by hacking the server, which is not the kind of activity people seeking to copy pictures are likely to engage in. This technique may also be circumvented by Web Archiving programs, but in our experience, if the script is written correctly, even these programs can be prevented from siphoning the images.
Potential Incompatibilites/Issues
Such a system makes designing the pages difficult because all images are “generated” on the fly and thus, cannot be viewed in the standard WYSIWYG HTML design program (such as Dreamweaver of GoLive). This system can be used, however, with automated image gallery creation tools such as iView Media Pro. Click here for more information. Also, users who don’t accept cookies will experience problems too. In fact, people with hotmail.com email accounts frequently experience problems since by default, Internet Explorer for Windows doesn’t allow framed documents from another domain to send cookies. The work-around is to include some JavaScript that breaks your site out of frames (keeps your site from being framed by someone else).

System Requirements

Server-side
 Any server that can be configured to handle image files using a custom script or with some sort of server-side scripting capabilities.This system does not require the GD library but could benefit from having it available.
Client-side
Cookies are used by default, but the system can be configured to use a transparent ID in cases where cookies are not allowed.

Right Clicking

Description
Users can right click on an image and choose to save it on their computer. This is the same as dragging the image to the desktop.
Counter Measures
There are four counter measures that can be used to inhibit right clicking or dragging and dropping of images: Spacer w/ Background Image, JavaScript Hide Source, Microsoft Meta Tag, and A Thousand Images. These counter measures can be used together or separately as they each address a different aspect of the right click feature.

Spacer w/Background Image
This is my personal favorite technique because it is widely supported, does not require any special JavaScript, fools most attempts at copying the image, can be used in a WYSIWYG HTML editor, and when used in conjunction with the hotlinking counter measures, is nearly foolproof. Basically, each image is displayed as a transparent GIF whose size and background image is set to the image you want to display. The result is that the user sees the image as she normally would, but when she tries to right click to save the image, she ends up saving the clear GIF rather than the actual image.
JavaScript Hide Source
Using JavaScript, the functionality of the right mouse button can be altered to prohibit downloading of images. It can also be used to hide the source code of a page so that the user can not navigate directly to the image outside the context of the actualy page. Because this is a very complicated topic, no examples of how to do this are provided here. Regardless, here are a couple of links in case you’re interested: hide source code and disable right click.
Microsoft Meta Tag
This doesn’t really disable right clicking, but it does disable the Microsft “Image Bar” that appears when Internet Explorer (version 6) users hover their mouse over an image. Simply put this code in the HEAD element of your web pages:
A Thousand Images
Adobe ImageReady (the web companion to Photoshop) allows you to slice images up into little pieces. You could slice each image up into individual pixels making it very time consuming to download each pixel and recreate the image. This may be more practical than it seems…
Circumvention Techniques
To view the source of a page that is using JavaScript to hide the source, you can either enter this into the location bar and press Enter: java script: alert ( document.body.innerHTML ); or you could visit the site with Mozilla and use the DOM Browser to view the source code as a Document Object Model tree (and thus see the SRC attribute of the image you are after) to get at the image directly.To view an image that is being protected by an invisible GIF (the first method on this page), just look at the source and point your browser to the actual image you wish to download (and the image will appear in isolation in its own window).There is no way, that I’m aware of, to circumvent the capturing of an image that’s been split into a thousand pieces, except downloading them one by one.
Potential Incompatibilites/Issues
Incompatible JavaScript versions: It is very, very difficult to write JavaScript code that works the same on all browsers and platforms. In all likelihood, any script you find or write yourself, will fail in one environment or another. Incompatible CSS/browser: Not all browsers will know how to display background images. Failure to do so means the users won’t see your image.
System Requirements
In any situation where JavaScript is required, you must include the tags with some sort of content that explains why JavaScript is needed.Similarly, you may need to test wheter or not Cascading Style Sheets in enabled before displaying your page, if you want to be sure that your visitors see what you intend.

Screen Shots

Description
The user presses PrtScr (Print Screen) on Windows or Command+Shift+3 (or 4) to capture the computer display as a separate image. On Windows systems, the screen is on the clipboard and needs to be pasted into an application before it can be viewed. On the Macintosh, the screen is saved as a file on the user’s desktop, usually named Picture 1.pdf.There are a variety of system utilities that also provide this functionality and it is important for people reading this to understand that it is very valuable to be able to take a picture of your screen and share it with someone else.
Counter Measures
Counter measures for this method are virtually impossible. This is because web pages have very limited access to controlling, or even being cognizent of when certain keys are pressed. You could, conceivably, swap the image out for a blank image whenever a key is pressed. Because this counter measure relies on JavaScript, you have to content with everything that entails (browser compatibility, noscript fallback tags, etc.)
Circumvention Techniques
Even if you could disable all keys and mouse activity, the visitor could write a script that opens their browser, goes to your page, and executes a screen shot, all without touching any of the keys or the mouse. This seems extreme, but it hints at the limited capabilities of browsers to control what their owners do.
Potential Incompatibilites/Issues
JavaScript implementations across browsers and platforms.
System Requirements
In any situation where JavaScript is required, you must include the tags with some sort of content that explains why JavaScript is needed.

Web Archiving

Description
Users save the page as a Web Archive (a self-contained version of the entire page, including all images) or print the page (or save it as a PDF).
Counter Measures
Same as Screen Shots, but even more limited; display image in modal window using a Java applet or Flash.
Circumvention Techniques
It depends on what kind of counter measure is used, but usually, taking a screen shot can circumvent them.
Potential Incompatibilites/Issues
Many people like to use Flash as the “player” for their images because it protects their images rather well (by disabling many of the methods, except for screen shots, listed on this page). For the most part, Flash is widely suppported (available on most computers). For people who use Java or who don’t have the Flash player installed, however, it can mean that they don’t see anything at all.
System Requirements
Depends on the method…