Using CSS to Thwart Content Theft

CSS Vinyl
Creative Commons License photo credit: tiagonicastro

Mikey, a contributor at Rusty Lime, recently posted a very interesting idea for deterring content theft or at least frustrating those who would lift your articles.

The basic premise is to use CSS trickery to ensure that would-be plagiarists pick up an image or a block of text, one that most likely denounces the theft or provides a link back to the original site, even though readers of the original site see nothing at all.

It’s a simple idea that that could deter or mitigate against content theft issues and may help some Webmasters add an extra layer of protection against such misuse.

However, as simple as the system is, it does have a critical flaw that greatly limits its usefulness, especially for bloggers.

The Premise

The actual idea behind the technique is strikingly simple.

Cascading Style Sheets (CSS) can instruct Web browsers how to display a certain item on a page. Whether it is an image, a block of text or something else altogether, CSS can be used to determine the position, size and other variables of it.

However, CSS can also be used to completely hide an element, by simply adding the following line to your site’s CSS file and changing the class name to whatever you desired.

.hiddenclass { display:none; }

From then on, anything you want to hide from your visitors, you simply add the class name to the appropriate tag. For example, to hide an image, you might use this code.

<img decoding="async" class="hiddenclass" src="https://www.yoursite.com/hiddenimage.jpg" alt="" />

This will keep the visitors on your site from seeing the content but, should anyone scrape the HTML code, they will not have matching CSS code on their site, causing the image or text to appear.

Theoretically, this can be used to provide attribution to your own site only on pages that misuse the content. It is a potentially great way to punish spammers without putting any burden on legitimate users.

However, there is an issue with the technique that could make it impractical for many sites.

Fly in the Ointment

As exciting as the idea is, the problem is with publishing via RSS feed. The issue is that RSS readers do not have the ability to interpret CSS and, as such, anyone viewing the content over the feed would see the “hidden” content as well.

One could remove the hidden content from the RSS feed, but that would make the technique useless against RSS scraping, which is the most common form of unwanted republication taking place.

This means that, anything you place in the hidden content needs to be something that can comfortably be displayed in the RSS feed as well. meaning that it is something users of the site will continue to see whatever you are trying to hide.

This prohibits you from using strong content theft warnings and other devices that might be tempting to use.

Illustrating the Problem

To help illustrate this point. I’ve added a special class to my site’s CSS file that will hide certain images. Below, I’m going to display the Plagiarism Today logo twice, first without and second with the CSS class.

Begin Visible

End Visible

Begin “Hidden”

End “Hidden”

If you are viewing this article actually on the site itself, the second image will be hidden and nothing will appear between teh two lines. However, if you are reading it on the RSS feed, you should see the image twice.

This is a recurring problem for me on this site as I use CSS attributes to position the inline images on the site but have to continue to add other code to ensure that they display right when viewed in RSS readers.

Either way, please leave a comment on your experience with this test, what RSS reader you are using and what the outcome was.

Conclusions

There are potential uses for this system. It could be especially useful in environments where you can edit CSS files but not add plugins or otherwise manipulate the RSS feed. It may also help with situations where HTML scraping is a bigger concern than RSS scraping.

For most, this technique will not be very useful but it is still a clever idea that might help some Webmasters better protect their content.

Even though it won’t do anything to actually stop the plagiarist or other rip off artist from using the work, it can mitigate against the damage that they do and add a little bit of frustration to the lives of a plagiarist.

Of course, until RSS feed get better support for CSS, this solution will always be an incomplete one. However, it still is a trick worth keeping in mind, if nothing else in case it becomes useful some day down the road.

Want to Reuse or Republish this Content?

If you want to feature this article in your site, classroom or elsewhere, just let us know! We usually grant permission within 24 hours.

Click Here to Get Permission for Free