Develop Reference

How to use request location header to modify static site via Javascript?

Objective: I'm trying to add a pop-up on my pages tailored to the visitors country.
Tech: I have a static site hosted on Github Pages, with Cloudflare as CDN.
I'm using this Cloudflare managed worker to add the visitors country to their request.
How do I access this "cf-ipcountry" value from the request header in Javascript and do something with it?
--
Edit: If it's not possible to get it directly, could I use a Cloudflare worker to parse the request and modify the page load? Something like this (but instead of listening for an auth token I listen for the country code in the request header?)

Request headers are not exposed to client-side JavaScript.
Even if they were, the request from the browser to Cloudflare is a different request to the one from Cloudflare to Github Pages and the header you want is on the request that the browser doesn't have access to.
So: You can't.
You need server-side programming capabilities for this.
If you want to use the header added by Cloudflare then you need it on the server you are hosting the site on.
Otherwise, your minimum is a third-party GeoIP web-service that supports CORS (or the old, risky JSONP) that you can hit with Ajax.

Reverse proxy using javascript

I am trying to create a reverse-proxy web application using flask. I don't really know it is called reverse-proxy exactly but my webapp gets url from ../proxy/<url> and using requests and bs4 in python scrape the website and do some change in <a href="</test>"> to <a href="../proxy/<domain>/test"> and same for <form> and for other links also in the website for making sure that next request to the page is through proxy but some page that uses JavaScript to load data doesn't goes through ../proxy, they just send request like a normal website.
Now here is my question,
Is there any way to create an environment like things to make every link go through proxy or what could be the other best way to do such reverse-proxy things in flask? How to make sure that each and every time that website connect to network then connect through the proxy?
Edit: Idea:
Making browser log like things using JavaScript, but while any link want to connect to internet then manipulate it into /proxy/<url>.
CORS: I don't know what to say but make CORS or using CORS to block request to other domain.

Reverse proxy and HTTP request from code

I'm trying to figure out what is the "proper" way to make HTTP requests programatically from web application code when you don't know if you are or are not running behind reverse proxy (e.g. HTTPD).
Web application runs on root "/" context on web server
Proxy runs with context "/proxy" that proxies this that web server
Accessing index.html from browser should be requested via /proxy/index.html.
But what if there is some code in the web application (e.g. myscript.js) that sends HTTP request programatically (e.g. xhr.open("???/resource").
And here comes the problem because the code sends this HTTP request to /resource instead of sending it to /proxy/resource.
In other words, the code of web application (that runs in the browser) does not know if there is any or there isn't a proxy. Keep in mind that application can run behind proxy but there may not be any proxy at all. I have in mind 3 solutions:
1) Web application resolves context (e.g. /proxy) automatically by parsing it from the current window.location.path and send xhr according to it
2) Enhance web application to require some additional configuration of proxy from user and it appends the context if it is set
3) Configure proxy somehow to also resend non-proxy like URLs to web server 1:1 (e.g. /proxy -> webserver/, / -> webserver/)
Which one is "the proper" one or there are any other options?

Backend web applications should not be aware if there is proxy or not above or before them. They should ideally live in their own context path, eg. /application/ and if they need to send redirects do so without using hostnames or url schemes in it, just URL-Path /application/*
Then ideally you can do easy reverse proxy directives according to your number 3 scenario:
ProxyPass /XXX/ http://backend/application/
ProxyPassReverse /XXX/ http://backend/application/

How can I create javascript on my server that uses backend on that server and will be used on another web site?

I need to offer a web service that my clients can use on their web sites with AJAX. They are not able to call my web service because of XSS preventions. The clients can not make a proxy to access my web service.
I am trying to make a javascript library on my server that they could include in their site, which would in turn call the web service on the server. Somehow it does not seem to work.
The server is located at Google App Engine.
So the question is: How can I make a javascript library on my server that uses backend on that server and remote users can use it? Much like google maps js API works?

You should use Cross Origin Resource Sharing instead, just set CORS http headers for your web service.
Access-Control-Allow-Origin: http://clientsite.com http://client.website.com
Same origin policy is dependant on document origin therefore providing a JavaScript library will not help.

Two possibilities:
have your javascript library create an iframe pointed at your server. Communicate between the code running in that iframe and the 3rd-party site via the best crosspage communication for the browser you're on. Google's Closure library has a class called CrossPageChannel that works very well for this. Put the bulk of your logic in the iframe. This can be nice because it'll prevent the 3rd-party site from doing anything that isn't well-defined by the messages you pass across the iframe boundary.
use JSONP to get data from your server and keep all the logic in the javascript library.

AJAX between a static webpage and google app-engine server sharing same TLD

I have the main website hosted by a reliable static web hosting service. Which only allow me to host static files like html, css, js etc. Now I have few requirements which would need user Login and data storage. I think I can handle this using App Engine Python.
My app is similar to a Voting module, So i will explain it using its example.
My plan is to configure things something like this:
main website: www.example.com
appengine: gae.example.com
On the main website an anonymous user visits: http://www.example.com/vote.html, he should see current voting status (which has been retrieved from app engine). and a login button (from twitter/facebook). when he logins, he should be able to cast his vote and the vote be saved back to the appengine server.
I can handle most of the things but two. (taking same origin policy into account.)
How do I maintain authentication between two domain names. i.e. www.example.com and gae.example.com.
How do I make HTTP POST request to the gae.example.com from www.example.com and use the returned json data.
Note: I want to avoid iframes as much as possible.

You need to use JSONP.
Subdomains actually violate the same origin policy. This is because some hosted solutions provide subdomains for different users. This would allow users to attack each other's sites.
See: Same Origin Policy - AJAX & using Public APIs

You can maintain login between the two sub-domains by making sure that the login cookie is set on the root domain with subdomain access allowed. The sub-domains will be able to access the cookies of the root domain. See https://serverfault.com/questions/153409/can-subdomain-example-com-set-a-cookie-that-can-be-read-by-example-com for some examples.
I don't believe you can make ajax calls directly to another sub-domain. If the target sub-domain is cooperating and supports JSONP, you can do it that way (you end up inserting a script tag with a call to a script and that script calls you back with the data). Because the loading of scripts isn't subject to the same origin policy, you can work around it, but the target sub-domain has to be configured to allow and support JSONP.