Contents

Introduction

Do you think that you can modify any website page’s content? For example, you can easily modify Microsoft’s web page. 😁

Please wait, don’t be excited, I’m not going to teach you how to hack a website, I just want to introduce a technique that you can use to do that!

You can see the demo below:

Do you want to be a good trading in cTrader? >> TRY IT! <<

Actually that’s easy to do, just one line command that you can modify the webpage what you want.😆

How to do

It’s hard to imagine that such a cool feature only requires one command in the console:

Ok, let’s do it!

Input the below JS command in Chrome console

document.designMode="on";

and then you will find the magic:

But I also need to let you know that this approach can only modify the webpage content in your local😅

What’s the designMode

Ok, now you know how to modify the webpage on runtime, but what’s this command?

from the MDN Docs description:

document.designMode controls whether the entire document is editable. Valid values are "on" and "off". According to the specification, this property is meant to default to "off". Firefox follows this standard. The earlier versions of Chrome and IE default to "inherit". Starting in Chrome 43, the default is "off" and "inherit" is no longer supported. In IE6-10, the value is capitalized.

and you can find the browser compatibility below

With this API, we can also edit Iframe nested pages:

iframeNode.contentDocument.designMode = "on";

Association API

Other APIs associated with designMode include contentEditable and execCommand (deprecated, but still available in some browsers).
contentEditable is similar to designMode, but contentEditable can make specific DOM elements editable, while designMode can only make the entire document editable.

The document.execCommand() method allows us to format, edit, or manipulate content in a web page. It is mainly used to operate editable content on a web page (such as <textarea> or elements set by setting the contentEditable or designMode attributes to “true”), such as bolding text, inserting links, adjusting font styles, etc. Since it has been deprecated by W3C, it is no longer introduced in this article.

Conclusion

This command is not only for fun, you can quickly to modify the webpage to show a demo to your client, or help the designer to know what needs to be changed in the page. Also, if you want to refer to the design of other websites, then make some modifications based on them to suit your needs. This command can also be helpful!