Improve the usability of 3rd party application - javascript

A 3rd party application we use is causing a great deal of issue because the user isn't clicking a Register button prior to clicking the Launch button or if they do click Register first, this Details page with both Register and Launch buttons refreshes and goes to their portfolio. They have to then re-find that item in their protfolio list.
The 3rd party application I believe is a .NET and is using knockout.js and does not allow embedding in Frames.
What are some options for providing guidance to the user or ideally make this process less painful?
I was hoping to provide an internal webpage that could send both Request and Launch actions with a single button click. I posted an earlier question Knockout data-bind click but couldn't get something to work.
There seems to be a bunch of similar questions on SO but I am not sure if these questions/answers are for automating button clicks on self contained applications as I want to do it if from outside the 3rd party application (do I even have access to their view model?). This app prevents embedding it in Frames.
Auto-click button element on page load using jQuery
How to auto click button in knockout js
Currently I have a link from internal website that opens two browser windows side by side. One goes to 3rd party and 2nd window with instructions. This is OK but we found people don't want to read. I really want to have a single button click or at least be able to send one request at a time from the internal webpage. Or perhaps overlay a joyride type guidance onto their site, if possible.
Here is the 3rd party button code
<a class="btn btn-large btn-blue" href="javascript:void(0);"
data-bind="click: $root.clickAction.bind($data, ActionType)">
<span data-bind="text: Title">Register</span></a>

You basically want to hack the 3rd party app, but you control the environment, so it doesn't sound impossible. (I won't talk about whether I think it's a good idea, I will just list a few options you may have.)
Removing the X-Frame-Options header
You are saying the 3rd party app does not allow to be embedded in a frame. That is done by a response header, most probably X-Frame-Options (or it can be Content-Security-Policy: frame-ancestors, but it doesn't actually matter). All you have to do is remove that header and voila, the app can be loaded in a frame.
To remove the header, you will need some kind of a proxy. If the app is served on plain http, it is really easy, any kind of http proxy can remove the appropriate response header. If it is served on https, you have to do a few things to actually make it work (create a certificate authority, add the root cert to clients as trusted root, use the proxy to connect to the app and besides removing the header, replace the https cert with your own, which will then be trusted on your clients).
Note that this will weaken the security of the 3rd party app and it will make it vulnerable to attacks similar to clickjacking (and also pixel perfect timing and so on, all frame related attacks).
Inject custom script via proxy (edit: added this later)
With a proxy as described above, you don't need to remove X-Frame-Options. It's much better to inject your own javascript into the 3rd party application page, which can do whatever you want on the original page as it has full access to the application DOM. For instance it can change behaviour so that the appropriate buttons are clicked. :) I would do this if I wasn't able to install a browser extension on clients (see below).
Using a custom client
Instead of using the browser as the client, you could make a custom client that in practice acts as a browser, but disregards the above headers. This could also do the clicks you want without much hassle. The drawback is your users would have to start the custom client instead of using their browser to use the application. This is probably easier to do in a mobile environment where you have things like Xamarin and WKWebView.
Browser extension
An easier and probably more feasible variation on the custom browser idea is a browser extension. It could activate on the application url, and it could very easily do the clicks you want on the appropriate pages (browser extensions can request full access to pages regardless of headers). You would only have to install the extension once on clients. I would probably do this if I had to.

Related

iframe not active unless receives user interaction

I've been working on a requirement that involves a website fetching/manipulating data stored on a different domain. There didn't seem a way except for enabling CORS on the other server to allow me to get and modify data from a different domain. However, that caused some issues with Office 365 apps and I had to take a different approach.
The approach is to use postMessage to talk to a hidden iframe (not a good approach, but I was insisted to use it) on the page that is running on the target domain. The source page posts message along with information about the REST call to the hidden iframe which makes a requests on behalf of the parent page and uses postMessage to return back the results.
Everything works fine except for when the website is being used on an iPhone. Turned out placing alert calls in the script running inside the target iframe makes it to work but removing the alert calls sort of disables the target iframe from making those cross-origin network calls.
My theory is that it is due to the security of mobile Safari that in order to make cross-origin calls from an iframe running on a different domain, the user needs to provide their consent by interacting at least once with the embedded iframe. Does that sound correct?
The comment by diodeus-james-macfarlane is the closest that we could go but the iframe being hidden, there was no way we could have placed a control for the user to interact with, even if that was only for it to work.
To my surprise, turning off a setting on the SharePoint site made it work. The setting was around mobile view compatibility and without that, the iframe is able to make HTTP requests, send and receive messages to and from the parent webpage.

Prevent unsecure HTTP requests

I have a blog on tumblr, and I am trying out the website with SSL. Now with Chrome and possibly other browsers, any images and scripts that are not loaded using HTTPS are automatically blocked, and I lose the happy little green lock icon in the address bar. I am able to edit the HTML of the theme, however there are too many external scripts that are used to load images (and other scripts) to be able to weed out and fix every HTTP request. Obviously, I don't have access to the web server settings for tumblr.com or I could have easily configured HTTPS redirects or something.
I was wondering if there would be any way to prevent the HTML and other included scripts from making HTTP requests through the use of javascript. The website appears and functions just fine without the blocked elements, and I just want the lock icon to show my visitors that it's a safe website.
I have no intention of advertising my blog here, as I'm sure it is against the user policy on this forum. That being said, if it is helpful for troubleshooting reasons, I can post the link if requested.

How can I get HTML to link to a browser (or system) specified URL?

I'd like to be able to create a "HTML link" that the user can click on and be taken to an URL (location) specified either in the browser (preferences?) or system environment.
Is this possible? Any suggestions on how to do it please?
For example, it may look something like this (or alternatively it could be a clickable image or even a submit button):
"Click here to go to your preferred news site."
When the user clicks on "here" the browser would go to a location specified not in the HTML but somehow in the browser (preferences?) or some system environment variable (OS specific etc.)
Of course, the user would have to set up this preference or environment variable (or have some local application or better Web page that could set it - when approved by the user).
This is sort of like most OS these days allow you to set "preferred app" for image processing or playing media. I would like to set preferred Web sites for certain tasks.
Thanks for any suggestions. Hopefully with Javascript and modern browsers and perhaps HTML 5 something like this is possible.
Update: I would like the user to be able to set this once for themselves (e.g. in the browser or the OS) and then for this to work on any site they go to that includes the same "abstract link".
So Web site A and web site B could both an "abstract link" to go to the user's preferred news site and when clicked on the browser would go to the site specified in the browser or the OS). So it cannot be site-specific (like a cookie?).
Cheers,
Ashley.
The general process would be something like this:
Set a cookie using js. Then create a function that retrieves the cookie and redirects. Then trigger an onclick or an onmousedown even like onmousedown='retriveAndRedirect()'
Check out there resources.
QuircksMode's JavaScript Cookies Reference.
W3School's JavaScript Cookies Reference.
UPDATE:
I see what you're trying to do here. In order for your redirection to work from any site, that site has to host your redirection and preference method somehow using js, html, serverside script, etc...
Your other option would be to build a plugin which the user would have to download, that way you wouln'd need any site host your redirection and preference methods for you.
As far as your link retrieval methods go you can either use cookies, or store the links in a database and then call on trigger.
You can store the preferred web site in a cookie. Simple version using the readCookie function from there:
Click to go to your preferred news site

Disable Cookies Inside A Frame/Iframe

Is there any way to programatically disable cookies being created by a page displayed inside of a frame/iframe? Or to generalise further, is it possible to programatically disable javascript running on such a page?
Thanks,
DLiKS
with iframe sandbox attribute (html5) it will be possible (implemented in chrome)
http://dev.w3.org/html5/spec/Overview.html#attr-iframe-sandbox
NullUserException already answered what you can do today without browser support
The only way you could change that for an external website you have no control over is to retrieve the pages using a server-side script, filter the input and display it to the user (ie: act as a proxy).
You just can't modify sites out of your domain (or subdomain - it might depend on the browser) using J/S for security reasons.
If you mean that you want to change the settings of the browser by code in a web page, then no, this is not possible (and if it were possible, it's a huge security breach and all alarms would go off).
You may surpass this, however, by writing a plugin, but then each user must first download the plugin. You can also request higher priviledges, but it'll depend on the browser whether you can change any user settings.
If you mean that you want to write a script on every pc in your company to disable JS + cookies for certain pages, you can write plugins and install them everywhere, or use a proxy (as has been suggested by others) and filter the pages. If it is just for debugging a self-made page, use the Developer Toolbar for the various browsers, that can turn JS/Cookies on and off.
Why would you want to do such a thing? If you want to disable cookies, you disable it on your own page by simply not using cookies. The same goes for javascript: don't add it to your page and you've disabled it on your page.
Note: if any page would change anything of the user settings of the browser, your page will probably be blacklisted by Google, most virus scanners and fishing prevention tools.

Enabling cross domain scripting in the intranet

I'm having a few problems with an application that integrates sharepoint, SQL reporting services and a bunch of custom forms that are built using ASP.NET MVC.
Assuming my servers are as follows;
MOSS
SSRS
Custom forms
In MOSS, my portal has need on occassion to popup a custom form to capture user input. I've done this by using a jQuery dialog (using Boxy), which iframes the custom form in and passes the url of the portal into it. When the custom form is finished, it navigates the parent window (the MOSS portal) to the URL passed in, which effectively refreshes the page.
This was working fine until we threw in the complexity of SSRS.
Now in MOSS, I have a report that lists some data, but the SSRS report viewer web part seems to iframe it's report content in, which means the hyperlinks from the report can't ask the parent to overlay the same dialogs (as it's cross domain) and if it were to perform the overlay itself, it would just overlay the iframe.
Sorry for the long post, getting to the point - this is an internal intranet application only. Is it possible to allow cross domain scripting somehow so that the popup dialogs can all be controlled from javascript within the sharepoint portal and SSRS and my custom forms can just invoke javascript methods on the parent?
Preferably I wouldn't want to have to do configuration in the client browser to allow this to happen, as I'd have to roll that change out to all the machines within the estate - which is a significant number.
Thanks in advance, beer available to anyone who can solve my woes ;)
Cheers,
Tony
IE8, Firefox 3, recent Opera and Safari/Chrome support postMessage which allows cooperating pages on different domains to talk to each other:
http://ajaxian.com/archives/cross-window-messaging-with-html-5-postmessage
If you are stuck with older browsers, you have few options. The cleanest is to send everything that needs to communicate with each other through the same proxy, although in the OP's situation it looks like this isn't possible.
The next cleanest is to use Flash's cross-domain facility.
Another option is xssinterface, which wraps postMessage where available and uses some voodoo involving cookies and polling where it isn't.
The only other option is to use hidden iframes - to send a message to a page, change the iframe's location to one on the destination page's domain and poll in the destination page - but again I think the proxying in the OP's case makes this unworkable.
There is another option in addition to those Andrew provides. You can dynamically inject script tags into the DOM, wherein the src attribute can point to a javascript file on any domain.
In jQuery you accomplish this by specifying "jsonp" as the datatype for the ajax request. You can read more about this approach here:
http://blog.ropardo.ro/2009/09/23/cross-domain-ajax-calls/
I finally got around these issues by using hidden iframes as suggested. I posted an article on my blog with more details and pushed the code onto codeplex:
http://www.deepcode.co.uk/2009/11/overcoming-cross-domain-issues-between.html

Categories

Resources