How do you prevent "Save as.." function like Namecheap does?

Solved
PavelBelsky
Tourist
7 0 0

Priviet, Shopify Community!

Disclaimer:
I understand that it's not really possible to stop all forms of piracy, it can always be copied one way or another, but at least prevent this simple technique?

Question:
How to prevent your whole site to be downloaded by right-clicking the page and clicking "Save as.."

So with Shopify, it's possible to just right-click any Shopify store, and click "Save as.." This would save all the files on that page to your desktop, which you can upload to your own website and essentially steal everything with the smallest effort possible.

Namecheap prevents this, but how?

Example:
1. Go to https://www.namecheap.com/promos/coupons/

 

2. Right-click the site (I'm using google chrome)

3. Click "Save as.."

4. Save to your PC.

5. When you open the HTML file, it is completely ruined, so it's not as easy to steal their content.

Attachments showcasing what I mean:

Original site: 
1.png

After it's copied with "Save as.." function:
2.png

Is it possible to implement this into my theme, so people cannot save my site with 1 click?

~ Pavel Belsky
Accepted Solution (1)

Accepted Solutions
RobDukarski
Shopify Partner
88 15 17

This is an accepted solution.

@PavelBelsky 

 

You can block the context menu from displaying for some web browsers by adding a line of JavaScript to your "layouts/theme.liquid" file like this:

 

 

<script>document.addEventListener('contextmenu', (event) => { event.preventDefault(); });</script>

 

 

Though you should not do that because it prevents those that use the context menu to open in a new tab or window from easily doing so..

 

Also, the reason why Namecheap looks like it does is because they were probably using relative URLs for files so if those files did not get downloaded then the cannot be found to use for styling/functionality.

 

Hope that helps!

- Rob Dukarski
Helping to make commerce better for everyone!

View solution in original post

Replies 3 (3)
RobDukarski
Shopify Partner
88 15 17

This is an accepted solution.

@PavelBelsky 

 

You can block the context menu from displaying for some web browsers by adding a line of JavaScript to your "layouts/theme.liquid" file like this:

 

 

<script>document.addEventListener('contextmenu', (event) => { event.preventDefault(); });</script>

 

 

Though you should not do that because it prevents those that use the context menu to open in a new tab or window from easily doing so..

 

Also, the reason why Namecheap looks like it does is because they were probably using relative URLs for files so if those files did not get downloaded then the cannot be found to use for styling/functionality.

 

Hope that helps!

- Rob Dukarski
Helping to make commerce better for everyone!
PavelBelsky
Tourist
7 0 0

@RobDukarski 

Thank you Rob. Would it be possible to use relative URLs for files such as images and svgs on Shopify? 

~ Pavel Belsky
RobDukarski
Shopify Partner
88 15 17

@PavelBelsky 

 

Not to my knowledge. They are hosted via Shopify's CDN which I believe is separate from the rest of the layouts/templates/sections/snippets.

 

If CSS, JS, and HTML are within the "assets" directory you may be able to use relative URLs from there but it is not something I have tested.

 

Frankly there's not much you can do about someone wanting to copy the output of a web page. They cannot get the Liquid code as far as I am aware but whatever loads within their web browser they could try to download. (I believe some servers can block downloads or hot-linking images, or essentially replace downloads or images with different files when someone tries to download or hot-link them but I do not believe you have that luxury with hosted Shopify.)

 

Hope that helps!

- Rob Dukarski
Helping to make commerce better for everyone!