3

I am trying to figure out how to load an external page inside a div and change it's HTML / CSS. Is it possible?

I got stuck with Same-origin policy, since it doesn't let edit html with a different origin.

For clarify, I want to highlight some content inside it's page and share it.

What are the restrictions to do that and possible ways to solve?

rodrigocprates
  • 498
  • 6
  • 22
  • 1
    Try this at your server side, or follow this link http://stackoverflow.com/questions/3076414/ways-to-circumvent-the-same-origin-policy – valar morghulis Apr 07 '15 at 07:03
  • You should review [this](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy) with regards to the security and origin of the internal web page you are trying to load. – Matt D. Webb Apr 07 '15 at 07:06
  • I got it here: http://icant.co.uk/articles/crossdomain-ajax-with-jquery/using-yql.html . But the problem is that it's not loading style. How could i retrive with yql? – rodrigocprates Apr 08 '15 at 05:42

1 Answers1

1

While this might be a really bad idea from a security standpoint, you could do an Ajax GET on the page you want to include and inject its content in the div using the html() jQuery function (strip the .. tags beforehand).

You will be able to tinker with the HTML, but you won't get the stylesheets this way.

Loading external pages inside your page seems like a bad idea to me, though, as it might expose you to XSS and other exploits if the remote page scripts are executed.

Another solution would be to use an iframe, however old-fashioned it may sound.

Ana Vinatoru
  • 181
  • 1
  • 7
  • how could I easily get stylesheets as well? – rodrigocprates Apr 22 '15 at 17:47
  • 1
    Take a look here: http://stackoverflow.com/questions/574944/how-to-load-up-css-files-using-javascript or here: http://stackoverflow.com/questions/2126238/can-i-load-external-stylesheets-on-request . You can also use jQuery to set the style on a specific element - http://api.jquery.com/css/ – Ana Vinatoru Apr 22 '15 at 18:56