How do I get source code from a webpage?

Question

How can we get the source code of a webpage from a webpage in php and/or javascript?

If from domain other than yours you must use server side language due to Same Origin policy. Otherwise (same domain) you can use AJAX. — Shadow The GPT Wizard, Jun 07 '12 at 12:58
@user1365010 I'm not familiar with javascript, but if it's possible I would not do it on client-side. — Leri, Jun 07 '12 at 13:00

D.Snap · Answer 1 · 2019-10-09T02:48:43.597

11

In Javascript without using unnecessary frameworks (in the example api.codetabs.com is a proxy to bypass Cross-Origin Resource Sharing):

fetch('https://api.codetabs.com/v1/proxy?quest=google.com').then((response) => response.text()).then((text) => console.log(text));

edited Oct 09 '19 at 02:48

answered Oct 09 '19 at 02:40

D.Snap

1,704
1
22
15

score 3 · Accepted Answer · edited May 23 '17 at 12:17

Thanks to:

@PLB
@Shadow Wizard
Getting the source code of an iframe
http://www.frihost.com/forums/vt-32602.html
@Matt Coughlin.

First, you must know that you will never be able to get the source code of a page that is not on the same domain as your page in javascript. (See http://en.wikipedia.org/wiki/Same_origin_policy).

In PHP, this is how you do it :

file_get_contents($theUrl);

In javascript, there is three ways :

Firstly, by XMLHttpRequest : http://jsfiddle.net/635YY/1/

var url="../635YY",xmlhttp;//Remember, same domain
if("XMLHttpRequest" in window)xmlhttp=new XMLHttpRequest();
if("ActiveXObject" in window)xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
xmlhttp.open('GET',url,true);
xmlhttp.onreadystatechange=function()
{
    if(xmlhttp.readyState==4)alert(xmlhttp.responseText);
};
xmlhttp.send(null);

Secondly, by iFrames : http://jsfiddle.net/XYjuX/1/

var url="../XYjuX";//Remember, same domain
var iframe=document.createElement("iframe");
iframe.onload=function()
{
    alert(iframe.contentWindow.document.body.innerHTML);
}
iframe.src=url;
iframe.style.display="none";
document.body.appendChild(iframe);

Thirdly, by jQuery : http://jsfiddle.net/edggD/2/

$.get('../edggD',function(data)//Remember, same domain
{
    alert(data);
});

Forget the Same-Origin policy in XHR! ;) – RixTheTyrunt Jul 02 '22 at 12:46 — RixTheTyrunt, Jul 02 '22 at 12:46

score 2 · Answer 3 · answered Jan 03 '21 at 01:41

Following Google's guide on fetch() and using the D.Snap answer, you would have something like this:

fetch('https://api.codetabs.com/v1/proxy?quest=URL_you_want_to_fetch')
  .then(
    function(response) {
      if (response.status !== 200) {
        console.log('Looks like there was a problem. Status Code: ' +
          response.status);
        return;
      }

      // Examine the text in the response
      response.text().then(function(data) {
        // data contains all the plain html of the url you previously set, 
        // you can use it as you want, it is typeof string
        console.log(data)
      });
    }
  )
  .catch(function(err) {
    console.log('Fetch Error :-S', err);
  });

This way you are using a CORS Proxy, in this example it is Codetabs CORS Proxy.

A CORS Proxy allows you to fetch resources that are not in your same domain, thus avoiding the Same-Origin policies blocking your requests. You can take a look at other CORS Proxys:

https://nordicapis.com/10-free-to-use-cors-proxies/

score 1 · Answer 4 · answered Jun 07 '12 at 13:31

Ajax example using jQuery:

// Display the source code of a web page in a pre tag (escaping the HTML).
// Only works if the page is on the same domain.

$.get('page.html', function(data) {
    $('pre').text(data);
});

If you just want access to the source code, the data parameter in the above code contains the raw HTML source code.

How do I get source code from a webpage?

4 Answers4

In PHP, this is how you do it :

In javascript, there is three ways :

Linked