How can I capture a file downloaded in an iframe? - javascript

I have an external site in an iframe with a save button. When the user clicks the save button a json file is downloaded, I would like to be able to capture the contents of this file in my own code. Is there any way to do this?
I read that you cannot specify a download location outside of the browser defined location, and could only find questions related to initiating a download with an iframe rather than capturing one.

You cannot do it unless you can setup the Access-Control-Allow-Origin (in HttpHeader) of your external site. (check out Access-Control-Allow-Origin on google)
There is a security reason to prevent user read data from other site without permission, for example, the user may logged in the bank site while browsing another site abc.com (in other tab), the bank will not allow abc.com download the users information from them by JavaScript.
If your project contains a server side, you could retrieve such data at server side and print out to client side.

Related

Share state between between AMP cache page and authentication page across domains

We have to implement a mechanism to protect content on our main www.oursite.com. We also have AMP pages being served from amp.oursite.com. Finally, the AMP pages are also getting served from the Google cache via https://www.google.com/amp/s/amp.oursite.com/
The mechanism that we want to implement is similar to a freewall which requires users to register and once they do, they will have access to most of the content on the website.
Registration and login happens on a subdomain such register.oursite.com.
We envisage a typical flow would be as follows:
User finds a page while performing a search on their mobile device via a Google search results.
They click on search result and are taken to the page on the google.com domain.
A pop-up or modal window (served over register.oursite.com) appears over the page with protected content asking them to login.
They login and on successful login, the pop-up or modal window disappears. (assumes user has registered at a previous point)
The protected content which was hidden or blurred in the main/parent window, appears so the user can proceed to read it.
We can assume that, upon successful login, a cookie (let's say named login-status) is dropped on the user's browser, scoped to .oursite.com which could serve as a flag.
The problem we are facing is that the page in the original window was served over the .google.com domain and therefore we do not expect that it would be possible for the main window to apply display logic on the content based on the cookie named as login-status.
It would appear from this page that the way to solve this challenge is via identifier reconciliation on the server by maintaining a matching table between the reader id that AMP generates and the cookie. We have looked at the AMP access feature and AMP page implementation for New York Times but we cannot tell for sure whether they have achieved this via server side or client side solution.
Can anyone
validate the assumption that it is not possible somehow via AMP to share the login state of a user between 2 windows with content served over different domains?
suggest a way to solve this on the client side rather than the server side?
Thanks in advance

Have facebook scrape a different URL than what was shared

I have a Single Page Application built in ember.js, we have this hosted on AWS S3 and I'm trying to come up with a solution for when someone shares a URL from our site to facebook to have facebook be able to scrape the content on that page properly.
Obviously this won't work at this time because facebook does not support indexing javascript like the google search engine does. So one solution I've seen is to use apache .htaccess to redirect requests from facebook to a server file that can make a barebones html page with the necessary open graph tags like in this post
https://rck.ms/angular-handlebars-open-graph-facebook-share/
However since we're on S3 I can't do an apache .htaccess, and from what I've been able to gather from the sparse docs on how their S3 redirect rules work and what they can do I'm not sure if there is a way to do this with that method.
So my question is does facebook or open graph or even just normal meta tags have away of allowing the user to share a url, have facebook use that but follow a link to a server generated file, and then if someone clicks that link actually have it point the user to the real single page application page instead of the server file facebook will use for the scrape data.
Facebook supports “pointers” to request the meta data from a different URL – but that likely won’t help you here, because the reference to the URL that serves the meta data would again have to be part of the HTML code of your original URL that you want to share.
You might do better the other way around: Let your users share the URL to your server-generated document that contains the correct meta data – and redirect human visitors that follow that link to the real target URL within your application. You can either do that via JS (location.href='…'), or server-side (but in that case you need to implement an exception from that redirect for the FB scraper; it can be recognized by its User Agent, see https://developers.facebook.com/docs/plugins/faqs#scraperinfo)

Security in embedded iframe/javascript widget

I'm building a website that is functionally similar to Google Analytics. I'm not doing analytics, but I am trying to provide either a single line of javascript or a single line iframe that will add functionality to other websites.
Specifically, the embedded content will be a button that will popup a new window and allow the user to perform some actions. Eventually the user will finish and the window will close, at which point the button will update to a new element reflecting that the user completed the flow.
The popup window will load content from my site, but my question pertains to the embedded line of javascript (or the iframe). What's the best practice way of doing this? Google analytics and optimizely use javascript to modify the host page. Obviously an iFrame would work too.
The security concern I have is that someone will copy the embed code from one site and put it on another. Each page/site combination that implements my script/iframe is going to have a unique ID that the site's developers will generate from an authenticated account on my site. I then supply them with the appropriate embed code.
My first thought was to just use an iframe that loads a page off my site with url parameters specific to the page/site combo. If I go that route, is there a way to determine that the page is only loaded from an iframe embedded on a particular domain or url prefix? Could something similar be accomplished with javascript?
I read this post which was very helpful, but my use case is a bit different since I'm actually going to pop up content for users to interact with. The concern is that an enemy of the site hosting my embed will deceptively lure their own users to use the widget. These users will believe they are interacting with my site on behalf of the enemy site but actually be interacting on behalf of the friendly site.
If you want to keep it as a simple, client-side only widget, the simple answer is you can't do it exactly like you describe.
The two solutions that come to mind for this are as follows, the first being a compromise but simple and the second being a bit more involved (for both you and users of your widget).
Referer Check
You could validate the referer HTTP header to check that the domain matches the one expected for the particular Site ID, but keep in mind that not all browsers will send this (and most will not if the referring page is HTTPS) and that some browser privacy plugins can be configured to withhold it, in which case your widget would not work or you would need an extra, clunky, step in the user experience.
Website www.foo.com embeds your widget using say an embedded script <script src="//example.com/widget.js?siteId=1234&pageId=456"></script>
Your widget uses server side code to generate the .js file dynamically (e.g. the request for the .js file could follow a rewrite rule on your server to map to a PHP / ASPX).
The server side code checks the referer HTTP header to see if it matches the expected value in your database.
On match the widget runs as normal.
On mismatch, or if the referer is blank/missing, the widget will still run, but there will be an extra step that asks the user to confirm that they have accessed the widget from www.foo.com
In order for the confirmation to be safe from clickjacking, you must open the confirmation step in a popup window.
Server Check
Could be a bit over engineered for your purposes and runs the risk of becoming too complicated for clients who wish to embed your widget - you decide.
Website www.foo.com wants to embed your widget for the current page request it is receiving from a user.
The www.foo.com server makes an API request (passing a secret key) to an API you host, requesting a one time key for Page ID 456.
Your API validates the secret key, generates a secure one time key and passes back a value whilst recording the request in the database.
www.foo.com embeds the script as follows <script src="//example.com/widget.js?siteId=1234&oneTimeKey=231231232132197"></script>
Your widget uses server side code to generate the js file dynamically (e.g. the .js could follow a rewrite rule on your server to map to a PHP / ASPX).
The server side code checks the oneTimeKey and siteId combination to check it is valid, and if so generates the widget code and deletes the database record.
If the user reloads the page the above steps would be repeated and a new one time key would be generated. This would guard against evil.com from page scraping the embed code and parameters.
The response here is very thorough and provides lots of great information and ideas. I solved this problem by validating X-Frame-Options headers on the server-side , though the support for those is incomplete in browsers and possibly spoofable.

How to make my extension send data to me?

I am developing an extension that will allow the user to rate the page they are viewing. To do this, I want to capture their click ('Good' or 'Bad') from the extension popup and also the url of the site they are visiting.
I can capture both these data in JavaScript, but how do I immediately extract this data to my computer? Is there a way to use JS to capture these values in a bucket and load them to an existing XLS file on my machine?
All you need to do is have your extension make an AJAX request from the extension to your server. You'll need to ask for permission to allow the extension to access your server in the manifest.json file, as described in http://code.google.com/chrome/extensions/trunk/manifest.html#permissions
Once you receive the request on your server, you can do whatever you want with the data.

How can I automatically answer a password prompt from an embedded item in an (X)HTML page?

I wrote a web page that displays images from several servers on my network via simple img tags with appropriate href values. The servers require authentication before they will send the images.
It works alright, except on first load the page presents the user with a series of password prompts (one for each server). The user can select the "Remember my password" checkbox, and then subsequent refreshes of the page work without prompting, with correctly updated images. That is, until someone closes out the browser, after which a new set of prompts awaits anyone who opens the page again.
All of the credentials needed are known beforehand, and I don't care if someone could read them in the page source, since this page is in a protected part of an internal intranet site. Everyone with access to this page knows the passwords anyway.
The only browser we're allowed to use is IE 7, so I don't care about compatibility with other browsers at the moment.
Is there any way I can use JavaScript (or some other client-side code) to automatically answer those prompts so the user never sees them?
Thanks very much, in advance.
You can include the authentication in the URL:
<img src="http://paulfisher:tastybacon#internalwebs/path/to/image.png">
Where, of course, paulfisher is my username and my password is tastybacon.
No, javascript can't do this. Here are a couple of options that I've used before to solve this problem:
Change the authentication on the other servers to be either anonymous or integrated.
Proxy in the images: On the server serving the page, add another page that takes in the URL of the remote server. This new page makes a webrequest to the other server and streams the image back. The webrequest can plug in the correct credentials.
Depending on the servers' DNS names, it might be possible to share an authentication cookie across all of the servers. Then you could set up some kind of module on all of the servers to allow the shared authentication.

Categories

Resources