Load external page inside div and change it - javascript

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?

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.

Related

iframe setting content

I have been searching for this for days and was wondering if anyone could help me with the answer to this.
So, I am currently building a system which allows users to create html pages which can include css and js links and possibly inline scripts/styles within it.
I want the user to preview their output, i was originally using a div tag and adding the html output to it but as all the extra styles and scripts also affected the parent page, i decided the only option was probably to use an iframe to put the content in.
To stop bootstrap links and Jquery conflicts to the parent element, i need to run the iframe in a sandbox environment from what i know but i have no idea how to set the content of the iframe when its in sandbox mode.
If you try:-
$("example iframe element").contents().find("body").html("example html inline styles etc");
this does not work and blocks access due to the iframe being sandboxed and not allowing the origin.
Sandboxing an iframe seems to be the only way to stop multiple instances of Jquery "one on the parent and one in the iframe" from conflicting, i did try noConflict which seems to work but that does not fix conflicting multiple bootstraps being loaded in the parent and iframe elements.
does anyone know either how to add content at runtime to a iframe that is sandboxed without getting blocked access or a different unique container approach i can use?
i appreciate any help or guidance anyone could give on this as i cannot really find much information about it.
I have finally found out what the problem is with this situation, i do not need a sandboxed iframe as i now know why Jquery and Bootstrap are conflicting without having to sandbox the iframe. I see lots of posts telling you to use something like the code below to put content in an iframe.
$("example iframe element").contents().find("body").html("example html inline styles etc");
the problem with the method above is that its opening the iframe up for putting content inside it but its not specifying the closing of the iframe.
This is why even on a normal none sandboxed iframe Jquery and Bootstrap conflict because its leaking back into your parent page by not being closed. The real method for putting content into an iframe directly should be the code below as it ensures the connection is closed off appropriately.
var myIframe = document.getElementById("ID OF THE IFRAME")
var iframeDoc = myIframe.contentWindow.document;
iframeDoc.open();
iframeDoc.write("HTML HERE");
iframeDoc.close();
by doing the above code you are not only modifying the content inside the iframe but your also closing it off once you have finished writing the content. This is very important in ensuring Iframes stick to their purpose as being a completely isolated page element and it stops js and css leaks into your parent page.
i hope this answer helps save time for anyone else who comes across this particular problem with iframes and is adding content at run time using the wrong method.

Loading Content Into div - Resource Issue

I have a web component which another group wants to include in their web application.
They have asked that I render my page into theirs by rendering into a div. From my understanding they are going to provide an html page similar to this.
TheirComponenetPopupWindow.html
<html>
...
<script src="myscript.js"></script>
...
<div id='render_here'></div>
</html>
where myscript.js will be a script I will need to write.
Now, I have seen countless examples on stackoverflow where I can use $(#render_here).load(..) or $.ajax(..,{..}). However, all of these leave me with a serious problem. That all resources my page loads are now relative to the page I am being rendered into. This off course breaks my page as all of my scripts, images, and css files fail to load.
Is anyone aware of how I can use the methods mentioned above, or maybe a method I am unaware of, where I can render into a div and not break my resources?
You can try to create a iframe in the render_here div, and set the src of iframe with you page url.
You will need rewrite your code using absolute URLs if you want them to be portable to other locations such as a third party's site.
If you don't require interaction between your code and content on the third party page then an iframe would probably save you a lot of time and effort, but access to the third party's page would be prevented from within the iframe.

How to remove all javascript from an html string (with javascript or jquery)?

I want to display html provided by a user in a page. My page is almost entirely dynamic (JS code), and I was wondering if there's an easy way to sanitize it?
Like, maybe I could remove all the <script> and <iframe> tags and unbind all the events contained in the string (or remove any html attribute starting by 'on') in order to not have any javascript code from the string possibly executed?
Can the users possibly insert javascript with a css 'content' property in a style attribute?
The jquery $(...).text(...) function doesn't help me, since I want to preserve any html mark-up or css styling.
If there's no easy solution i'm ready to live with a whitelist of html tags (table span div img a b u i strong...), but i'd rather not have to white-list the attributes too.
The more foolproof way to show user content safely is to embed it in an iframe who's origin is a different domain than your host web page. This is what jsFiddle does. The main page is served from jsfiddle.net, but the user scripts are served from fiddle.jshell.net. This lets the user content do what it would normally do, but the browser's cross-origin protection keeps the user content from messing with the host page or domain or cookies, etc....
Trying to strip all possible places that scripts could be in the content is a risky proposition which you will probably forever be chasing new attack vectors. I'd personally much rather let the browser be in that business and put the user content on a different domain. Plus, allowing the user content to have it's normal JS will also let it work as desired.

Editing Facebook Like-Box Css on The FLy?

I am not a coder but, i am able to get my way around code most of the time. However, i found that this is the best place to ask questions relating to code stuff.
I have been working on a website for a client and i am at 95% - the only problem i have is facebook like-box. i have found several tutorials on the web to modify the like box css, and i have implemented most of the recommendations but, i have no favorable results.
Please - stackoverflow help!
I know jquery/javascript is a very powerful language. And facebook like uses javascript iframe/xfbml.
what code would you use, if you were to modify the like box css elements before loading them .
I say load cos i am loading my like box via ".load" ajax. So, when a user clicks the facebook button jquery loads it.
In short: how would i edit a css file on the fly, and then load the edited version afterwards.
thanks
The key problem that you'll have here is that FB's Like button is loaded inside an iframe - a self-contained HTML document within your page (if you use firebug or webkit inspector to inspect the like button, you'll see it's within <body>, <html>, then <iframe>).
The thing about these self-contained pages is that you can't access or manipulate them from the surrounding document (your page). You can change the 'src' attribute (telling the iframe to load a new page), but you can't apply or change styles on the elements inside the page. This is a security limitation that browsers have.
I know that it is possible to have a custom-styled like button, but I don't think it's done with the iframe method.

Ajax entire page - display only one div and retain CSS and other header material?

A client wants a merch shop on their site, and has set one up. I could iFrame in the whole page to the merch page, but frankly the merch site is an eyesore, and their site has a very particular feel to it. So I'm considering using an AJAX GET to grab the whole page, then javascript to display only the div with the merchandise in it. However, there are a lot of javascript includes (etc) on the merch site that I'd need to make sure are still present for the div to work correctly.
Any feeling on if this would work or not? Would the displayed div take its stylesheet and scripts from the AJAX'd page? Can I put the div in an iframe instead?
Opinions?
It sounds like an ugly solution. Isn't it better to do this serverside instead, for example let a PHP script read in the page and to whatever magic it takes to display it?
Using AJAX to load entire pages is ugly for a couple of reasons, including:
It breaks the URLs (can be worked around but requires extra work)
It's hard for search engines to crawl your site
It breaks some GUI elements in the browser, such as loading visualisations
looks like you can use jquery load function http://docs.jquery.com/Ajax/load

Categories