ERR_CERT_COMMON_NAME_INVALID from jQuery Using Reverse Proxy - javascript

I am having an issue with 'ERR_CERT_COMMON_NAME_INVALID' when making a request from a website.
First of all, am really a bit of a novice when it comes to setting up and using certs... so this is probably something stupid that I have ether done or not done!
I have a ssl certificate www.my-dummy-url.abc and api.my-dummy-url.abc (obviously my-dummy-url is for example only). Where api.my-dummy-url.abc is the certificate Subject Alternative Name and www.my-dummy-url.abc is the certificate Subject.
The Apache Web sever, is hosted at www.my-dummy-url.abc, whilst a reverse proxy points 'api.my-dummy-url.abc to a Raspberry Pi running a little node.js API endpoint (/weather).
I have set node.js up to use express: https.createServer(ssl_options, ..., where ssl_options is my cert.pem and key.pem. CORS is enabled (app.use(cors());) and 'Access-Control-Allow-Origin', '*' is present in the response.
The Website (apart from the API call) renders fine at https://www.my-dummy-url.abc (Chrome).
The API, (https://api.my-dummy-url.abc/weather) if requested within the address bar of a Chrome browser or through Postman receives the correct JSON response.
However, from my website as a jQuery $.get function I get the following error:
GET https://api.my-dummy-url.abc/weather net::ERR_CERT_COMMON_NAME_INVALID
Any ideas, helpers, pointer or solutions will be gratefully received...
As an addition, if I use Edge rather then Chrome, it works...!
Kind Regards,
Harold Clements

This issue was that Chrome was caching the certificate somehow. After shutting down and coming back to it the next day, it was working fine.

Related

Youtube Api Upload Request Blocked By Cors [duplicate]

For several years we have successfully been uploading videos via the YouTube API using some custom JavaScript code. The code was based on some samples provided by Google (cors_upload.js). It's not something we use a lot, just every couple of weeks.
Things were working fine a couple weeks ago, but it has come to my attention that things recently stopped working. We login fine, we obtain the channel info fine. But when we start the upload (which happens via XHR POST), we are getting a CORS error:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://www.googleapis.com/upload/youtube/v3/videos?part=snippet%2Cstatus&uploadType=resumable. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).
But we haven't changed anything in our code or on our server and it appears as if we are doing all the things necessary as documented by Google to have their service respond with the required CORS headers.
According to the dev console, the XHR request actually generates 2 network requests. First I see an "OPTIONS":
Request URL:https://www.googleapis.com/upload/youtube/v3/videos?part=snippet%2Cstatus&uploadType=resumable
Request Method:OPTIONS
Remote Address:172.217.9.42:443
This actually DOES return the "access-control-allow-origin" header that I expect. However, this is immediately followed by the "POST" request:
Request URL:https://www.googleapis.com/upload/youtube/v3/videos?part=snippet%2Cstatus&uploadType=resumable
Request Method:POST
Remote Address:172.217.9.42:443
And according to the dev console, it does NOT have the "access-control-allow-origin" header set. So, I understand why my browser is rejecting things. It just seems like Google broke something.
I did successfully deploy a NodeJS "CORS Anywhere" server on a server we manage. So, I can use that to work around the issue. But that really isn't the correct solution to the problem. Since uploading videos programmatically isn't something we do a ton, this work around will probably be sufficient for us. I would love to understand what went wrong or how to fix. So, if someone is successfully uploading videos with the YouTube API and JavaScript, I would love to hear about it. Hopefully this will help educate others if/when they run into the issue.
The same problem just started to happen with my services.
It seems to be a bug on googleapis or maybe youtube.v3.apis had a policy change and started to block some clients.
Google has fixed the problem and our long-standing code is back to working again without any changes.
Here is the tracked issue:
https://issuetracker.google.com/issues/158718687
Same here. I have no Solution, just a workaround and I hope they fix it soon. You can disable the CORS safetycheck in chrome. Run chrome.exe with --disable-web-security and set the user-data Directory temporary to another location, with the following parameter and the folder you want --user-data-dir=c:/anyfolderName/`
For security reasons you should disable-web-security only if you have to and switch back if youre done.
I dont know why this get a downvote, because it helped me to get around. Now google fixed the issue, no need to use this workaround longer. But maybe it helps when another CORS issue arise...

Permitting user agent (chrome) CORS requests programmatically

I need to get some data from external API, from other domain.
I use test app, runned on localhost and I get error:
Origin http://localhost is not allowed by Access-Control-Allow-Origin.
I try to get access to: https://api.coinmarketcap.com/v1/ticker/ by get method
I did a lot of search and:
I know that I can ask that API by using node.js, CURL, and also by running my frontend code in jest tests
By using chrome extension - https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en also everything works correctly
But unfortunatelly by simply AJAX request on my page load I can't reach that API and get an error.
And my prediction is that user agent (chrome) somehow block my request.
I can't use chrome extension because I want also access my website from my mobile phone which can't get that desktop extension.
For now my solution is "proxy", node.js server which can access that API and flow looks like:
FE
-- ASK BE -->
BE
-- ASK API -->
-- RESPONSE TO BE -->
BE
-- RESPONSE TO FE -->
FE SHOWS EVERYTHING
FE - Frontend, BE - Backend (node.js proxy), API - external API
But I want to avoid unnecessary code on the BE. Maybe there is some solution?
Like some magical header which will tell chrome to let me pass to external domain without any additional extension?
You are correct you cannot bypass the CORS rules unless you are using jsonp and the server in question supports it. When working with that ticker in the past I had to build a backend exactly as you describe with express.
FE => BE => Ticker => BE => FE
Well you can do that one clean way as described here - https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
Set the header value
Access-Control-Allow-Origin: *
with your response to the first page load from server.
If all you pages uses HTML5,you can try using Window.postMessage.
Another common solution is creating a proxy-server.

Can't make a fetch in IE9 once page is loaded

I have a site that is running in Node and using express for the server. I also have an API on a different server I need to hit. Everything works fine except in IE9. The issue is when ever i try to hit my API once i have the page loaded it breaks.
For example on the home page i have a search form where each step makes an API fetch and once I try to make my first fetch i get this error
"Unhanded promise rejectionError: Access Denied"
It seems like it has to do with a CORS issue since IE9 didnt have CORS and the era of the error message. Also when I make the fetched server side I have no issue, its just when the client tries to perform them.
Has anyone had an issue like this and if so how did you fix it?
Currently I am trying this but it hasnt worked yet:
First I changed my api host address to the current sites address with /api at the end.
apiHost: process.env.API_HOST || 'http://127.0.0.1:3000/api'
Then in my express server is run this:
app.use(modRewrite([`^/api/(.*)$ http://api.mysite.dev:8080/$1 [P]`]));
I was hoping to avoid making a fetch cross address with this but no luck as of yet.
Any help would be much appreciated
thanks!
To solve this problem I changed my host file for my machine to use mysite.dev for the 127.0.0.1 IP. Then went to mysite.dev rather than 127.0.0.1 when testing my site. Then did what I did above to get it to work

How to test GET/POST or better way?

I am writing an app that will send POST/GET requests from a remote client to a server. As a way to test and also educate myself I was trying to make these requests by writing a simple html file that resides on my desktop with a form that would POST to a server side php file. I also tried using ajax style requests or XMLHttprequests independent of and connected to a form but I received an error in the console:
Cross Origin Request Blocked
For all attempts form or no form. I have read that this is because I am making the request from FILE:// and this is not allowed by browsers unless CORS is enabled in some way. I have also read that using a webserver to host the file might fix the problem but I don't understand what is meant by webserver (separate or same domain? lamp, xammp, mamp?) and I am not interested in overriding security (allowing cors with headers) if I am eventually going to have to find a secure way when it goes live anyway.
As I said I am really just trying to test and I would like my html files to communicate with the server-side php from another machine instead of just putting all files together in the same domain/folder. Is there a way to do this using html/javascript or Websockets or anything html5 has to offer that might be useful?
code examples are welcome but if anyone could help me grasp this concept better it would be greatly appreciated. I am a noob XD
I am open to a better approach entirely if one exists, the only constraint I have is that everything on the UI/Client end is going to be written in html/javascript but I can utilize either or both intel XDK api and Cordova api as well.
Please help and thank you.
If you need to send some HTTP requests to test the server-side of your app I would strongly recommend you use an HTTP client like Fiddler:
http://www.telerik.com/fiddler
Also, read this:
GUI HTTP client
A desktop-based client will have a nice GUI with plenty of features to tweak, save, send, resend your requests.
One thing you can do is use pythons SimpleHTTPServer to serve the html file. Then when you go to your browser and go to 127.0.0.1:8000 the origin will be the same.
You can run the server by going into the directory that has the html file and running the command python -m SimpleHTTPServer 8000. This will serve the content of that directory on port 8000 and it should allow the requests to be made without a CORS exception.
Heres the documentation https://docs.python.org/2/library/simplehttpserver.html
I recommend that you disable the same-origin policy in your browser in order to test cross domain AJAX request from a local file.
For example, with Google Chrome on Windows you can disable this by launching chrome with the following command :
C:\Users\YOUR_USER\AppData\Local\Google\Chrome\Application\chrome.exe --allow-file-access-from-files --disable-web-security
Together, both of these flags will allow you to test cross-domain ajax requests from a local file. These flags are relevant across Mac, Windows and Linux.
This is not on how to write the requests but you can bypass writing those if you are using the latest version of the Intel XDK. If you go to the services tab in the latest version of the Intel XDK, there is a service by the name of Sandbox Explorer. It has a GET and POST method UI. Just plug in the URL and you will see the response immediately. You can use this to debug the server that you are writing. Once you have the server returning the right response, create a data binding to use the GET API in your client side javascript or html code. Cross origin is taken care of.

Is there a way to bypass Javascript / jQuery's same origin policy for local access?

Trying to use ajax, getJSON, and functions like that to fetch an external URL from a local (non-server) development computer. Is there a way to bypass the same origin policy, so that I can test locally, instead of having to upload to a server?
Here's the simple answer: chrome --disable-web-security
From the source code (chrome_switches.h):
// Don't enforce the same-origin policy. (Used by people testing their sites.)
const char kDisableWebSecurity[] = "disable-web-security";
I wanted to use jquery.js to send AJAX calls to a Google Apps python server running on port 8080. Just for testing, I wanted to run the browser and the server on the same machine.
I don't understand all the security nuances, but for temporary development it seems like a reasonable workaround. So long as I only use chrome for testing with this flag, it shouldn't be a problem.
Here's the whole command for Mac OS X:
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --disable-web-security
We had the same need when developing our web app. Here's how we did it:
The browser and the server communicate only through JSON.
All the HTML is rendered in the browser using PURE (our JS template engine).
The browser code is developed locally like this:
We add a host parameter in the url of the app:
http://localhost/app.html?host=test.beebole-apps.com
In production, the JSON are sent to the server with a POST.
But here the function in charge of the ajax call will react to the host parameter and make a JSONP injection(GET) instead.
<script src="http://test.beebole-apps.com/?callback=f2309892&json={...}" />
f2309892 is a temporary function, with a random name, that points to the method that will handle the response
json is the JSON we send to the server
It means you will need some cooperation from the backend to serve you the json wrapped in a callback function like:
f2309892( /*the json here*/ );
Except a size limitation(you can't send a big JSON to the server with a GET) it works like a breeze.
An other advantage is you can call all the different systems(development and test) from the same localhost.
There are different ways to get around this, depending on which browser you're using for development. For example:
In Firefox (Gecko), set security.fileuri.strict_origin_policy to false
In Chrome, start the browser with the option --allow-file-access-from-files
References: Firefox, Chrome
Without touching the server -
The quickest and easiest way to bypass the same origin security policy in Firefox is the install the Force CORS add-on. This works with any service by inserting the proper headers into every response.
https://addons.mozilla.org/en-US/firefox/addon/forcecors/
Since this is a development issue and not a end-user/functionality issue, rather than focusing on getting AJAX to cross domains get your development environment set up as a proxy to fetch the most recent data from the production servers. This is actually really easy to do.
You'd need to set up a web server in your dev environment (if it doesn't have one already), and then configure the server to respond to 404 requests by fetching and then echoing production data. You can set up your server so that only the AJAX data files are picked up (otherwise, it will be confusing to debug other files if production assets start showing up on your development pages). So if http://dev.myserver.com/data/json/mydata.json is missing, your 404 script will get http://prod.myserver.com/data/json/mydata.json and echo it to the client. The nice thing about this set-up is that you can use mock data very easily: if the file is there in your dev environment, your AJAX script will get that; but if you then erase or rename that file, you'll get the production data instead. This feature has been so useful I can't recommend it enough.
If you're working with XML, I'd recommend duplicating the HTTP headers in the 404. If your 404 process responds with a Content-Type of text/html, you won't get any responseXML to parse.
try this (php curl ayax cross domain - by google):
http://www.iacons.net/writing/2007/08/02/ajax-cross-domain-proxy/
http://www.phpfour.com/blog/2008/03/cross-domain-ajax-using-php/
http://jquery-howto.blogspot.com/2009/04/cross-domain-ajax-querying-with-jquery.html
I had that problem, too, using Chrome and the --allow-file-access-from-files option didn't really help. Back to the script my server needed to return, I added these headers to the response and it worked fine :
'Access-Control-Allow-Origin: http://localhost/'
and another one for allowing a sort of key exchange
'Access-Control-Allow-Headers: X-KEY'
localhost is not allowed to use in CORS http://code.google.com/p/chromium/issues/detail?id=67743 use lvh.me instead

Categories