HTML / webserver question ??

Discussion in 'Mac Apps and Mac App Store' started by 5300cs, Oct 6, 2003.

  1. 5300cs macrumors 68000

    5300cs

    Joined:
    Nov 24, 2002
    Location:
    japan
    #1
    Let's say I wanted to keep people from right-clicking anywhere on my website (to save images, for example.) How would I go about disabling this? Is this server side or a little Javascript magic?

    Thanks in advance.
     
  2. edesignuk Moderator emeritus

    edesignuk

    Joined:
    Mar 25, 2002
    Location:
    London, England
    #2
    Just a little client side JavaScript does the trick, try this one:
    Code:
    <script>
    // DISSABLE RIGHT CLICK - START SCRIPT
    if (window.Event)
      document.captureEvents(Event.MOUSEUP);
     
    function nocontextmenu()
    {
     event.cancelBubble = true
     event.returnValue = false;
     
     return false;
    }
     
    function norightclick(e)
    {
     if (window.Event)
     {
      if (e.which == 2 || e.which == 3)
       return false;
     }
     else
      if (event.button == 2 || event.button == 3)
      {
       event.cancelBubble = true
       event.returnValue = false;
       return false;
      }
     
    }
    document.oncontextmenu = nocontextmenu;
    document.onmousedown = norightclick;
    // DISSABLE RIGHT CLICK - END SCRIPT
    </script>
    
     
  3. 5300cs thread starter macrumors 68000

    5300cs

    Joined:
    Nov 24, 2002
    Location:
    japan
    #3
    hmmm... I may be putting it the wrong place within the index.html file. Where exactly should this go?

    (and thanks for the code :) )
     
  4. edesignuk Moderator emeritus

    edesignuk

    Joined:
    Mar 25, 2002
    Location:
    London, England
  5. 5300cs thread starter macrumors 68000

    5300cs

    Joined:
    Nov 24, 2002
    Location:
    japan
    #5
    grrr... it's not working :mad:

    what am I doing wrong ??
     

    Attached Files:

  6. robbieduncan Moderator emeritus

    robbieduncan

    Joined:
    Jul 24, 2002
    Location:
    London
    #6
    What browser are you testing with. In my experience these scripts that disable context menus only work in IE (and often only IE/Win). This is because the oncontextmenu is not part of the standard (iirc) and the onmousedown event is not fired on the document object (or perhaps that the onmousedown is not inherited by the images that are children of some elements in the DOM tree back up to the document object).

    Thinking about it the DOM explanation seems most likely. You have a structure something like

    Code:
    document
     + head
     ...
     + body
        + p
         ....
        + image
    
    
    You attach the mouse handlers to the document object. Handlers are not an inherited property so they do not attach to it's children. As the image is on top of the document (sort of I realise it's actually contained by it) it gets the mouse events and does not pass them on.

    Personally I find this sort of tampering with the expected UI of an app on my computer very annoying to say the least. It also takes very little to get round (view source? or open the document properties in OmniWeb).
     
  7. robbieduncan Moderator emeritus

    robbieduncan

    Joined:
    Jul 24, 2002
    Location:
    London
    #7
    OK I have thought of one really ugly way of stopping right clicks from effecting images anywhere on the page but still allowing things like back and forward from the context menus.

    Create a gigantic DIV that covers the whole page (absolutly positioned) that is forced to be on top of all other elements (z-index) and is transparent. It will get ALL mouse clicks!

    Of course you will not be able to select any text on the page...
     
  8. robbieduncan Moderator emeritus

    robbieduncan

    Joined:
    Jul 24, 2002
    Location:
    London
    #8
    I have made this a little better. See the example below:

    Code:
    <html>
    <head>
    </head>
    <body>
    <div style="border:1px solid black;width:200px;height:200px;">
    <div style="border:0px;width:200px;height:200px;z-index:0;">
    <img src="http://a1600.g.akamai.net/7/1600/51/63d2ba975a17f6/www.apple.com/macosx/images/jagbox06232003.jpg" width="200" height="200">
    </div>
    <div style="border:0px;width:200px;height:200px;z-index:1;background:transparant;position:relative;left:0px;top:-200px;"><!-- This div protects the image --></div>
    </div>
    </body>
    </html>
    
    How this works: Basically it puts a div that you can't see over the top of your image. As the div gets all the mouse clicks your image cannot be clicked on with the right mouse button. You could easily expand this to a JavaScript function and a set of defined images that protect the image from the casual view source user as well.

    You need to replace the 200px by the correct width and height for the image being protected. Obviously you need to replace the relative offset of -200 with your height as well.
     
  9. robbieduncan Moderator emeritus

    robbieduncan

    Joined:
    Jul 24, 2002
    Location:
    London
    #9
    Sorry to everyone who doesn't care about this thread and thinks I've posted to it enough already! I have turned this into a little includable JavaScript file that you can use on your sites. I'm releasing it under the GPL so you can use it for free :)

    Get it here http://www.robbieduncan.net/projects/web/imageprotector/index.html
     
  10. Cuckoo macrumors 6502

    Joined:
    May 2, 2003
    Location:
    The Netherlands - Utrecht
    #10
  11. robbieduncan Moderator emeritus

    robbieduncan

    Joined:
    Jul 24, 2002
    Location:
    London
    #11
    You have not missed the point! I obviously need to look into what is different in the way IE handles the nested layers/ objects on the screen compared to Safari. Perhaps I can add some handlers to the overlay div to deal with IE/Win...

    Just tried IE/Mac. The protection worked on that too. I'll give IE/Win a try now...
     
  12. edesignuk Moderator emeritus

    edesignuk

    Joined:
    Mar 25, 2002
    Location:
    London, England
    #12
    Very nice robbie, it also does work under Firebird (Windows), but as Cuckoo said, it doesn't seem to work under IE 6. The image even aligns differently, in IE it is centered on the page, in Firebird it is on the left, maybe that has something to do with it?
     

    Attached Files:

  13. mrjamin macrumors 65816

    mrjamin

    Joined:
    Feb 6, 2003
    Location:
    Strongbadia
    #13
    its impossible to stop people looking at your code - most (if not all) browsers have a "view source" link from one of the main menus. probably the best way to stop people from snooping around its to get rid of all whitespace and line breaks in the code so its all on one line. Yeah, it might be a pain to edit but thats the idea!

    As for your images, try digitally watermark'ing them?

    Putting a polite notice on the site saying that you'll sue any ass that half-inches your pix is the best way to stop people from pilfering stuff.

    There's no 100% reliable way of protecting your images as afterall, people can always do a screenshot and manipulate that!
     
  14. robbieduncan Moderator emeritus

    robbieduncan

    Joined:
    Jul 24, 2002
    Location:
    London
    #14
    I think it should be centered on everything (although this could be throwing in off actually). I did notice that the centering was not working but thought nothing of it. I'll try taking out the centering...

    Took off the centering but still no dice. I'll look into this another day! I think that the events are bubbling through somehow.
     
  15. edesignuk Moderator emeritus

    edesignuk

    Joined:
    Mar 25, 2002
    Location:
    London, England
    #15
    Very true, but the average joe wouldn't know what the hell they were looking for in the source code.
     
  16. robbieduncan Moderator emeritus

    robbieduncan

    Joined:
    Jul 24, 2002
    Location:
    London
    #16
    That's why everything is loaded from external JavaScript files (including the image location). Your average joe will not know what to do with this.
     
  17. 5300cs thread starter macrumors 68000

    5300cs

    Joined:
    Nov 24, 2002
    Location:
    japan
    #17
    Yeah, I had some pics I'd like to put on my site, but I don't want people DLing them .. I suppose the logical thing to do would be just not uploading them in the first place. I went to a site a long time ago though, where when one right-clicked anywhere on the page, it popped up a message box with only an 'OK' button on it. I wanted to do that, so I thought it was a Javascript thing. But then as you said, there's always a screen-grab :(
     

Share This Page