Protecting Website Copyrighted Content
Tags: webdev, drm
Published: 2021-03-09 03:30:22

Protecting your website's copyrighted content is tricky. Let's see how it's done! 👀

_Cover by [Jeremy Thomas](https://unsplash.com/@jeremythomasphoto?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/space?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText). This article is available in Arabic on my [blog](https://iamnabil.netlify.app/tutorials/2021-03-08-drm-website-content-protection)_.

Bottom line is no matter how many scripts you load, events you prevent, authentication layers you add, users will always be able to redistribute your content online. Our goal is to reduce the number of users who can achieve this to a percentage we can handle manually. 

In this article, I'll be talking about _DRM_ and _Forensic Watermarking_.

# Digital Rights Management (DRM) 
DRM tools are a set of access control technologies for restricting the use of proprietary hardware and copyrighted work. The set of tools we'll look at today relate only to the web development side of it. 

DRM encryption is the encryption of content such as videos and images to prevent others from using it. This is two-way encryption. Given a key, you can decrypt the contents of said content. 

The usual flow is you begin by registering a user, verifying their identity using some payment method, and then granting them access to the encrypted content and the key for that content, thus granting them a license to access that content. The browser then proceeds to decrypt the content on the user's machine to output a valid representation that can be displayed on a webpage. 

Currently, the _Encrypted Media Extensions API_ handles that. For it to work you need to have a browser that supports the EME API, a packaging service to encrypt your content, a DRM key generation service, and a _Content Decryption Module_ (CDM) for client-side decryption. The EME API allows you to interact and define CDMs for your application.

This procedure is used by Netflix, Spotify, and others. But there's a twist. Each browser supports a specific DRM service. So you need to make a copy of the original content for each service the browsers that you support can work with. 

> In general, Widevine is supported by Firefox, Chrome, and Opera, PlayReady is supported by IE/Edge, and FairPlay is supported by Safari.

There's another twist! Once a user has access to your DRM content, they'll be able to redistribute it! Recall that DRM decryption takes place on the user' machine, and so with the proper software they'll be able to output a simple decrypted file to redistribute. This is where Forensic Watermarking comes into the picture! 

# Forensic Watermarking
Watermarking is the process of adding some information to media. Things like logos, source distributor, etc. But how can something like this benefit us in preventing the redistribution of our content? 

Forensic Watermarking is the process of embedding special hidden information about a user in the media itself. Most forensic  techniques use footprints left on media to predict the history of the media. 

This can be used to detect the user who redistributed a video on the web. Think of it like inspecting a website. You can inspect the media to check the username of the user who redistributed that media, and then decide what to do. This includes legal action.

But there's another twist. Media degrades after operating on it a few times. This can damage the embedded information over time. Users can just record their screen in the case of video, their system's audio output in the case of audio, etc. You won't be able to detect that. 

The point of all of this is to reduce the ability of a user to redistribute the content, and this *will* successfully reduce the percentage of users who have the hardware and software to accomplish this, limiting the number of users to a handful you can manually deal with. 

This is more of a forensics thing, and I'm a frontend developer. Hopefully I made it clear enough! If you spot any errors please point it out! 👀

Thanks for reading! You can follow me on [Twitter](https://twitter.com/kl13nt), or read more of my content here or on my [blog](https://iamnabil.netlify.app/blog)!

Sources:
- [W3C Encrypted Media Extensions](https://w3c.github.io/encrypted-media)
- [How Netflix Protect Their Content](https://medium.com/pallycon/how-netflix-protects-contents-part-1-a40508ed0001)
- [Encrypted Media Extensions API MDN](https://developer.mozilla.org/en-US/docs/Web/API/Encrypted_Media_Extensions_API)
- [DRM and Authentication MDN](https://developer.mozilla.org/en-US/docs/Plugins/Flash_to_HTML5/Video/DRM_and_authentication)
- [DRM (Wikipedia)](https://en.wikipedia.org/wiki/Digital_rights_management)