HTML Forum

**wayfarer07** · 12:55 PM

PART I: Useless Advice

For some odd reason, people are always asking here how they can stop people from stealing their HTML and/or hide it in a way that people cannot take it. Although I believe the question is rather pointless, as there is little reason to do so. Anyone who is smart enough to put your code to use is going to find a way to steal it if they want to, no matter how it is obfuscated.

Despite that, I was bored today, between cups of coffee, and invented a means of encrypting HTML via a few JavaScript functions. I thought maybe I would use it to confuse the source of templates so that anyone unskilled enough to actually want to steal my code would be confused by my simple trick. And it would be browseable instead of a JPEG.

Ok, I must admit, the encryption is 100% decipherable, and not that hard to do either.

PART II: A Pointless Contest

Ok, first person to decipher the code and produce the original HTML wins Talkupation Points!

Here is the link: The Event Planner
This is just a single-page HTML mockup I did some time ago...
Ready... set... go...

**bas** · 02:03 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<HTML XMLNS="http://www.w3.org/1999/xhtml" >
  <HEAD>
    <META HTTP-EQUIV="Content-Type"  CONTENT="text/html; charset=utf-8" >
    <TITLE>Alexandra Rose Lee - Unique Weddings and Creative Occasions</TITLE>
    <LINK HREF="css/master.css"  REL="stylesheet"  TYPE="text/css" >
  </HEAD>
  <BODY ID="insert" >
    <DIV ID="ribbon" ></DIV>
    <DIV ID="top" ></DIV>
    <DIV ID="wrapper" >
      <DIV ID="page" >
        <DIV ID="header" >
          <UL ID="nav" >
            <LI>
              <A HREF="#" >Home</A>
            </LI>
            <LI CLASS="dot" ></LI>
            <LI>
              <A HREF="#" >About Us</A>
            </LI>
            <LI CLASS="dot" ></LI>
            <LI>
              <A HREF="#" >Services</A>
            </LI>
            <LI CLASS="dot" ></LI>
            <LI>
              <A HREF="#" >Testimonials</A>
            </LI>
            <LI CLASS="dot" ></LI>
            <LI>
              <A HREF="#" >Pricing</A>
            </LI>
            <LI CLASS="dot" ></LI>
            <LI>
              <A HREF="#" >Contact Us</A>
            </LI>
          </UL>
        </DIV>
        <DIV CLASS="main" >
          <H1>Professional Event Planning</H1>
          <P>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas pellentesque. Phasellus leo tellus, euismod at, pulvinar quis, condimentum non, dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum pulvinar purus vel elit. Duis convallis. Suspendisse sollicitudin, sapien a posuere vulputate, libero ligula congue ipsum, ac aliquet felis tortor hendrerit neque.</P>
          <P>
            Phasellus quis dui. Duis nulla. In a dolor. Curabitur venenatis purus eleifend nulla. Morbi et orci. Etiam lacinia, lectus vitae tristique dictum 
            <A HREF="#" >felis facilisis dui</A>
             ut congue nibh tellus ac lectus. Morbi malesuada justo quis odio lacinia volutpat. Fusce non mi quis lectus elementum vestibulum. Aenean eget erat.
          </P>
          <P>
            <Q>
              <EM CLASS="slogan" >It is my promise to give every client, on any budget, an elegant affair and the event they have always dreamed of.</EM>
            </Q>
          </P>
          <P>
            <EM CLASS="name" >~ Alexandra Rose Lee</EM>
          </P>
        </DIV>
        <DIV CLASS="secondary" >
          <IMG SRC="/images/pic01.jpg"  ALT="presentation" >
        </DIV>
      </DIV>
    </DIV>
     
    <!--end of wrapper-->
    <DIV ID="bottom" ></DIV>
    <DIV ID="footer" >
      <DIV CLASS="inner" >
        <UL ID="footnav" >
          <LI>
            <A HREF="#" >Home</A>
          </LI>
          <LI>|</LI>
          <LI>
            <A HREF="#" >About Us</A>
          </LI>
          <LI>|</LI>
          <LI>
            <A HREF="#" >Services</A>
          </LI>
          <LI>|</LI>
          <LI>
            <A HREF="#" >Testimonials</A>
          </LI>
          <LI>|</LI>
          <LI>
            <A HREF="#" >Pricing</A>
          </LI>
          <LI>|</LI>
          <LI>
            <A HREF="#" >Contact Us</A>
            <BR>
          </LI>
          <LI>Copyright 2008 Alexandra Rose Lee. All Rights Reserved.</LI>
        </UL>
        <A ID="bbb"  HREF="#" >
          <IMG SRC="/images/bbb.jpg"  ALT="Better Business Bureau" >
        </A>
        <A ID="bridal"  HREF="#" >
          <IMG SRC="/images/bridal.jpg"  ALT="Association of Bridal Consultants" >
        </A>
      </DIV>
    </DIV>
  </BODY>
</HTML>

ok?

**wayfarer07** · 08-06-2008, 02:12 PM

Not hard eh? Although I didn't have all that capitalization in my code to begin with...

**andrei155** · 08-06-2008, 05:35 PM

... does the capitalization matter? He can now use the code for whatever he wants.... he won.

+talkupation from me too.

**wayfarer07** · 06:34 PM

@bas:
May I ask how you did it? (I can think of a few ways, but not sure how all that got capitalized...)
@andrie155:
Capitalization matters to the validator when XHTML documents are concerned (they are supposed to be all lowercase), but not to the browser, as far as I am aware. Lowercase is simply more readable, which is why I like it better.

**chrishirst** · 08-06-2008, 09:10 PM

Internet Exploder and a "Save As ..." puts ALL tags into UPPER case regardless of DTD.

**bas** · 08-07-2008, 10:19 AM

Quote:

Internet Exploder and a "Save As ..." puts ALL tags into UPPER case regardless of DTD.

You wont get the "original code" by doing "Save As ...", you just get the ciphered verion then.

Actually I was browsing with Opera,
so I clicked on "DOM Snapshot". It took me 15 seconds to post!
10 to find the "DOM Snapshot" button :P , 4 to change the URLs again (by posting all the image urls where changed to something like *webmaster-talk.com/images/*).

**Danaldinho** · 08-07-2008, 10:39 AM

Quote:

Originally Posted by wayfarer07

PART I: Useless Advice

For some odd reason, people are always asking here how they can stop people from stealing their HTML and/or hide it in a way that people cannot take it. Although I believe the question is rather pointless, as there is little reason to do so. Anyone who is smart enough to put your code to use is going to find a way to steal it if they want to, no matter how it is obfuscated.

Despite that, I was bored today, between cups of coffee, and invented a means of encrypting HTML via a few JavaScript functions. I thought maybe I would use it to confuse the source of templates so that anyone unskilled enough to actually want to steal my code would be confused by my simple trick. And it would be browseable instead of a JPEG.

Ok, I must admit, the encryption is 100% decipherable, and not that hard to do either.

PART II: A Pointless Contest

Ok, first person to decipher the code and produce the original HTML wins Talkupation Points!

Here is the link: The Event Planner
This is just a single-page HTML mockup I did some time ago...
Ready... set... go...

You'll have to show us how to do that, that is very clever

**wayfarer07** · 08-07-2008, 10:53 AM

All I did was make each line in the HTML an item in a JavaScript array, then cycle through each item, inserting it into the DOM. I then compressed the JavaScript with this compressor., selecting both "Base62 encode", as well as "Shrink variables".

**dewaji** · 08-07-2008, 03:04 PM

Quote:

Originally Posted by wayfarer07

Capitalization matters to the validator when XHTML documents are concerned (they are supposed to be all lowercase)

Is valid page still important right now ?

**wayfarer07** · 04:37 PM

It isn't important to me that my pages always be 100% valid, and it doesn't matter to browsers, or search engines.

However, I typically fix validation issues if there are many of them, even if they don't affect the display of the page, so that the validation results don't get too cluttered when I validate for debugging purposes. So while I'm not a nazi, it isn't unusual in the least for my pages to pass validation.

There are times when I purposely go against standards because it is useful to do so. An example is the target attribute on anchors, which interestingly, is making a comeback in HTML 5, so it is going to be part of the standard again.

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!