I'm making a website and I wanted to make it so that if you were visiting the main page (index.html), you can view the images when they're loaded, but when you go to the file, it is not viewable. I'm using netlify because It's relatively easy. I was thinking of making a directory called the same as the file so that the index.html file can retrieve the image, but that doesn't work because you can't create a folder with the same name as a file. And if you put a space at the end, that folder isnt retrieved (at least when i tested it on a localhost it didnt). I know this question was asked here, but it wouldn't really work for my use case scenario. If anyone can help, that would be great.
Thanks!
EDIT: Alright, so I've tested some stuff out with Live Server. Essentially, If I create a new file called test1.html, and another with test2.html, if test1 has some code to check whether the page is in an iframe, and test2 displays that iframe, I can restrict access.
<!--Test 1 Code:-->
<html>
<head>
<script>
if ( window.location !== window.parent.location ) {
console.log('The page is in an iframe, continuing.')
} else{
location.replace('403.html')
}
</script>
</head>
<body>
<h1>test</h1>
</body>
</html>
<!--Test 2 Code:-->
<iframe src="test1.html" height="100%" width="100%" frameborder="0"></iframe>
Now obviously this solution isnt PERFECT, but it's the best I can do. I'll simply link a repo or some file hosting to actually display the image. Lastly I'll make it so on right click, nothing happens.
