Sharepoint Online iframed system with login - sharepoint

What's the best way to do a unified login between a Sharepoint Online page and an iFramed in system that also needs it's own login. Is there any way for me to let the iframe know that the user is logged in and give the iframe the user email ?
Similar to what FB does with page tabs and apps.

Things to do:
First thing, do not give source to IFRAME element by default. Do it on main page's onload().
Add a custom JS in IFRAME page called IFRAME_READEMAIL() - will be called on IFRAME's page load. Add code where you read a HIDDEN VARIABLE - hfEmail
In your main page, using JQUERY, on load GET THE IFRAME object & set the hfEmail's value
The flow is like this:
The Main page gets loaded, then sets the IFRAME's SRC to required page, then sets the hidden field of IFRAME. The IFRAME picks up the HIDDEN variable & uses it.
Not sure what URL you get in IFRAME's location.href, but If you get the actual IFRAME's SRC as location.href, then you can set the SRC in main page like :
$('MYFAME').attr('src','http://mysite/mypage.aspx?email=' + YOURVARIABLE)

Related

Chrome Extension: Sending a message to the page loaded in a specific iframe

I'm working on a Chrome extension to (among other things) support a page with multiple iframes, each of which loads a page from some other domain. I need to send a msg to the page loaded a specific one of those iframes. The top-level page and the pages in the iframe each have their own content scripts, so the full messaging API is available.
From the top page, when I do chrome.runtime.sendMessage(), all the iframes get it (as does the top window, but it's easy for its content script to know that that particular msg isn't intended for it). Is there any way to target a specific one of those iframes, or for the desired iframe page to know that the msg is for it?
Note that...
The top page can't access anything in iframe pages directly, because they're from other domains.
The top page knows the URL that was originally loaded in each frame, but the user may have navigated from there, so including the target URL as a msg parameter for the receiving script to check won't work.
Is there something obvious I'm missing here?
UPDATE: #wOxxOm's answer was very helpful, but I'm still stuck on how to get the frameIds I need.
More specifically, I need to do two things with those iframes, both of which need that frameId:
Inject a script into each iframe
Send msgs to a specific iframe in response to user actions on the top-level page
All of this is complicated by the fact that the iframes are created and removed dynamically as the user works.
One idea I had is to initially load each new iFrame with the URL "about:blank?id=nnn", where nnn is the DOM id of the corresponding iframe element. That way, when I call getAllFrames(), I can recognize the new iframes by that URL, and build a lookup of frameIds for each DOM id. Once that's done, I can load the real URL, inject the script once it's loaded.
That seems so roundabout, I'm hoping I've missed some supporting API or other straightforward approach.
I did find a solution, but it's pretty indirect. I hope this is clear; all these moving parts are the nature of the beast as I understand it.
Here's what I ended up doing:
Added a name attribute to each iframe, the same as its DOM id.
When the page in each iframe loads, a global content script calls chrome.runtime.sendMessage(), passing that name, which it can access as window.name.
The background script gets that msg, with the frameId of that iframe as sender.frameId, and calls chrome.tabs.sendMessage(), passing the frameId and window name.
The top-level page's content script builds a lookup object from those window-name (AKA iframe DOM id) / frameId pairs.
When the top-level page's content script wants to send a message to any of the iframe pages, it looks up the target's frameId in that lookup object, then calls chrome.runtime.sendMessage(), with a message type that indicates it's for a specific iframe, and including that frameId.
In response, the background script sends it on to the requested iframe's content script with chrome.tabs.sendMessage(), passing {frameId: request.frameId} as the 3rd parameter, as wOxxOm suggested.
This is working here, but by all means let me know if there's a simpler way to do this.

Programatically retrieve the updated og:image of a page in an extension

There seem to be many pages where the the og:image does not change as I keep browsing from one page to another. The og:image always points to the first (landing) page. This is true of youtube videos, for instance. Of course, reloading the page provides the correct og:image
I am wondering if there is a way, within a custom extension on Chrome and Safari, to force refresh the og:image data without affecting user experience?
Dynamically updated sites (aka AJAX sites) change only a portion of the page with the new content on intra-site navigation. The meta information in head element like og:image isn't updated usually.
A universal workaround for any site with AJAX navigation would be to make a XMLHttpRequest for the current URL, convert the response into DOM via DOMParser API and extract the og:image tag.
Or you can write site-specific code and try to find an internal variable or element that contains the og:image. It requires some reverse-engineering, and your code would break on site changes.

Can I preload content in a Webbrowser control?

I have a VC++ MFC dialog application with a web browser ActiveX control. I have "Next" and "Prev" buttons using which I let the user navigate through a list of pre-defined URLs, whose content are shown in the web browser control. Since I know the list of URLs at the start itself, I would like to pre-load the content in some way while the user is looking at one page, so that when they click on "Next", the content has already been fetched and can be shown to the user instead of waiting for the page to load. I did not find any documentation on how to do that so far. Does anyone have any ideas on how to achieve this? I was thinking of having a second invisible web browser control where I pre-load the next URL, but it would be tricky to handle the user clicking Next when the next URL is still loading in the other browser.

Selectively displaying pages

I have a page that I am sending into an iframe. The iframe itself is being conditionally displayed based on logic in the back end. Is it possible for only the iframe to be able to display the page?
Basically I want to be able to call the page from within the iframe, but a person who accesses the URL directly will get redirected or blocked.
You can check the Referer header and serve the page only if it matches the URL of the document that contains the iframe. But this will foil only a user browsing casually to the direct URL. In general the answer is no, you have no control over how the user agent is going to display the content.
If you really need to do this, generate the parent document dynamically so that it contains a URL for the iframe with an embedded random one-time token. Have the iframe content be generated by a script that checks for the validity of the one-time token before delivering the page, and deletes the token from the database at the same time. You will have to make the iframe content uncacheable and you will likely encounter side effects related to caching that cause the page to break for legitimate users from time to time.
Lets assume the url for your iframe is http://example.com/myiframepage. The page that renders the iframe is http://example.com/parentpage
I am assuming your parent page already has code similar to :
//in parentpage :
if(can_show_iframe) {
}
You just need to go a step further and modify the code for myiframepage as follows -
//in myiframepage
if(can_show_iframe) {
//normal processing
}
else {
//return 403 error code which indicates access denied
}

Understanding 3rd party iframes security?

Facebook and others offer little iframe snipplets that I can put in my site.
Example:
<iframe src="http://www.facebook.com/widgets/like.php?href=http://example.com"
scrolling="no" frameborder="0"
style="border:none; width:450px; height:80px"></iframe>
What I'd like to know is, if I put this code inside my side, could the code they load into my page access the DOM of my page? I see some security isssues if so.
Likewise facebook allows me to put an iframe into their site, this is how facebook applications work.
Could I then mine any data off any page that contains my iframe?
Note I used facebook as an example here, but many companies do the same thing so this quesiton is not specific to facebook in any way so I am not tagging it as such.
Also can the parent page access the DOM of the iframe?
Actually there are specific rules of inheritance for iframes. This is apart of the same-origin policy, and I highly recommend reading the entire Google Browser Sec Handbook.
I do know the parent page can access the DOM of the iframe. Recently we had a project at work where we had a site which needed to be 508 compliant. The iframe was not and although screen readers are handling iframes much better, the content within this iframe was not compliant. We loaded jquery library into our site, and then also loaded code into our site to manipulate the iframe (only after it loads) and at that point mashup the iframes content to be accessible.
To give you an idea of how we did it here is a sample of our jquery. (Used a lot of finds and replaces but you get the idea, you could do other things. )
$('iframe').load(function() {
var f = $(this).contents();
f.find('#sysverb_back').remove();
f.find('a.column_head').each(function(){
$(this).attr('title', $(this).text());
});
f.find('img[title]:not([alt])').each(function(){
$(this).attr('alt',$(this).attr('title'));
});
f.find('input').filter(function() {
return this.id.match(/sys_readonly\..+|ni\..+/);
}).each(function() {
$(this).before('<label for="'+this.id+'" style="display:none;">'+this.id+'</label>');
});
});
});
Although I do not know if you can from the iframe access the parent DOM.
I'm assuming cross-domain iFrame since presumably the risk would be lower if you controlled it yourself.
I've been trying to figure this out myself
Clickjacking/XSS is a problem if your site is included as an iframe
A compromised iFrame could display malicious content (imagine the iFrame displaying a login box instead of an ad)
An included iframe can make certain JS calls like alert and prompt which could annoy your user
An included iframe can redirect via location.href (yikes, imagine a 3p frame redirecting the customer from bankofamerica.com to bankofamerica.fake.com)
Malware inside the 3p frame (java/flash/activeX) could infect your user
Note that the html5 "sandbox" attribute can solve a lot of these problems if your browser supports it, and you can prevent your site from being included as an iFrame as well via X-FRAME-OPTIONS.

Resources