Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

js hook on html load process in browser

Imagine I have following html with many items:

<html><body>
    <img src=http://host.com/pic1.jpg>
    <img src=http://host.com/pic1.jpg>
    <img src=http://host.com/pic1.jpg>
</html></body>

Site owner adds some script to the page without other modifications:

<script>
  var some_super_function = ... // what can i put here?
  some_super_function('host.com','ghost.com');
</script>

and during loading of this html, host.com is replaced with hgost.com, so images are loaded from another server, as if the urls were:

<html><body>
<img src=http://ghost.com/pic1.jpg>
<img src=http://ghost.com/pic1.jpg>
<img src=http://ghost.com/pic1.jpg>
</html></body>

I guess selecting $('img') and tuning .attr() is not a good idea, because this may work only after page has loaded and I don't want the browser to reference host.com at all.

I guess angularJS is doing something like that, isn't it?

Is this possible?

Thanks.

like image 403
Stepan Yakovenko Avatar asked Sep 20 '26 17:09

Stepan Yakovenko


2 Answers

Tested in firefox:

<body>
  <script>
    document.write('<!--');
    var body = null;
    setTimeout(function() {
      body = document.body.innerHTML
      console.log(body)
    }, 0)
  </script>

Now you can extract page contents from body variable, do with them whatever you wish and then put into page (with jQuery('body').html(...) for example). I don't know if it would work if there were comments in the page. There are other ways to stop page from loading. Something like document.write('<script>');. I also tried document.write('<style>'); in firefox, also works.

like image 130
Serge Seredenko Avatar answered Sep 23 '26 06:09

Serge Seredenko


You can use angular ng-src and {{}} syntax to bind your img domain:

var superFn = function(){ $('img').attr('src','ghost');  }
superFn();

angular.module('myApp',[]).controller('myCtrl',myCtrl);

function myCtrl($scope){
	$scope.domain = "a3.mzstatic.com";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">

 <img ng-src="http://{{domain}}/us/r30/Purple69/v4/d5/9e/6d/d59e6dfa-2176-7bc1-20a8-d3a1316c7bb8/icon100x100.png" > 
 <img ng-src="http://{{domain}}/us/r30/Purple69/v4/d5/9e/6d/d59e6dfa-2176-7bc1-20a8-d3a1316c7bb8/icon100x100.png" > 
 <img ng-src="http://{{domain}}/us/r30/Purple69/v4/d5/9e/6d/d59e6dfa-2176-7bc1-20a8-d3a1316c7bb8/icon100x100.png" >
 
 </div>
like image 42
Sing Avatar answered Sep 23 '26 05:09

Sing



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!