0

For example the page is sending a 'link' http headers field that I don't want to load an async CSS from. How can I block it? Is it possible that I get those headers, remove the LINK field from it, and then page will load without this addition CSS (non-placed in page body)?

I have tried to modify the headers to no avail.

request('https://www.google.com', function(err, resp, data){
  if (resp.statusCode == 200) {
    console.log(resp.headers); // headers
  }
  else {console.log(err);}
});

Request is a node.js module. I need to modify headers before they are loaded by browser (passing modified headers by 'render' with combination of ejs template is not working).

Proo1931
  • 103
  • 1
  • 12

2 Answers2

2

Yes, its possible to remove the css and js links (they are not headers) from the html response and just display the result using jsdom or cheerio.

Zuei Zukenberg
  • 81
  • 3
  • I'm not speaking about HTML page response, I'm speaking abour HTTP headers response. If server is giving you the response - it is possible to remove part of the HTTP headers, BEFORE browser get them and start it async job to donwload them ASAP? – Proo1931 Jun 03 '19 at 11:21
  • 1
    @Proo1931 The "link" to css and js exists in HTML page response body, not in HTTP headers. – shaochuancs Jun 06 '19 at 13:46
  • Ohhh so at first we need to add CSS and JS to a head element of a HTML page, and then we can request loading them async via HTTP headers link field... Ok, I got it now, thanks for explaining @shaochuancs, zuei post was right then, I will accept it. – Proo1931 Jun 08 '19 at 11:24
  • @Zuei Zukenberg by removing CS and JS links you mean edit the content I grab with help of request and jsdom modules - by deleting the link/script tag? Or there is more simple way of doing this? – Proo1931 Jun 09 '19 at 15:31
  • Hm.. A simple solution could be use a regex, otherwise, using jsdom you can target all style tags and remove them from the dom. – Zuei Zukenberg Jun 11 '19 at 12:53
  • Honestly I don't know why my css are overridden... JSdom is mutating content without loading scripts and even css. How can the page replace my styles when I only request a page, pass to JSdom and render by ejs template engine? This i weird for me. I even replace HTTP headers link fields, to no avail. I simply don;t know how my styles are replaced (where - bu what module). – Proo1931 Jun 16 '19 at 20:58
  • After you remove the js and css from the jsdom document, you return the result: ```content = serializeDocument(window.document)``` -- [See also](https://stackoverflow.com/questions/31828568/jsdom-in-nodejs-how-do-i-get-back-the-manipulated-html) – Zuei Zukenberg Jun 17 '19 at 11:55
  • In order to remove the css and js links you can use pure javascript, there are no packages involved. For css [see](https://stackoverflow.com/questions/9252839/simplest-way-to-remove-all-the-styles-in-a-page) and for js [see](https://stackoverflow.com/questions/6659351/removing-all-script-tags-from-html-with-js-regular-expression) – Zuei Zukenberg Jun 17 '19 at 11:57
  • But explain it to me how does the CSS override my own styles - when I only pass to JSdom the page by Request and and I window.close() the JSdom and render the response. I have no idea how this could replace my own styles... I thought that by setting var document = window.document; inside done: function (err, window) at jsdom.env - external foreign page css styles applied to my styles? When I later render a page (with ejs templates) this should only load my own styles, right? Could you write something at prostyler@protonmail.com so I could send you more situational code? – Proo1931 Jun 17 '19 at 14:55
0

Update: The OP is talking about "Web Linking", the RFC5988 stuff on prefetch resource with HTTP response header, and want to block such prefetch behaviour.

In order to do that, a proxy can be made manually, block all unwanted data, and only return HTTP headers and content of interest. For example:

router.get('/proxy-to-google', function(req, res) {
  request('https://www.google.com', function(err, resp, data) {
    // get interested headers from resp object, and set it in res
    res.set('Example-Header', 'XXX');
    ...
    res.send(data);
  });  
});

There are 3 types of head/header in the world of web, and it seems you have confused with these concepts.

  1. HTTP header. These are the header information delivered in HTTP request and response. In the example of question, the HTTP response headers are printed.
  2. <header> element in HTML. These are visible element exists in HTML page body, mostly used to wrap elements such as title, navigation bar etc.
  3. <head> element in HTML. This is the meta element of HTML document. It is not visible in page, but rather responsible to mark important information of HTML document, such as CSS stylesheet links, JavaScript file URLs etc.

In your case, you are trying to block the 3rd kind of "head" above, and you can make it using @Zuei Zukenberg's proposal. This <head> element has nothing to do with HTTP headers.

Community
  • 1
  • 1
shaochuancs
  • 15,342
  • 3
  • 54
  • 62
  • No I'm trying to catch HTTP header - 'link' and it want to asynchronously load CSS and JS - but I have discovered that also HEAD element in HTML PAGE contain those files. HTTP header want only download them ASAP - an that cause error in my app - cause before I can cut out HEAD HTML part with those links, they are already loaded (preload). – Proo1931 Jun 09 '19 at 09:42
  • Well, it's a pretty weird design to include CSS and JS "link" in HTTP headers. – shaochuancs Jun 09 '19 at 11:02
  • Yea I know, I was surprised too (didn't know there is LINK field in HTTP headers that you can assist with styles and scripts with rel=preload option, but how to take them down? You have any idea? – Proo1931 Jun 09 '19 at 13:47
  • Ah, you are talking about "Web Linking", the RFC5988 stuff. Do you want to disable web linking prefetch for your own website? Or do you try to disable it for some 3rd party website, such as Google? – shaochuancs Jun 09 '19 at 14:39
  • I test a website - and it load styles and scripts by HTTP headers link field. It mess with my own scripts later on, so I want to cut them out. I have installed jsdom, but don't know how to eliminate downloading for example a css style that has important! rules that change my styles. – Proo1931 Jun 09 '19 at 16:46
  • Well, in that case, you can make a proxy manually, and only return HTTP headers and content of your interest. – shaochuancs Jun 09 '19 at 23:19
  • hmmm... that is an idea! Thanks. – Proo1931 Jun 16 '19 at 20:54