How to quickly open the page code in the browser, even if copying is prohibited. Unpacking and decoding JavaScript scripts Decrypting the source code

The article will discuss the basic principles of encryption and packaging, weak points of protection, methods of manual removal, as well as universal tools for automatic removal of packers and hinged protection from JavaScript scripts.

Hidden text

Recently, more and more often the source code of scripts is encrypted or packaged. Yandex, DLE and other popular projects began to get involved in this, and beautiful stories about "taking care of users", "saving traffic" and other nonsense look very funny. Well, if someone has something to hide, then our task is to bring them to clean water.

Let's start with theory. Due to the peculiarities of JavaScript execution, all encryptors and packers, despite their diversity, have only two algorithm options:

Var encrypted="encrypted data";
decrypt(str) (

}
// Execute the decrypted script
eval(decrypt(encrypted));


or alternatively:

var encrypted="encrypted data";
decrypt(str) (
// decrypt or decompress function
}
// Display the decrypted data
document.write(decrypt(encrypted));

The second method is most often used to protect the source html code of the page, as well as various trojans to inject into the page malicious code, such as a hidden frame. Both algorithms can be combined, the "tricks" and the complexity of the decryptor can be any, only the principle itself remains unchanged.

In both cases, it turns out that fully decrypted data is passed to the eval() and document.write() functions. How to intercept them? Try replacing eval() with alert() , and you will immediately see the decoded text in the MessageBox that opens. Some browsers allow you to copy text from MessageBox "s, but it's better to use this semi-automatic decoder:


JavaScript Decoder


// Function for writing decryption results to the log
function decoder(str) (
document.getElementById("decoded").value+=str+"\n";
}









For example, let's take some script from Yandex, looking at the source code, we see something unhealthy:

eval(function(p,a,c,k,e,r)(e=function(c)(return(c35?String.fromCharCode(c+29):c.toString(36)));if(!
"".replace(/^/,String))(while(c--)r=k[c]||e(c);k=)];e=function()(return"\w+"); c=1);while(c--)if(k[c])
p=p.replace(new RegExp("\b"+e(c)+"\b","g"),k[c]);return p)("$.1e
.18=8(j)(3 k=j["6-9"]||"#6-9";3 l=j["6-L"]||".u-L";3 m=j ["6-L-17"]
||"";3 n=j["1d"]||0;$(5).2(".6-9").14("7");$(5).2(".6 -9").Z("7",8(
)(3 a=$(5).x();3 o=$(5).x();3 h=$(5).B("C");$(5).v("g -4");$(5).16(
$(k).q());3 t=$(o).2("15");3 c=$(o).2(".b-r");3 d=$(o).2 ("".b-12");
[the rest of the same nonsense cut off]


I must say right away that this script is processed by JavaScript Compressor, it is easy to recognize it by its signature - the characteristic name of the function at the beginning of the script. We copy the entire source text of the script, replace the first eval with decoder , paste it into the decoder and save it as an html page.


// Paste the encrypted script here, preliminarily
// replace all calls to eval() and document.write() in it with decoder().
decoder(function(p,a,c,k,e,r)(e=function(c)(return(cQAPKRV%22NCLEWCEG? HctcQa ...
hp_d01(unescape(">`mf(%22`eamnmp? !DDDDDD %22v ...


For convenience, the scripts are not given in the article in full, but you must copy them in their entirety. We open the decoder in the browser and see the security scripts added by the program and the decrypted source text of the page. For convenience, you can decrypt only the third script, which contains the html code of the page. That's all protection. As you can see, nothing complicated. Similarly, other protections of html pages are removed.

Let's move from manual decryption to automatic. To remove protections of the first type, I slightly modified the Beautify Javascript script already known to you and compiled it into an exe file. It handles most of the JavaScript protections and wrappers I've seen with no problems.

Eval JavaScript Unpacker 1.1
Eval.JavaScript.Unpacker.1.1-PCL.zip (12,073 bytes)

For more complex cases, heavy artillery will have to be used. This is a free Malzilla project designed to investigate Trojans and other malicious code. Since all programs designed to protect copyright are unambiguously malicious, Malzilla will help us in the fight against them. Downloading latest version(today it is 1.2.0), unpack, run. Open the second tab Decoder, paste the code of the encrypted script into the top window, press the Run script button.

There are fewer functions in it, but it is quite the place to be. From offsite you can download a demo video showing an example of working with the program.

As you can see, there is nothing difficult in removing protection from JavaScript scripts and from html pages. Do you still continue to defend your filthy "author rights"? Then we go to you!

We have released a new book "Content Marketing in in social networks: How to get into the head of subscribers and fall in love with your brand.

The source code of a site is a collection of HTML markup, CSS styles, and JavaScript scripts that the browser receives from the web server.

More videos on our channel - learn internet marketing with SEMANTICA

It can be compared to a set of commands given to the soldiers by the commander. Imagine that the audience does not see or hear the boss. From their point of view, the military independently perform actions. In our case, the commander is the browser, the commands are the source code, and the marching soldiers are the end result.

The site is stored on a web server that sends the page at the request of the user. A request is typing a URL in the address bar, clicking a link, or clicking a submit button on a form. It doesn't matter what language the web pages are written in, whether they include software part. The end result of any server-side algorithm is a set of html tags and text.
Page source code is a set of data that includes:

  • html markup;
  • style sheet or file link ;
  • programs written in JavaScript or links to files with code.

These three sections are handled by the browser. For the server, this is simply the text that needs to be sent in response to the request.

Why we might need to study the source code

Everything that we see, we can analyze and apply to solve certain problems that arise in the course of working with the site, especially when optimizing it. By looking at the source code, we can:

  • See the meta tags of your own or someone else's site for their analysis.
  • See the presence or absence of some elements on the site: counters, identification codes in various systems, certain scripts and more.
  • Find out the parameters of elements: sizes, colors, fonts.
  • Find the path to photos and other elements on the page.
  • Examine links from the page.
  • Find problems with the code that interfere with the site optimization process: styles that have not been moved to separate files, scripts, invalid code.

These are the main features, but in fact, by being able to read the code, you can learn a lot more about the page.

How to view the source code of a site

Completely in the form in which it is laid out on the server, this cannot be done from the browser. But you can see the entire markup by clicking on the page with the right mouse button. Here and below, for example Google Chrome.

Select the option "View page code" and get the full listing in a separate tab.

It's just text that you have to parse to understand. But you can get interactive code using developer tools.

How to find the source code of a website page

Click on the menu icon in the browser. Most often it is on the right and looks like three dots or stripes.

In chapter additional tools Select "Developer Tools".

A window will open showing the active state of the code. This means that when you click on the markup next to it, the style of the element will be displayed, and the selected blocks will be highlighted on the page.

In the "Source" tab, you can view the contents of some files: scripts, fonts, images.

In the "Security" tab, verification of the site certificate is available.

The “Audits” tab will help you check the resource posted on the hosting.

If the location of the panel on the right is inconvenient, you can click the three dots and change it by selecting the desired item.

How to view meta tags

Every html document includes structure tags. Here are some of them:

  • html is the entire document.
  • Head - section of service headers.
  • Title – title of the page (displayed on the tab).
  • Body - the body of the document.
  • H1-H6 - headings of the page text.
  • Article - article.
  • Section - section.
  • Menu - menu.
  • Div - block.
  • Span is a string.
  • P - paragraph.
  • Table - table.

    • Elements are designed to logically delimit sections of a page, and are styled as needed. They contain text that is somehow visible on the page. But the Head tag contains service information. Meta tags are used to specify it. Everything that is written in them is intended for the server and search engines.

    Their contents cannot be known in any other way.

    Let's pay attention to the Link tag. It is used to specify links to external include files. If desired, you can see the contents and save to disk. To do this, hover over the address and right-click. Select "Open in new Tab".

    Opens in a new tab specified file, which can be viewed or saved.

    How to view the source code of a page to debug a script

    In this case, it is most convenient to open the page on the local machine. If you only need to fix the markup, styles and scripts, then this can be done directly from the folder. Html code is viewed in the same way. But JavaScript code errors can be seen in the "Console" tab. Shows the description of the error and the line number on which it occurred.

    The syntax can be seen directly in the code. This is the Source tab.

    How to view the code of a specific element

    For large pages with big amount items are hard to find desired code throughout the markup. In this case, you should use special team context menu. Hover the mouse over the fragment and press RMB. Select the View Code command.

    The same window will open, but with the focus on the selected object.

    Summary

    We told you what the source code of a page is. It is enough to master the elementary knowledge of HTML and CSS, and using handy tools developer, you can debug your own html documents.

    Browsing the code of resources on the web will allow you to learn not only from your own experience, but also to use real working examples. And for seo-specialists, meta tags will be useful, the information in which can say a lot about the site.

    Looking through countless sites on the Internet, you can find those that we like very much. A number of questions immediately arise. Is the site made using self-written code or some kind of CMS? What are his CSS styles? What are its meta tags? And so on.

    There are many tools that can be used to extract information about the page code of a site. But at hand we always have the right mouse button. We will use it, using the example of my site.

    How to view page code?

    To view the source code of a website page, you need to move the mouse cursor over any area of ​​the web page (except for images and links). After that, click on the right mouse button. A window will open with several options (in different browsers they may differ slightly). IN Google browser Chrome, for example, these are the commands:

    • back;
    • forward;
    • reload;
    • save as;
    • seal;
    • translate to Russian;
    • page code view ;
    • view code.

    We need to click on view page code, and the html code of the site page will open in front of us.

    Viewing the page code: what to look for?

    So, the Html page code is a numbered list of lines, each of which carries information about how this site is made. To quickly learn to understand this huge number of characters and special characters, you need to distinguish between different parts of the code.

    For example, the lines of code found inside the head tag contain information for search engines and webmasters. They are not displayed on the site. Here you can see what keywords this page is being promoted for, how its title and description are written. You can also find a link here, by clicking on which we learn about the google font family used on the site.

    If the site is made on CMS WordPress or Joomla, then this will also be visible here. For example, this area displays information about a WordPress theme or a Joomla site template. You can see it by reading the content of the links highlighted in blue. One link shows the website template.

    For example:

    //fonts.googleapis.com/css?family=Source+Sans+Pro%3A400%2C400italic%2C600&ver=4.5.3

    We will see the CSS font styles of the page. In this case, the font is used. This can be seen here - font-family: 'Source Sans Pro'.

    This site is optimized using the Yoast SEO plugin. This can be seen from this commented section of code:

    This site is optimized with the Yoast SEO plugin v3.4.2 — https://yoast.com/wordpress/plugins/seo/

    All information inside the body tag is displayed by the browser on the monitor screen. Here we see the html code of the page, and at the very bottom is the Yandex Metrics script code. It is wrapped in a commented out tag with the text:

    /Yandex.Metrika counter

    Summing up

    After a rather superficial analysis of the code home page site, we can conclude about the tools with which this page was made. We saw on it:

    • CMS WordPress;
    • Google font Source Sans Pro;
    • WordPress theme - Sydney;
    • Yoast plugins
    • counter Yandex metrics.

    Now the principle of analysis html code site pages are quite understandable. It is not necessary to keep the page under investigation open in the browser. You can save the page code to your computer using the key combinations ctrl + a, ctrl + c, ctrl + v. Paste it into any text editor(preferably Notepad++) and save with html extension. Thus, at any time you can study it deeper and find more useful information for yourself.

    Enter text to encrypt:

    What is the html encoder tool for?

    The "html encryptor" tool will be useful for webmasters who want to protect their software products from search robots, hackers and those who like to take advantage of the results of someone else's work. We are talking about protecting HTML code, which is freely available on most resources, and anyone can easily reproduce it. With the tool "Encoder for HTML" you can easily obfuscate (encrypt, obfuscate) the source HTML code.

    In fact, everything that is displayed on site pages can be protected with an encoder: texts, images and other elements of a web page created using the HTML (HyperText Markup Language) programming language. Or CSS-codes (Cascading Style Sheets) - special tables in which the code is written once and saved in a separate file.

    How it works?

    The "HTML Encryptor" tool allows you to convert the source code of a software product so that its functionality is preserved, and analysis and decryption of the code by third parties or robots becomes almost impossible.

    First of all, the HTML code of the page and the CSS code, that is, those software products that the end user can see on his computer, need to be protected. Of course, 100% protection of the code from encrypting services should not be expected, but you should not make life easier for lovers of easy money either. Therefore, enter the text to encrypt in the field that you see below and click the "Encode" button. As a result, you will receive a new text encrypted via JavaScript that visitors to your resource and search robots will not be able to read.

    Is it worth it to play it safe and encrypt everything?

    In our opinion, it is necessary to protect not only valuable software products that are expensive intellectual property, but also simply successful projects in which a lot of effort and time has been invested. It is unlikely that someone will be copying a program written according to a template. But many will want to use the "beautiful" code or copy the successful design of the site. It is in such cases that our tool "HTML Encryptor" will help you. When a user enters your site, he will see only the encrypted code, and "behind the scenes" of the browser at the same time, javascript will decrypt the code and display the resource pages in the proper form.

    It is worth noting that this encryption method has its drawbacks. For example, if the user's browser does not allow javascript to run, then the site will not be displayed. Fortunately, this is quite rare.

    Beneath all the beautiful images, perfect typography, and wonderfully placed calls to action is your site's source code.

    Every day, your browser turns this code into impressive pages for your visitors and customers.

    Google and other search engines "read" this code to determine where your web pages should appear in their indexes for a given search query.

    Therefore, what is in the source code is very important for search engine optimization (SEO).

    This quick guide will show you how to read your site's source code so you can be sure your SEO is correct and teach you how to check your SEO terms.

    We'll also look at a few other situations where knowing how to view and examine major parts of the source code will help with other marketing research.

    How to view source code.

    The first step in checking your site's source code is to look at the actual source code. Any web browser makes this easy.

    The keyboard commands for viewing the source code of your web page for PC and Mac are listed below.

    • Firefox - CTRL + U (Hold down the CTRL key and press the "U" key) Alternatively, you can go to the "Firefox" menu, then click "Web Developer" and then "Page Source".
    • Internet Explorer- CTRL + U. Or click right click mouse and select "View Source".
    • Chrome - CTRL + U. You can click on the image of a key with three horizontal lines in the upper right corner. Then click on "Tools" and select "View Source".
    • Opera - CTRL + U. You can also right-click on a web page and select "View Page Source."

    Mac

    • Safari - Keyboard shortcut Option + Command + U. You can also right-click on a web page and select Show Page Source.
    • Firefox - You can right-click and select "source" or you can navigate to the "Tools" menu, select "Web Developer", and click "Page Source." Keyboard shortcut Ctrl+U.
    • Chrome - Go to "View" then click "developer" and then "View Source". You can also right-click and select View Page Source. Keyboard shortcut Option+Command+U.

    Once you know how to view source code, you must know how to search it.

    Generally, the same search features that you use in normal web browsing apply to source code searches as well.

    Commands, CTRL + F (find) will help you quickly view the source code of important SEO elements.

    Title tags.

    The title tag is the most important element of SEO. This is the most important thing in the source code.

    If you are going to take only one valuable thing from this article, pay attention to this:

    You know, these are the results Google provides when you search for something.

    All of these results come from the title tags of web pages. So if you don't have title tags in your source code, you might not show up on Google (or any other search engine).

    Believe it or not, I have actually seen websites without title tags. Let's try to do a quick Google search for the term Marketing Guides. What we see:

    You can see the first search result for the KISSmetrics blog is the Marketing Guides section.

    If we follow the link of the first search result and view the source code of the page, we can see the tag in the title:

    The title tag is indicated by the opening tag: . and ends with a closing tag: . The header tag is usually located at the top of the source code in the .

    And we can see that the content inside the title tag matches what is used in the result title Google search.

    But not only title tags are necessary to be included in Google search results.

    Google also identifies words in title tags as important keywords that it thinks are relevant for users to search.

    So if you want to get certain ranking web page for a particular topic, then you'd better make sure that the words that describe the subject are included in the title tag.

    There are a number of online resources where you can learn more about how keywords and title tags play an important role in the overall architecture of your site.

    Here are some important points to keep in mind the importance of your title tags:

    • Make sure you only have one title tag per web page.
    • Make sure that each web page on the site has its own title tag.
    • Make sure each title tag on your site is unique. Never duplicate the content of a specific title tag.

    The next important element in the head of your web page is the meta description tag.

    This is a 160-character snippet of your content that appears below your title in search engines.

    I have seen hundreds of sites that completely ignore this tag. It is very easy to find it in the source code:

    Thus, check and make sure that this tag is present on all web pages of your site. More importantly, make sure you don't duplicate it across multiple pages.

    Duplicate description meta tag is not a search engine penalty, but it is a very big marketing mistake.

    A lot of people ignore the meta description tag, but you really need to work on it because it reads search engine.

    Consider that the meta description tag will help you attract more visitors and increase targeted clicks to your site.