What HTML That Doesn't Show HTML Tags?

420 views Asked by At

Few days ago, I visited a site, and for no reason I tried to view its source code. And surprisingly, it doesn't contain regular HTML tags such as h1, h2, p, etc.

it only contains code like this :

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

  <script>
  window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
  if (window.PerformanceObserver) {
    var observer = new PerformanceObserver(function(list) {
      const entries = list.getEntries();
      for (var i=0; i<entries.length; i++) {
        var entry = entries[i];
        // `name` will be either 'first-paint' or 'first-contentful-paint'.
        var metricName = entry.name;
        var time = Math.round(entry.startTime + entry.duration);

        ga('send', {
          hitType: 'timing',
          timingCategory: 'Performance Metrics',
          timingVar: metricName,
          timingValue: time,
        });
      }
    });
    observer.observe({entryTypes: ['paint']});
  }
  </script>

    <!-- Open search -->
      <link type="application/opensearchdescription+xml" rel="search"
              href="./assets/opensearch-id.xml"/>

  <script>dataLayer = [];</script>
  <!-- Google Tag Manager -->
  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
  })(window,document,'script','dataLayer','GTM-WJZQSJF');</script>
  <!-- End Google Tag Manager -->
<link href="***/assets/bundle.f4eb17af99f6bcda6c58794466a0abd3.css" rel="stylesheet"></head>
<body>
  <!-- Google Tag Manager (noscript) -->
  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WJZQSJF"
  height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
  <!-- End Google Tag Manager (noscript) -->

  <div id="main"></div>
  <script async src='https://www.google-analytics.com/analytics.js'></script>

  <!-- Facebook Pixel Code -->
  <script>
    !function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
            n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
      n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
      t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
            document,'script','https://connect.facebook.net/en_US/fbevents.js');
  </script>
  <!-- DO NOT MODIFY -->
  <!-- End Facebook Pixel Code -->

  <!-- Criteo One Tag Code -->
  <script type="text/javascript" src="//*******" async="true"></script>
  <script>window.criteo_q = window.criteo_q || [];</script>
  <!-- End Criteo Code -->

  <script>!function(e){function c(a){if(b[a])return b[a].exports;var d=b[a]={i:a,l:!1,exports:{}};return e[a].call(d.exports,d,d.exports,c),d.l=!0,d.exports}var a=window.webpackJsonp;window.webpackJsonp=function(b,f,n){for(var r,t,o,i=0,u=[];i<b.length;i++)t=b[i],d[t]&&u.push(d[t][0]),d[t]=0;for(r in f)Object.prototype.hasOwnProperty.call(f,r)&&(e[r]=f[r]);for(a&&a(b,f,n);u.length;)u.shift()();if(n)for(i=0;i<n.length;i++)o=c(c.s=n[i]);return o};var b={},d={74:0};c.e=function(e){function a(){r.onerror=r.onload=null,clearTimeout(t);var c=d[e];0!==c&&(c&&c[1](new Error("Loading chunk "+e+" failed.")),d[e]=void 0)}var b=d[e];if(0===b)return new Promise(function(e){e()});if(b)return b[2];var f=new Promise(function(c,a){b=d[e]=[c,a]});b[2]=f;var n=document.getElementsByTagName("head")[0],r=document.createElement("script");r.type="text/javascript",r.charset="utf-8",r.async=!0,r.timeout=12e4,c.nc&&r.setAttribute("nonce",c.nc),r.src=c.p+""+({61:"vendor",62:"bundle",63:"icons",64:"short_url"}[e]||e)+".bundle."+{0:"c38a1529c3b99c325cbb",1:"36418a346d47b7489609",2:"ef74eff3789cd571abc8",3:"40b845bf76f300f55de4",4:"8a6a439aa451d3d927b0",5:"72986b428e8cbd866607",6:"c6c9571f8e2fe5d212bb",7:"aae34ad175b103ef7e4e",8:"242c59a9d553de716c60",9:"ef6bbc1570fb8834ab36",10:"4bbc0a828f9c224773d1",11:"ddb3f50d8864e9408fc1",12:"6c1497f53303248323d7",13:"afeda231b24bbc8194de",14:"a87b72a437d706639baf",15:"09604bb7d99977b19574",16:"2a88b519fe8a5231bed8",17:"8752912c6b561ea445e5",18:"1bc4d82776cf99767789",19:"a2333c0fb5928e5c8294",20:"5b3a12ea7ea8144d0b40",21:"84073184bb3f2047b2a7",22:"20b45cf24e9ba43bfeb9",23:"cd0ea9678da108d1f4ce",24:"cd3c35192890404fa9f8",25:"5eb5420abef187dc2df6",26:"18f747b4b8c098ff19f7",27:"669314a53c5cfe3c73d6",28:"ebcb097c69b716623654",29:"ac9eccdcdb242cc2aef8",30:"5e109d633d36dcbba47f",31:"5a7027b9dfa01f78bf70",32:"61e7dceb5b3a30078d83",33:"4fee29baa1d2816fdae7",34:"cc8761150451212c4a22",35:"b17ad377b0cb1ef37461",36:"66899702ab02bf7a6339",37:"bf88a5c916c22b7dd322",38:"0f8294f2a9a2e2e1ffeb",39:"dc558711f648a8ae4fc6",40:"aa5362b270c5e5c12cb8",41:"53574e3109dc0721b45b",42:"e7d39f00425207d8b5b0",43:"b1cdc408800853db7b1a",44:"90e7fdfc599c75ed6c00",45:"33db36c7330b10227972",46:"830b163b775b656e3a92",47:"03bfb3bbdd79ee0e0442",48:"e0548b8051ef72fb0e4f",49:"a14357c795d7bc1913cd",50:"ed0bec3efe20b2dc2da1",51:"76f7f508111c9d32ea1e",52:"ce6f96656a3b08a5f978",53:"dbce6a5f7c10fc5bda8b",54:"00e18ead99250bf63f01",55:"04d3bb1b65d42a9fdaf4",56:"1a12a992adc0cc13f856",57:"5fe4d3c577315f8f99a2",58:"bcd10412dcbab2259da4",59:"c8db0c00ea4034701abc",60:"d33e9ca4f6d41e01d92c",61:"8ee65c855117c2ea0d78",62:"7d31cc04d88c6681ce75",63:"d2dcedabc8faa5a71473",64:"e66827895350ae2fac63",65:"230b7a8a1670edc8e52c",66:"33b35d4cbdffc7271758",67:"6a55b5d11720b6d975ad",68:"7d28f6e0272beec18917",69:"91c610b55fa27ae0d91c",70:"4c240b9a04ec67a27235",71:"54531e628f75037462bd",72:"f6a6e9ff0ab728eabca1",73:"3d7f47216be8efeca29b"}[e]+".js";var t=setTimeout(a,12e4);return r.onerror=r.onload=a,n.appendChild(r),f},c.m=e,c.c=b,c.d=function(e,a,b){c.o(e,a)||Object.defineProperty(e,a,{configurable:!1,enumerable:!0,get:b})},c.n=function(e){var a=e&&e.__esModule?function(){return e.default}:function(){return e};return c.d(a,"a",a),a},c.o=function(e,c){return Object.prototype.hasOwnProperty.call(e,c)},c.p="https://cdngarenanow-a.akamaihd.net/shopee/shopee-pcmall-live-id/assets/",c.oe=function(e){throw e}}([]);
</script>
<script type="text/javascript" src="https://***/vendor.8ee65c855117c2ea0d78.js"></script><script type="text/javascript" src="https://***/assets/icons.d2dcedabc8faa5a71473.js"></script><script type="text/javascript" src="https://***/assets/bundle.7d31cc04d88c6681ce75.js"></script><script type="text/javascript" src="https://***/assets/short_url.e66827895350ae2fac63.js"></script></body>
</html>

what programming language / technique is this? it shows all the content on my browser, but the html tags remains invisible. any idea what it is?

1

There are 1 answers

0
adamjansch On

That's some straight up Javascript you're seeing there, and the code running will be generating all the necessary tags client side (hence why viewing the source doesn't show them).

Try right-clicking on an element and using "Inspect". That should open the browser's dev tools and show the HTML code the Javascript is generating.