Develop Reference

Setting up a development environment for working with 0Auth 2.0

I'm curious if anyone else has encountered this issue.
I am building an application that will authenticate users using Google 0Auth 2.0 + OpenID.
I've built a simple site just with HTML and CSS to hold the UI and I'm using live server in Vscode to view it.
In The Google developer console for oauth, you must set Authorised JavaScript origins for client-side applications. I assumed I would just set this to http://localhost:5500 for the port that live server uses but I always get the following error:
Authorization Error
Error 400: invalid_request
Permission denied to generate login hint for target domain.
I have got around the issue by just getting a domain and hosting for a test site and setting this as the "Authorised JavaScript origin". However is seems really clunky and I have to FTP all my files to my hosting provider every time I want to change my code.
I could also host everything on a Node.js server from my local machine but this would just cause the same issue as before.
My question isn't so much how to stop getting this error but what is the proper way of developing with OAuth 2.0 and is there any way to speed up the process/create a local environment that doesn't get the same errors.
Thanks for your help.

There is an answer to this Google question here that may help you.
The way I have always set up an OAuth environment is to try to avoid localhost and use more real world URLs on a Developer PC. I also like to split them like this which helps me to visualize the architecture:
Base URL
Represents
http://www.example.com -
Your web UIs
http://api.ecample.com
Your APIs
http://login.example.com
The Authorization Server
This approach can also give you more confidence that your code will work well in beowsers, in areas such as these:
CORS
Cookies
Content Security Policy
By default you just need to edit your hosts file and add an entry like this. It can work very well for demos to business people also.
127.0.0.1 localhost www.example.com api.example.com login.example.com
:1 localhost
ADVANCED SCENARIOS
At Curity we provide some quite advanced developer setups and this approach scales well, as in the below articles. The second of these also provides a script you can use to run locally over SSL, in case this is ever useful:
Single Page Apps End to End Developer Setup
Kubermetes End to End Developer Setup

javascript on browser send xmlhttprequest onto loopback server

so, I've tried to send a javascript XMLHttpRequest on a personally written http server that uses python's core functionality (i.e. socket and regex). took me a while but I finally had it going. so, I tested it out and after debugging the regex for parsing http POST and GET requests, I tested it out through the python console and it worked fine.
in short, the http server receives a GET loopback request with personal identification, and reads whatever text was sent to it as data.
a tts loopback server.
I wanted to do it because asides from selenium that honestly seemed like the only way for me to read random text from the screen using javascript (I could create a browser extension that works alongside it). I already created something for parsing html, so that's not the problem. later I wanted to extend the application and create a GUI using java for generally tts'ing files so I could listen to them while programming.
the problem was that although the socket was bound to port 80 on the loopback interface (127.0.0.1), when I sent an XMLHttpRequest to localhost, the server was not responding. I checked for incoming connections and there were none. from the terminal it worked fine though.

if anyone else is wondering, no, it's not possible. unless it bypasses CORS restriction. (sadly). If anyone wants to do something similar, he has to either bypass CORS restrictions OR if you're building with python you can just use selenium and create a "custom" browser extension.

Cross Domain Request to localhost

DISCLAIMER: I've already looked at various approaches to solve my issue, so please read this before labeling this as a duplicate question
I have a javascript running on https://xyz.com which has to retrieve information from an application ABC running on the user's local machine say port 8080.
My constraints are that I cannot modify the HTTP headers emanating form the ABC nor do I want the user to install another application which will be a conduit to route my requests through to ABC.
Cross-Domain/Window Messaging Options
a) window.postMessage: Ruled out since I cannot have script running on the local machine
b) XDR Object (IE) or Access-Control-Allow-Origin (Firefox,Safari et al): Ruled out since I cannot modify the header
c) JSONP: Again this will not work since I am unable to enclose the response within the function name
As a workaround, only meant for testing I've added the http://xyz.com to the trusted list and have enabled Access Data Across Domains for sites on this list. AFAIK, this option is only available on IE 5+ browsers. This workaround allows me to send and receive messages from http://127.0.0.1:8080
My question is two-fold
1) If I were to continue with the above approach when I go into production what are the security implications that I'm exposing the user to? Can I plug those holes?
2) Are there any other options that I can pursue to achieve my objective.
PS: I would like to be as far away from ActiveX or Flash as possible, but in case that is the only workable alternative to my current approach then I'll have to toe the line
Cheers

If the local application could serve a single html document, to act as a bridge, then you could easily use Cross-Document Messaging (for instance with easyXDM) together with ajax requests from this document to do this. This is a very simple approach and one commonly used.
easyXDM actually comes with such a document, you can read about it here.

I think that the easiest would be to put a server script on https://xyz.com which will act as a bridge between the javascript file and ABC. Then the javascript file will simply send an AJAX request to it's own server script which will take care of fetching the information from the remote domain. The only other viable solution which would work among most browsers and which doesn't require using some client technology like Flash or ActiveX is JSONP but you have ruled this out because you have no control over the remote domain.

Can I establish a connection with other computer using JavaScript?

Is the following possible? There are 2 persons working on 2 different computers. Both are connected to the Internet. These users can communicate with each other using a JavaScript program run in a browser.
I do not want to use a server. I want to use a P2P approach and I am wandering if it is possible to do it with the JavaScript?

No.
The same origin policy prevents JavaScript (in a webpage) from opening a connection to a host other than the one on which the page was served from.

You will need to use a server in any case. Even if you could specify an IP address and tweak JavaScript into establishing a connection to a computer using AJAX / JSON / JSONP, the other computer would have to have some serving capabilities to answer the call, something which neither your browser nor JavaScript are equipped to handle.
For direct computer-to-computer communication, you will need to delve into serious client side programming, for example using Java, C++/C#, the .NET platform or something similar.

No this is a violation of the same origin policy.

You cannot do that with pure javascript without using the server, I think. Javascript can communicate with network only with ajax requests so the other computer would have to run http server.

The opera unite service allows you to do this. Of course this is limited to Opera browsers only.
Take a look here for a fantastic introduction to the system

Maybe consider using Java instead? You still need a server though so clients can find eachother.

A server in the middle is definitely required. Absolutely no way around that.
I am curious what you would want to do this for though?

How can I use JavaScript to identify a client?

I have a problem where I cannot identify visitors to my intranet page because their browser is configured to use a proxy, even for the local intranet. I always see the proxy IP and no other details about the client. The SOE that my company uses has the proxy set up already for Firefox and Internet Explorer, and I cannot ask them to reconfigure their browser because that is fairly complicated. I have tried using the PHP $_SERVER['REMOTE_ADDR'] and also one called $HTTP_SERVER_VARS['HTTP_X_FORWARD_FOR']. In fact, I wrote a page that lists both the $_SERVER and $HTTP_SERVER_VARS arrays and there was nothing informative of the actual client connecting. This is why I think it needs to be done on the client's side.
I'm not looking for a secure solution because it is only a simple page, so I was hoping that I could use Javascript or something similar to find something revealing about the client and send it to my intranet page as a GET variable. It's basically for collating statistics. It is no use telling me most of the visitors are a proxy! :)
I also want to avoid having users log in if possible.

You could use a cookie with a random, unique ID that's set upon the first entrance, and then used for identification. Could be done either in JavaScript or in PHP.

I am pretty sure there's no universal way to do this otherwise the whole concept of anonymous proxies go down the drain :)
My advice would be to ask your IT department to configure the proxy to populate the HTTP-X-FORWARD-FOR, REMOTE-ADDR or some other identifying header.