On occasion a client will request a technical intervention to keep their users from right clicking on images to save them to their computer. There is no technique that can stop a sufficiently motivated user from this.
In this post I examine a few techniques and how users can get around them.
Disable context menu
You can attach an empty javascript handler to the oncontextmenu event to stop
the browser from showing the right click menu. This event can be attached to
the image itself or the entire page.
This is however a poor user experience. Browsers use the context menu to provide access to other useful features like navigation, translation, or definition. Blocking the context menu is heavy handed and annoying.
Workarounds
- Some browsers have settings to stop this behavior because it detracts from the user experience: the user is unable to access other features from the context menu
- Built-in browser development tools (F-12 tools) can remove the event handler
- Browser development tools can get direct access to the image itself
- A user can always take a screenshot
Invisible div on top of image
A developer can place an invisible div on top of the image. Right-clicking on the image really hits the invisible block and since the block is not an image, the browser does not prompt to save it.
This approach is used by Flickr, but ironically, even their web developers know
its not foolproof: the invisible div is called facade-of-protection.
Workarounds
- Browser development tools can remove the invisible div from the page. See a video of this workaround.
- Browser development tools can give direct access to the underlying image
- A user can always take a screenshot
Background image
Instead of placing an image element on the page, you could place a div with the desired size and use CSS to apply the image to the background of the div. Browsers do not prompt to save background images.
Workarounds
- Browser development tools can give access to the image through their CSS inspectors. Watch a video of this workaround
- A user can always take a screenshot
Flash
A final approach is to use a Flash video to show the image. Since Flash is a plugin, browsers usually allow the Flash video to determine what to show on the context menu.
However, this is the worst implementation technique covered in this post. It won’t work at all on mobile devices that don’t support Flash. Its not responsive or adaptive to different size screens. Many users turn off Flash because of its consistent security vulnerabilities.
Workarounds
- Users with the right tools can download the Flash file and extract the image from it
- A user can always take a screenshot.