Dynamically Load External Webpage - javascript

I see this site and many others answering similar questions, but often in ways I fail to understand or just do not make sense. And often in contradictory ways (maybe the spec keeps changing?). And I see posts about how to set up cross domain JavaScript communication, but I do not need to communicate with this external content (and I am still not sure if you must have access to the code-base of both child and parent or not, for these hacks to work).
I need to show another person's webpage, on another domain, in a box on my page.
SO basically this is like clicking a link, but instead of specifying that the browser should open this in a new tab or a new window, I want the browser to open it in a in-line frame type deal on the current page. So even I know enough about security to know that there are no security/communications issues with this feature.
But assuming that the browser developers have removed this completely reasonable feature, how do I go about doing this? I have heard talk about some Json data type thing being allowed, but still have not figured out exactly what that means. Can I contact any random external page and get some json summery of the page, or how does this work? (I saw an example with Wikipedia, but I was not sure exactly what was being returned, and if any random URL would work just as well).
I can use PHP for this, but that is just stupid. I would basically just be setting up a proxy to access content I am randomly banned from because of the programming language I am trying to access it from.

You are looking for iFrames. Note, however, that there are many security restrictions due to potential cross-site scripting vulnerabilities through improper implementation.
You can change the source of that internal frame by simply editing the source attribute of that iframe

Related

Can you block a website from being in a browser's history?

Strange question here.
I'm building a website for a client that is an abused women's shelter. They want to ensure the safety of women looking for their services.
One of their requests is that if someone uses their website, that somehow it won't register on the browser's history. I've never seen that before, but need to at least look into it.
My only thought is to somehow load all pages within a single page, then make that page not have the actual shelter's name in the title and url. So if someone happens to look at the history, it'll show like "Sue's Bakery" instead of the actual name.
This may be a stretch, but I'm just looking for any suggestions here.
If there is actual code to block the website from a browser's history, that'd be even better.
Thoughts???
There's no way to prevent a site from appearing in a browser's history. Likewise there is no reliable way to detect if the user is using Private Browsing mode (and so redirect them to a "safe" site if they're not).
As others have said; if they're accessing the site via Google, it would be best to offer clear instructions on how to remove items from a browser's history (showing different illustrated instructions for each browser).
If they're accessing the site from somewhere else, instructions could be listed there to inform them how to enable (and later, disable) Private Browsing mode.
You mention attempting to hide the site via a fake name. One way this might work is placing the site into a dummy site with an iframe pointing to the "real" site. The iframe could be for "Sue's Bakery" (as you said), but the iframe would house the content from the real website. Unfortunately I don't believe Google would like this, and so nobody will ever find the "safe" iframe version of the site through Google. Would this be a problem?
There may be a way to try and take users to the iframe version of the site, and Google to the "real" version, but it would likely be unreliable not something Google would like you to do (perhaps Google should add such a feature to their rankings for registered abuse charities -- hmm).
Sorry for not being able to offer a clear and easy solution, but I don't believe one exists.

Executing code immediately after navigation: Browser plugin?

I am building a tool which uses (dynamically inserted) JavaScript to modify webpages. Any webpage.
The idea is to allow a user to use it to record a series of changes to an existing webpage like google.com, (for the sake of example suppose a change is to apply a 10 pixel solid black border to all <img> tags, this change can obviously be encoded as a short and sweet snippet of jQuery), and the tool generates a link (or identifier) that contains this metadata and the url representing the "starting point" if you will (in this case google.com).
Now the problem I've run into is the entire Same-Origin security policy, whose purpose is to expressly deny the exact kind of thing that it seems like I need to do.
What I need to do is essentially navigate to a particular site, and then execute javascript in the context of that site. Neither I (the author of the tool) nor the user with whom I share my script necessarily have control over the site, so in theory the security model if implemented properly should prevent this concept from working.
Because of this I cannot have a single clickable link that kicks off the process of running my code on some site. It totally makes sense too. It would make it trivial for an attacker site to send a disguised clickable link that will run code that acts as me on any site they want.
But, the way to get around it is to tell the recipient to do a single additional step. First they open the URL of the site just like normal, then they paste a bit of javascript:(function(){.....})(); into the URL/omni bar. That is (AFAICT) completely legitimate and should be permissible because the user understands that this script is being executed. Whether or not it should be allowed to run JS so easily at this point is more or less irrelevant, as it basically just works everywhere now.
This isn't too bad but I think the user experience suffers unnecessarily. For example it looks like a native app would be necessary to get any better than pasting the JS into the URL bar on an iOS device for example, but on a plugin-accepting full browser it seems like a plugin can achieve what I want.
Which is: a navigation to an arbitrary URL followed by code execution (this code originating from an authorized source) with one click.
But I'm not sure where to start. What API could provide me this ability? I am hoping I can get away with Greasemonkey-type scripting (as Greasemonkey compatible plugins are available for pretty much all the good browsers), but I can't tell if there is enough power available.
I am actually still a little unsure about security related problems with this. I used to have a huge paragraph here but it all boils down to "social engineering".
This kind of things are generally done with bookmarklets.
On your website featuring your script, create a link that has href="javascript:(function(){/* ... */})()". Then a user could simply drag and drop that link into his favourites (bookmark it). And use it as button in a favourites bar.
Your bookmarklet could contain directly your script, or a simple loader that injects a <script src=http://mywebsite.com/script.js"> tag into the document, this way you can update your script and "distribute" it directly to all users.
Security is always about knowledge. Or to put it the other way around: Not knowing something makes you feel insecure.
There is no secure way to do what you want which is my web browsers forbid it by default. There are workarounds (like pasting the URL as you explained above) but all of them are only secure as long as the user knows what she is doing.
That being the social implications. Now the technical solutions:
You try a bookmarklet
You can use a browser plugin like Greasemonkey
Both allow to run arbitrary JavaScript. The former needs explicit permission from the user each time, the later one does it automatically.
Of course, if you move the core of the functionality to a remote place, it would be hard for even knowledgeable users like me to understand and trust what is going on.
That is when the meat of the function isn't in the bookmarklet or the greasemonkey script and when you instead add a <script> tag with a remote URL. That would make it harder to make sure your script doesn't do something "odd". For example, you could return a different script when I try to download the JavaScript without using your bookmarklet.

Javascript concept using history object

I am interested in making a website that flashes through a visitors entire web history when they visit. I plan on using JavaScript to grab the history on each viewer's computer and animate through it with varying speeds depending on how much they had. My thought was to use history.length to determine the length of the visitor's history, and then use history.go() to navigate -1, -2, -3, etc. through the entire web history. I recognize that load times would be HUGE, but right now I am just trying to think through the concept. This related question seems like what I would use for the basis of my code, however, I don't understand why they describe that this method would not work. I am a student who is very new to JavaScript.
Do you guys have any knowledge of whether or not this will work, or any ideas on ways to achieve my idea?
You can call history.go() once. That's about as far as you'll get. The reason is simple, once you're on the previous page, your javascript is gone. Iframes won't work either due to the fact that you can't execute your own JS in an iframe that has a page from another domain. Read about same origin policy for more info on that.
The only real solution I can think of is a browser extension. The reason that'll work is due to the fact that your JS can persist across multiple sites. You'd probably just need a userscript in each page that does the following:
check a variable to see if the functionality is enabled
if it is, call history.go(-1) after a timeout (to control the speed)
I'm most familiar with Chrome so I'm imagining a browserAction to enable/disable the script and a content script that does the redirect. Other potential options include Greasemonkey (Firefox), Tampermonkey (Chrome), Personalized Web (Chrome) scripts
As stated in the question you linked to, JavaScript and / or the DOM does not give you access to the entire browser history since that would be a severe privacy violation. Imagine going to a site and having them be able to know every site you ever visited in that browser.
This would potentially give the site access to:
Sessions you are still logged into on other sites (if they store the session key in the URL, as some sites do)
Insight into what kind of activities you perform (are you a moderator on site X?)
Enormous amounts of data on what you are interested in.
This is not something that standards bodies or browser manufacturers thought users would be interested in sharing with everybody. That's why there isn't an API to walk through the browser's entire history.
#sachleen has already provided a very nice in-depth answer on how you can get around this limitation for individual browsers if you want to build this application. For the sake of completeness I'll simply mention the key term: "browser extension". :-)

Getting multiple pages talking to each other

I am coding a Web app that needs to have multiple tabs/Web pages open. And I would like them to talk to each other. And I don't want the pages to talk to the server. So is it possible with HTML5/JS? By the way they are all on the same domain name.
I've never come across a webapp which used the browsers tab functionality as a means of navigating. I don't want to say it's wrong, because I don't know your particular requirements and, of course, I haven't played with every single webapp in the world.
However, would it not make more sense to implement your own tabbing system within your web app than rely on a feature of the browser which is probably inconsistently implemented and which may be affected by the user's personal settings?
If you're set on this path, and offline functionality is a definite requirement, then I think your only option is using the LocalConnection feature of Flash, as Brad suggests in the comments. I imagine you could create a bridge with ExternalInterface to pass any data from Flash to the page. The Flash would need do nothing else but marshal the communications (it could occupy a single pixel somewhere on the page). This is a similar approach to the one the dojotookit took with their Flash storage, designed to provide a more capable alternative to cookies.
I think the answer here is that what happens in the view, doesn't have to reveal whats happening behind the scenes.
You can make DOM elements on a page communicate with other DOM elements on the page without making a asynchronous call to the server if thats what you're asking.
If you have two tabs in the.. lets say chrome browser, and you want one DOM element to talk to another DOM element on a completely different browser tab. You have to make that asynchronous call to the server which will shoot one back to the other tab. But you don't have to show that happening in the view :) (This can be done with Node.JS/Socket.io, an example would be a chat room built with HTML5/JS)
Hope this helps
I know this is an older post, but you may want to look into local storage, or even cookies set via javascript.
There are 2 reliable ways you can have pages in other tabs (or across iframes) talk to each other.
The postMessage API allows pages to send messages even when they are on different domains. There are some security issues to be aware of to avoid malicious behavior. You can read about that in the linked article.
localStorage and sessionStorage will dispatch a "storage" event when they are changed. Using this event you can be notified in other tabs when the data has changed. This only works within the same domain. Because this is all you need, it might be the wiser option to avoid any security issues.

(HTML/javascript) Handling a cross-domain iframe

I have a page which displays a different website (say www.cnn.com) in an iframe.
All I want, is to make links inside the iframe open in the parent window, and not inside the frame.
I know that this is normally impossible for security reasons, which makes good sense to me. However, the page I'm working on is not going to be public, but only on my private computer, and if I have to switch off certain security features to make it work, it's OK.
Is there any way at all to do this?
I have been combing through the web all day for a solution. If I missed a post here or elsewhere, please point me to it.
I read that in Firefox (which I'm using), it's possible to get extended permissions in javascript if the script is "signed" (or a particular config entry is changed). However, I don't know how to exploit these extended permissions for my purpose...any hints?
I'd also consider different approaches, e.g. not using iframes at all. Whatever the method, I want to be able to embed several websites, which I have no control over, within one page. Links clicked in any of the embedded websites should open in the parent window. It's just supposed to be a handy tool for myself. I should say that I have basically no knowledge of javascript and am just learning by doing. If you can confidently say that what I want is not possible with any client-side methods, that would help as well. I guess it would be rather straighforward to do it e.g. with php but I don't want to setup a webserver if it's not necessary. Thanks for any tips!
This is a bit different solution than you asked for, but might be a better way to attack the problem as it might give you the ability you seek without compromising any normal web security.
I wonder if Greasemonkey (add-on for Firefox and other browsers) might be a useful solution for you as it allows you to run local javascript against other pages to modify them locally, somewhat regardless of normal security restrictions. So, you could run through all the links in a CNN page and modify them if that's what you needed to do.
To use it, you would install the greasemonkey add-on into Firefox, write a script that modifies CNN.com the way you want to, install that script into Greasemonkey, then target the script at just the web page CNN.com. I think it should work on that site whether it's in an iframe or not, but your script could likely detect whether it was in an iframe if you needed to.
It would appear the HTML5 seamless attribute would be what you are looking for. But it doesn't appear that anything supports it yet...
http://www.w3schools.com/html5/att_iframe_seamless.asp

Categories