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

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

Related

How to track user when redirecting through different pages

I have currently made a website with a login page and a home page(with nodejs, js and html)(client side will send the entered user name and pass to server, when its checked the server will send a reply, based on which the client side redirects to the home page). When redirecting a user from one page to another how can the server track which user is connected on the client side when navigating through different pages ?
Edit:
https://www.youtube.com/watch?v=GihQAC1I39Q&ab_channel=WebDevSimplified
After reading the replies and googling about it, reached this video which was exactly what i needed.
Generally speaking
If your page uses redirects, the redirecting page becomes the landing page's referrer. For example, if you've changed your site so that index.html now redirects to home.html, then index.html becomes the referrer for home.html. If someone reached your site via a Google search that sent them first to index.html, you won't have any data regarding the Google search.
For this reason, you should place the Google Analytics tracking code on the redirecting page as well as on the landing page. This way, the redirecting page will capture the actual referrer information for your reports.
Note, some browsers may actually redirect before the JavaScript call from the code can be made.
(cf. https://support.google.com/analytics/answer/1009614?hl=en)

Modifying the URL allows some users to see content they shouldn't

My company has a website that is used by internal and external users. Certain information is not able to be seen by external users. However, if they add something to the URL (ie. ?ParentRsvId=4794094), they are able to pull up that reservation and view it. How can I stop that from happening?
As a general rule, you have no control over the client in a WebApplication. You can tell it that something should be done, but you can never asume it is actually done. So JavaScript will not help you 1 Iota her.
About your only way to block areas and ensure sensible requests, is via Programm flow on the server side:
In your case, the Reservation View should check if the Logged in User account is supposed to be there. And if it is not, you simply send a redirect to the login page/error message. The client can either follow the redirect. Or stay on the redirect page. In both cases, no information is leaked.
You need to have authorization checks on the server-side code that generates the page content. When rendering the page, check that the user has access to view the content and if not show a 401 error or redirect to a page that they have the authorization to see.

Dynamic website without client side url handling

I have a challenge that I can't solve. I have made a website with node.js and have all of the code written for the routing including routing for sub-domains. Some location only some users can access, some locations only logged in users can access. I wanted to include a chat for my users so I went along and created one with socket.io and some client side js.
Now I need the site to keep the chat element open which in on a bar across the screen when the client goes to another portion of the website. I have looked into many solutions but almost all of them include some js library like angular.js with the ng-model or ui technique but all include writing code for the client side that handles the url and what to load.
I don't really want to do this method because:
I don't want to re-write all my routes and I am not even sure how to handle the authentication of the users.
I find the client method to be a security issue
My website isn't a single page app, I just want one portion of the website to stay loaded.
Here is some images of what I am wanting:
State 1:
State1
State 2:
State2
Notice that the chat stays but other content was loaded. Also that it went to a different sub domain and a location that is only accessible by logged in users.
Thanks!
I guess you want to maintain state across page refresh, much like e.g. Facebook does. A true and trusted way of doing this is setting a cookie that stores the chat state: open/closed, or store the state on the server. Then on page load, initialize the chat based on this data.

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 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