Liquid, JavaScript, themes, sales channels
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
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.
@Visely-Team What about using the code from this site, should it not be possible?
https://www.codingtag.com/how-to-disable-inspect-element
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.
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!
❗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! 👍
Thank you so much, both codes worked great for me!!
you can also inhibit the other options for opening devtools using the following code:
<script type="text/javascript">
document.addEventListener('contextmenu', (e) => e.preventDefault());
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>
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024