By 6 years ago in Coding

Cut and paste one line of code to make any website editable

Are you a student? Branded3 is hiring graduates for a number of vacancies in our Leeds & London offices.

Have you ever wanted to edit the web pages of another website? This simple line of code makes it possible. Of course you can’t actually edit the actual web page but you can edit the page as you see it on your screen.

This is one of the ways scammers create fake screenshots, fake Adsense & affiliate earnings and even fake Paypal transactions.

Here’s a method of editing the webpage in browsers without developer tools; all you need to do is visit the site you want to edit, paste the code below into your web browser address bar (tested in Firefox & IE7, fails in the Chrome search box) and hit the Enter button.

Then simply select a portion of text on the page and start editing.

javascript:document.body.contentEditable='true'; document.designMode='on'; void 0

Alternatively, you can install firebug and edit inline using this tool.

Image: Dmitry Baranovskiy

SEE PATRICK TALK AT AN EXPERT SEO SEMINAR OCT/NOV 2013, MORE DETAILS HERE.

By Patrick Altoft. at 9:30AM on Monday, 07 Jul 2008

Patrick is the Director of Strategy at Branded3 and has spent the last 11 years working on the SEO strategies of some of the UK's largest brands. Patrick’s SEO knowledge and experience is highly regarded by many, and he’s regularly invited to speak at the world’s biggest search conferences and events. Follow Patrick Altoft on Twitter.

comments

  • http://webtoolsandtips.com Silki

    Now, I understand, how the affiliate marketers, and the authors of the million dollar secret formula actually operate.
    Thanks.

  • http://money-watch.co.uk Rob Lewis

    That’s quite scary – I knew it was possible by altering the HTML and resaving somewhere, or by doing some Photoshopping, but that’s just much simpler.

  • http://www.3sheep.co.uk Stuart Smith

    Like Rob I knew it could done but never realised how quick it could be. I suppose this is just one of a number of ways it could be done though. Guessing the lesson here is always beware what links you are sent?

  • Pingback: Edit Any Webpage Directly From Your Browser | Hackosis

  • http://Fine-butnotsaved visitor

    You are aware that the editong happens only inside the momory of your browser??? You can edit what you want but you will not be able to save your “Work”

    So it is just a funny joke that will not harm your pages in any way.

    • http://www.blogstorm.co.uk Patrick Altoft

      Yes I’m aware of that. Pretty cool though.

    • Dean

      did you even read the post?

      “Of course you can’t actually edit the actual web page but you can edit the page as you see it on your screen.”

  • http://www.lostartofblogging.com Tibi Puiu

    Hehe, awesome hack, Patrick. I’m not too sure about disclosing this little secret right here, who knows what scams might occur if it falls in the wrong hands :<

    • Tabish Khan

      It’s not a hack though, because the edit is visible only to the person editting it, not to others :)

  • moron@moron.com

    Seriously…you guys are morons. Like you said, this does NOTHING WITH THE HOSTED VERSION.

    it’s just a few seconds easier than saving and modifying the source locally.

    • http://girasquid.com Luke

      I think that you may have missed the point that Patrick is trying to make, here – it’s not about editing the hosted version at all. It’s about being able to easily forge things like screenshots, and go “look at this! Here’s a screenshot of an actual Adsense page, with over $10m in earnings!”. It doesn’t matter whether the changes get saved or not – it’s simply about being able to create fake screenshots easier.

      • moron@moron.com

        Why wouldn’t they just download the page and edit it. There are tons of scripts that already do this. There are tons of editors that do this for you online too (like FCK Editor).

        I feel like I’ve jumped back in time to 2001 when this was new.

      • otacon

        Yesterday a friend of mine came to meet me at my office.
        I last saw him some years ago at high school.
        He talked for long about earnings he was raising through adsense. Sitting at my desk, using my firefox, he showed me (after a short phone call I had to answer) his huge adsense earnings on the adsense profile.
        But after reloading the page, it revealed as a fake.

        I think this is the kind of story this link is about.
        Many would trust what they read on *theyr* screen, not wondering about hitting F5 to test it out.
        And many more can, with a bookmark, fake screenshots without learning html or at all.
        btw, I never trust screenshots, do you?

  • bofh

    Wow. There is one thing I really love about this — with firefox, you can save the edited page.

    I’ve always wanted a decent editor that could just work w/ templates.

    Seriously — got a tipjar? :-)

  • bofh

    I should also mention, it will save the various Editibles into the final document, so be sure to remove before upload if you do this :)

  • Matthew

    This works in Safari as well!

  • http://programming-questions.blogspot.com Sphurthy

    This is very cool and scary

  • Pingback: Misbehaving Monkey » Blog Archive » Cut and paste one line of code to make any website editable

  • prags

    Fair enuff, but wats the point if i cant save my designs????

    • http://wwww.none@none.com 2oonhead

      @ visitor, not true.

      @ prags, just make the changes you want then “Save Page As…..” under “File” in Firefox. This does not change the way the page is served up from the internet, but you can save a changed version of it to your desktop or something.

  • nobody

    This should be handy for note taking (other than using some other firefox extensions). I just made this code a bookmarklet. Now for writing papers and such, I can find a web page, click my bookmarklet, make notes, then save the web page w/ notes. Much faster than editing source, and better formatting than copying to Word/notepad/whatever, and adding notes there. If someone has a better way of taking notes, point me to the extension.

  • hmm

    so then how would you edit a website with a blank index.html tag so you can edit the files in that same folder!?

  • http://www.mgroves.com mgroves

    Works in Opera too. Neat trick!

  • Pingback: Fakey fakey fake fake? | A Buck A Night

  • Pingback: Editing your Earnings Pages - WickedFire - Affiliate Marketing Forum - Internet Marketing Webmaster SEO Forum

  • http://www.mactricksandtips.com Mac Tips

    You can also do this within Firebug. Very cool, and you don’t need a plugin.

  • Pingback: JASON PRIESTAS » Website Editing with a Little JS

  • http://www.core.gen.tr/#coretal evrim

    Actually the ‘title’ is possible:) Just put a simple script and make your site editable in 7 minutes.

    Users Guide ScreenCast:
    http://www.core.gen.tr/videos/asli9.swf

    Desginers Guide ScreenCast:
    http://www.core.gen.tr/videos/asli101.swf

    Product Info:
    http://www.core.gen.tr/#coretal

  • http://www.cbltech.com Chris Architect

    That’s insane! very c00l for developers to mess around with ideas, layouts ….

  • http://solinkable.com SoLinkable

    Holy hell this is insane. I had no clue it was this easy to do…

  • noptical

    The dangers don’t lie in screenshots, they lie with people who edit hidden form values to change item prices, and people who edit AJAX for malicious purposes.

    Sure the changes aren’t saved on the server, but that doesn’t mean the page stops being able to interact with it.

    • http://www.peterstuifzand.nl Peter Stuifzand

      Why would you include item prices in your hidden values. There is no need for that and is bad design. Item prices should be stored server-side (a database for example).

      If your webshop needs you to have item prices in the hidden values, then you should try another webshop.

  • http://www.drunken-pumpkin.com Jeff

    While trying it on various sites in my favorites list, found that funnyordie.com displays only a login form after entering this javascript url in the address bar. All images and text from the page are hidden.

  • Pingback: Linkblog - June 28th to July 7th | wibbler.com

  • http://thomdurkin.blogspot.com Durkin

    this is madness! Its actually quite fun to play with though :D

  • Pingback: How to make a website editable? « 8-bits of Coffee

  • CaptainObvious

    Or you could just use Firebug and it’s a lot easier, cleaner, and faster…

  • Tipper

    In Firefox, once you type the command in the address bar and hit enter, grab the command and drop it into the bookmarks toolbar, then right click, properties, change name to “Edit” and there you have it, a nice little button handy for when you need it.

  • http://www.moneymakerjobs.com Zibby

    That’s pretty wild stuff. It definitely explains a lot of the clickbank “earnings” I’ve seen from a lot of folks. ;)

  • http://gnuski.blogspot.com lefty.crupps

    Is there any /other/ line of code which can allow me to save and use a page as an offline web application?

  • d00d

    Any way to add this the the head of an HTML file to make it permanent and automatic to visitors?

  • Pingback: links for 2008-07-08 « Talkabout

  • Larry

    Works in Opera 9.50

  • liquidpele

    Ummm… have you guys never heard of the “firebug” firefox plugin?
    It lets you edit the DOM live, even the dynamically generated stuff.

    In other words, there are actual tools for this – most of them are for debugging your own web development. Thinking this kind of thing is important is like thinking it’s important that someone knows that my username bought a hard drive on ebay last year. Ooooh, scary!

  • http://redivide.com/ redivide

    OMGWTF, you people ain’t heard of Firebug yet?

  • Pingback: gfrast / Daily hand picked web links - mixed with a shot of reality.

  • ralph natterbough

    hey, 2001 called and wants its leet hax back!

  • http://teamnirvana.com/blog Team Nirvana

    This is quite scary.

    Donno how much scam had already been done and how many affiliate marketers have laughed all their way to the banks.

  • S

    Phew! I used to do this using FF and FireBug. But this is much cooler!

  • http://vineetgupta.wordpress.com Vineetgupta

    You do realise that everyone is going to test it on your page? ;-)

    Great trick!

  • http://www.duivesteyn.com.au ben

    haha nice one.

  • ODP

    This is also a standard feature of Opera.
    To edit the source:
    1. View > Source (Or Ctrl+U)
    2. Make the edits in Opera’s color-coded Source Editor
    3. Click “Apply Changes”

    Bam, site’s edited.
    Also, with the developer tools you can view all of the scripts, DOM, and all of the errors that show up in the code.
    Tools > Advanced > Developer Tools

    It’s cool to see that you can do this in IE, though.

  • http://mczy.blogspot.com phetrs

    Does it illegal for this work?
    I am new comer know not much about that.

  • http://mczy.blogspot.com phetrs

    how does it work?

  • Pingback: Mulling It Over

  • http://csswizardry.com/ Harry Roberts

    You can do this with Firebug… And more. Kudos anyway, it works in IE at least.

  • http://seosoeasy.com Kamal

    Freakin awesome now i can edit microsoft,ibm,sony website and take screenshots.Thats it!

  • http://1nax.org ext

    Very cool

  • turnthebeataround

    I just tested it out on this page using Firefox 3. Amazing. (Maybe I can trick my moron inexperienced kid brother into thinking I’m magic after I hide the URL bar…)

  • Lars

    Also works in Safari on a Mac

  • http://foliovision.com/weblog Wordpress SEO

    Omniweb has had this feature for years. Very helpful when troubleshooting code.

    The anecdotal story about fake adsense earnings is hilarious. I can’t quite believe it though.

  • http://medicinemantras.blogspot.com paresh

    good, useful article.

  • http://omanpocketguide.com/ oMan

    Have you ever wanted to edit the web pages of another website? No, just my sites.

  • http://www.enamul.tk Enamul

    Thanks for sharing this simple yet powerful javascript code.

  • http://www.sueblimely.com Sueblimely

    I have been using the edit features of the Web Developer toolbar for what seems like years to do this while testing out html and CSS. The Scrapbook extension for Firefox is nifty too. It allows you to download a local copy of a webpage but you can erase the parts of a page you don’t want first- e.g. you just want to save the text and delete sidebars, footers, images etc…

  • http://www.scriptthief.com montsa007

    Thats pretty cool,
    Fake Adsense Stats

  • Robert

    Wow. I just tried that and it is a bit scary. However, will be neat to play joke on my sons with it.

    Peace

  • http://mountedweb.co.uk Nishi

    Wow, now I think this infomation is worth more than the books “millionaire authors” sell.

  • CodyG!!!!!

    U can turn editing off by entering

    javascript:document.body.contentEditable=’false'; document.designMode=’on'; void 0

    and the edit mode will be off.

  • Pingback: Linkblog - August 2nd | wibbler.com

  • http://slashbe.com/ betty

    Ok now I have to try it…

  • Pingback: Thursday Links Roundup #7 - Putting Blogs First

  • Pingback: tasteslikeangry » Moar link dump. Weirder this time.

  • abcd

    cant we then save what we have edited suppose i add funds in account and then cant it be save refering page see the same page that is original so there is no saving of page

  • Pingback: Edit any website with a line of Javascript code « Athleone’s Weblog

  • Pingback: Reallyla.me » Blog Archive » Links - Oct. 1, 2008

  • http://www.hotelofsales.com Grover

    How do you save it when you are done with editing?

  • http://digitalinternetsystems steve jenkins

    can you or any one tell me what im doing wrong on copy and paste from clickbank to my website on hoplink i can copy and paste but then i cant get that ling to activate on my site need help for dummy. thanks call me if you want 865 470 4154 or email

  • Pingback: » links for 2008-07-08 | Paul Cowles

  • http://www.khyber.net.tf bilal

    javascript:document.body.contentEditable=true';document.designMode=’on’void 0

  • http://vvaligarh.page.tl Vimal

    This is quite scary.Nice trick bT pRbZ is d anY eDItable itEm doEsnT SavE..

    How do you save it when you are done with editing?????

  • http://www.chrisranjana.com Web Project Company

    Yes correct the real dangers lurk in the form of sql injection attacks and scripting attacks by changing the forms and making them post malicious values to the processing script.

    Also yes it is quite usefull for manipulating web screenshots etc but I thought graphic programs like photoshop would do a more expert work of manipulating screenshots !

  • Pingback: Eddie On Everything » Make any website editable with this handy javascript snippet

  • http://www.split5.com Malcom

    Very funny……I really enjoyed using this.

  • http://www.iflexion.com Web Programing

    Wow! Didn’t even know about such an interesting thing. You can send fake statistics to webmasters, make cruel jokes or anything else. But… ya… I’ll never trust screenshots now. :)))

  • Pingback: What you see is what you edit « Notizbuch

  • http://www.jandsgames.webs.com bill nye the ball sack guy

    now find out how to save it

  • http://sowr Pic

    I should also mention, it will save the various Editibles into the final document, so be sure to remove before upload if you do this .

  • http://www.matarwater.com Mohammad Al Fahhad

    Good day.

    Ho w can I edit our own website, I want to put some contact details and information of our company to our website, how can I do that.

  • http://wareztips.blogspot.com/ Gofree

    Wow! Never known that’s possible!

  • Pingback: Make Any Website Editable In Your Browser | Free Web Resources

  • http://www.bdrlondon.com SEO Agency

    Man this is the best thing ever! I hust played a trick on my boyfriend using one of his favourite sites Ha Ha!

  • JAZZA

    Mine isnt working y is this i am copy and pasting the code?:javascript:document.body.contentEditable=true’;document.designMode=’on’void 0 is that the right code or am i doing something wrong

  • http://mobiusonline.net joseph

    how to edit wxisting website and save it

  • Clayton

    …but can you save the website as it is edited for EVERYONE to see?

  • darvin shende

    You can edit the website , but you cannot save it.
    pls tell me how can save it on server.

  • Pingback: Anton Olsen.com » Blog Archive » links for 2008-07-08

  • Ashish

    Wow! It was really scary. I was able to make a website blank again!

  • Guest

    How do you save in firefox?

  • Pingback: News update » Bunch of Feeds

  • levi williams

    how do u save it after u have changes the website

  • Lewiss

    I dont understand how to edit the website or what to do helppppp

  • http://www.lalacan.com/ lalacan

    Hmmmm…I’ve never heard about this before,
    I’ll try it on my blog :D

  • jowanie

    Pleas provide me a code on how to update the edited website

  • Nicole

    it is easy as 123 and abc that is how i now good luck everyone

  • http://www.poundproductionsllc.com/ Azim

    Cool, I’ll try it later :)

  • none

    How do you save it

    • joel

      screenshot

  • http://www.techsource.in application development india

    Very interesting bit of code there. I tried it and found it working. I could actually edit websites. Great post!

  • http://www.rumneyexclusive.com canvas paintings

    Hi there, never new you could do this, thank you for posting.

  • http://stardoll.com kiara

    hey i love doing it.

  • noname

    How would you make the changes permanent??????

    • http://www.facebook.com/charles.wallace.3367 Charles Wallace

      You can’t make the changes permanent. Javascript is purely client-side, though it can be used to send things to the server. It just edits what you’re seeing, not anybody else.

  • http://balochyout.webs.com Sardar Baloch

    how do after change the website how can submit or publish it editable page

  • Pingback: Prabhakaran’s » How to edit a website – cut & paste one line of code to make any site editable

  • http://www.shopfordesigns.com logo design crowdsourcing

    wow thats really nice and scary as well. being a webmaster i am afraid of it. i dont know how many such tricks exist. will try it

  • http://www.oc-swimwear.co.uk Oli

    Damn! Thats just made a whole lot of things make a whole lot of sense! Thats how they do it! Thank you so much.

  • http://www.priyankarmukherjee.com web design kolkata

    I think there is nothing to be afraid of this since web hosting providers are all patching up their systems to get around this security flaw.

  • tito

    well i try it but it didnt really work for me it dint safe what i had change how can i safe the things i change?

  • http://specialcontrolovermind.webs.com ali

    keep it up

  • http://lifelandrealty.com Lifelandrealty

    i want 2 edit my website

  • mishahri

    isnt it sooooo bogus…it doesnt save

  • http://www.lifeofpranks.weebly.com seleth

    what i wanted to do, was get google maps, still the same and stuff, execpt i wanted to change the look at name of it for my own website, for E.G: prank maps, ghost maps, you get the idea?

  • Anonymous

    Guys, you realize this is all just for fun…. once you reload the page, it goes back to normal. did you really think it would be THAT simple to edit any text?

  • MeEeEeEe

    OMg….. i used this to edit a website that has ” you can’t see content. fill survey.”box. i deleted it and everything was working. it cool little code.

  • Bob

    When you're done, you should add:
    javascript:document.body.contentEditable='false'; document.designMode='on'; void 0

  • jugheads

    this is how big websites can edit their sites… i wonder what i could do to club penguin >:D

  • http://google.com nermin

    my browser did not sarch for it

  • Truman Capote the Triastermon

    If you could save this then so many websites would die. You can not safe this.

  • You Guys Are Idiots

    HI EVERYONE. Just so you know, changing “true” to “false” doesn’t actually work. You CANOT SAVE THESE. It’s just meant to play a prank or so that you can take a screenshot and mindfuck someone.

    For christ’s sake it’s NOT THAT BIG OF A DEAL.

    • miatana

      i tried to use the code with my school website to change my grade but it is not working. i am in college by the way so all the grades are posted in the school website. any help ? please? thank you

  • http://www.mortonsmailing.com Mailing Fulfilment Services

    This is a great piece of code and something i was unaware of till now. I’m not new to web editing as such but this is new to me and very cool.

  • John

    can I edit a website on a mac? I already tried and I can’t. I don’t know if I am doing something wrong or I just can’t do it on a mac.

  • rei

    I’m doing my thesis.Graduating BSCS.How can I make a website that is all editable and save changes afterwards….and editing is only allowable upon login of admin….Thanks

  • http://www.coretal.net/ evrim

    Hello,

    Here is a service that can make any site editable:
    http://www.coretal.net/

    Also, there is a screencast showing how it works:
    http://www.vimeo.com/21781218

    Regards.

  • Pingback: » how to edit a website

  • http://google.co.uk kieran c

    this dont work i ut it in and it says it cant show the page help me

  • Jan

    or you can save the page(.htm or .html)
    and edit the page with notepad.. works like javascript but better. this is how other people get website templates.

  • http://www.ecobusiness.com/behealthy Business Opportunities

    The Green Products Market is exploding and you have a unique opportunity to capitalize on this growing trend. If you ever thought of starting a home based business…this is it…the time is now! No out of the pocket start up cost … No obligation.

  • Hi

    To save work press FN+ Print Screen. Open up paint. Paste it in!

  • http://www.ebook-review.org/author/admin/ Alberto Seaburg

    Hello
    I wasent looking for that but still a great post

    how did you guys found this information??thank you for your blog I saw it on Google And I saved it .I like. Please send me updates

    thank you and have a nice day

  • Jay

    im trying it but it doesn’t work someone help me!!!

  • http://www.connetu.com Paul Web

    A cute browser trick that makes for some good practical jokes, but the usefulness in real situations is of course limited. Still, it’s a good lesson in browser capabilities ofr noobs.

  • Lainey

    Hey I used to love this trick but it’s not working for me anymore. On Chrome and Safari when I hit enter it just takes me to a search engine now! And on Firefox it’s just plainly not working.

    Anyone know why it’s not working anymore? PLEASE email me: fighttheprocess@live.com

  • http://habbo.com craig

    it doesn’t work it sends me to a new page giving a search on what document.body.contentEditable=’true'; document.designMode=’on'; void 0 is…. how can it work? + i use firefox…..

  • http://www.foldedleaflets.org.uk Folded leaflet printing

    This is great for playing tricks on people, a very cool little tool.

  • gorillabond

    Wont work on Firefox 8 ;(

  • Jimmy

    This code used to work for me, but not anymore :(

    • jellyfish103

      Put it as a bookmark. then click the bookmark while on a page.

  • http://www.brianreport.com Brian

    Perhaps it stopped working because I just tried it and nothing happens. I tried it on both firefox and chrome.

  • Ed Kwok

    you guys gotta put in a “javascript:documents” etc. (just without quotes) nad that etc of course

  • http://www.viagrapillenbestellen.nl/ erectiepillen

    I used this to edit a website that has ” you can’t see content. fill survey.”box. i deleted it and everything was working. it cool little code.

    • http://justinbeiber@yahoo.com You Noobs

      This is so old and outdated….

  • http://gmail.com ,fjeoqoqqww2

    where do you put it in the bar?

  • http://www.viagrakopenonline.nl/ koop viagra

    This is great for playing tricks on people, a very cool little tool!

  • Anthony

    You can save it… when you are done press prt Sc button on ur keyboard, open paint and press paste and voila. now u press save.

    -DeZal

  • http://blogstorm jarrett

    i tpye in the hack code abd press enter but nothing happenend people tell me what to doi am not that goo at tpyeing these things

  • http://blogstorm jarrett

    i type in the code and press enter and nothing happened help i really do not know how to do this

    • George Morgan

      If you’re on Chrome, press Ctrl Shift and J and paste it in there, then press Enter.

      • hocuspocuss

        doesnt work for me sadly. just messes up the page.

  • wow

    guys. you have to type in javascript: with a space after the : and THEN type the rest of it omg

  • roli

    it remains same after i come back or reload can u plz tell me a permanent one the sent it to ankuroli28@gmail.com

  • ryguy808

    code does not work if you just put it in the search…

    1. Go to edit HTML

    2. Insert The Code

    3. Edit the website however you want it

    4 Click done to finish edit and refresh to save changes

    Your Welcome!

    • nrg

      where is edit hml on a safari
      ?

  • Calingo Flanc

    guys just bookmark the code i think that’s the easiest method …………………..

  • http://twitter.com/joeyvend Joey

    works in safari (on Windows computer) in address bar. No Shift Ctrl FN Hit 3 , then do 5 jumping jacks, just download Safari and put the code in address bar.

  • J S

    you have to type by hand the ‘javascript:’ but you can copy and paste the document.body…

  • bob

    You guys have to realize that when you copy and paste the code the part that says “javascript: ” disappears. You have to type that part in before document.body…… your welcome.

  • Juan

    This code works for me, i put a bookmark in chrome, and now I can edit in chrome!!!

  • http://omfgdogs.com flob

    It does work on Chrome. It just deletes the Javascript;.
    All you have to do is type it back in.