Disable inspect element, disable download image without app only coding

mohamedmo · ‎04-15-2020

Hey There,
I'd like to disable all the ways to access Inspect Element such as "Right Click, F12, Ctrl + Shift + I, Ctrl + Shift + J, Ctrl + U, and also I'd like to hide my Gif Url form the source page too finally can I hide CDN URL.
Thanks

Visely-Team · ‎04-16-2020

You can't do that. There is a way to prevent the right-click so the context menu doesn't show up, but that would be it. You can do nothing about the URL and content, so if you are sensitive about your assets being "stolen" add watermarks to your images.

Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog

TroWul · ‎10-15-2020

@Visely-Team What about using the code from this site, should it not be possible?

https://www.codingtag.com/how-to-disable-inspect-element

tony5280 · ‎10-15-2020

Let's be clear about something here: if a user goes to a webpage and see an image, it's already been downloaded to their computer.

You can spend as much time as you want trying to hide and obfuscate images, and there will still be someone who can get around it. I had a client once who was a NYT bestseller, and a bit eccentric. He too, wanted his images "unstealable." We did all kinds of gymnastics, and as soon as his people couldn't figure it out was when we were done. Quite the black hole, but at least he had deep pockets.

A note of caution: if your intended audience is of a highly technical persuasion, such efforts can actually turn people away–merely the attempt betrays a misunderstanding that a technical brand can hardly afford to project.

Spac-es · ‎05-22-2023

Hello there!

To disable the right click in your Shopify store add the following code in theme.liquid and paste it at the end of the document, before the <head>

	<script type="text/javascript">
		document.onkeydown = function (event) {
		     event = (event || window.event);
		     if (event.keyCode == 123 || event.keyCode == 18)
		     {
		           return false;
		     }
		}
		document.addEventListener('contextmenu', event => event.preventDefault());
	</script>

I hope it has been helpful for you. Mark it as a solution, thank you very much!

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!

Spac-es · ‎05-22-2023

❗BONUS❗

You can still drag the image to another new tab, how can I make the image not draggable?

Add the following code if you want to prevent this:

<style>
    img {
        pointer-events: none;
    }
</style>

Like! 👍

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!

Kay39 · ‎11-20-2023

Thank you so much, both codes worked great for me!!

ARCHBISHOP · ‎06-28-2024

Hey! This script works great, thank you very much.

Would you happen to know how to prevent dragging and dropping image thumbnails by any chance? I can still drag and drop those to a new tab to find the raw images. I'm talking about products with multiple product images 🙂

Spac-es · ‎06-30-2024

Add !important

<style>
    img {
        pointer-events: none !important;
    }
</style>

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!

ARCHBISHOP · ‎06-30-2024

Thank you for the suggestion! Unfortunately, it doesn't seemed to have changed anything on the front end. I will have to do some more research to see if I can figure this out... Everything else is working as intended, though, which I am very grateful for!

Spac-es · ‎07-02-2024

You can try adding this more specific code within your theme.liquid file.

You can add the CSS within the <head> section and the JavaScript before the closing </body> tag to ensure that all the page content has loaded before the script runs.

CSS

    <style>
        img {
            -webkit-user-drag: none;
            user-drag: none;
        }
    </style>

JavaScript

    <script>
        document.addEventListener('DOMContentLoaded', (event) => {
            const images = document.querySelectorAll('img');
            images.forEach(img => {
                img.ondragstart = () => {
                    return false;
                };
            });
        });
    </script>

I'm glad the rest of the changes worked for you! 😎👌

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!

ManuelH · ‎03-19-2024

you can also inhibit the other options for opening devtools using the following code:

function ctrlShiftKey(e, keyCode) {
return e.ctrlKey && e.shiftKey && e.keyCode === keyCode.charCodeAt(0);
}

document.onkeydown = (e) => {
// Disable F12, Ctrl + Shift + I, Ctrl + Shift + J, Ctrl + U
if (
event.keyCode === 123 || event.keyCode == 18 ||
ctrlShiftKey(e, 'I') ||
ctrlShiftKey(e, 'J') ||
ctrlShiftKey(e, 'C') ||
(e.ctrlKey && e.keyCode === 'U'.charCodeAt(0))
)
return false;
};
</script>

Disable inspect element, disable download image without app only coding

Disable inspect element, disable download image without app only coding

Community Blog Articles