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...
Related
I'm trying to build a React Webapp to group and display superchats while a livestream is running.
What I've tried so far (unsuccessfully) is to use the YouTube LiveChat API, however this requires authentication from the live stream owner (which I do not have)
The second thing I've tried is to use youtube-chat, however this does not work. (I ran into CORS issues: Access to XMLHttpRequest at 'https://consent.youtube.com/m?continue=https%3A%2F%2Fwww.youtube.com%2Fchannel%2FUCdQPeeJ0qGK6wWBiEJWcdsQ%2Flive&gl=NO&m=0&pc=yt&uxe=23983171&hl=en&src=1' (redirected from 'http://localhost:3000/channel/UCdQPeeJ0qGK6wWBiEJWcdsQ/live') from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.. I've proxied all requests to https://www.youtube.com. Even without the CORS issues, the library does not seem to work as it should, so I'm probably looking for another option.
The intent of the library seems to be to scrape the YouTube native HTML element and read the chat messages from there, but this library seems to be deprecated and not take into consideration the YouTube cookie-consent screen.
I was thinking of mabye using Selenium and scrape the data that way, but I'm not sure if that would work. Any help on this issue would be greatly appreciated.
CORS will block any requests from your website to another website, that didn't authorize this. To solve this, write a small backend server, that uses youtube-chat to fetch your comments and relays it to your frontend. That way, you bypass CORS.
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.
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
I want a simple javascript script that exists on my localhost to make a connection to another domain(eg: anotherdomain.com) with ajax and get the response , but all my browsers tell me that error of (connection blocked , Reason: CORS header 'Access-Control-Allow-Origin' missing)
but when I check the network traffic with network monitor program like (fiddler), I see that the response already came from the server at (anotherdomain.com) to my local machine , it is just my browser who is blocking me from getting it !!
1- can I order my browser to ignore the CORS rules using javascript code?
2- what is my options to overcome this problem? is building a custom client disktop application with c# to send and receive requests freely is the best way to do it?
3- is CORS policy designed to protect the web clients or the web servers ?
thank you, and please consider that I'm complete newbie in web
but when I check the network traffic with network monitor program like (fiddler), I see that the response already came from the server at (anotherdomain.com) to my local machine , it is just my browser who is blocking me from getting it !!
Well for sure, the connection was estabilished to check the presence of the header you mentioned, but data was unlikely to be transferred.
Regarding your questions,
There are 2 options actually. One is to set the Access-Control-Allow-Origin header with proper origin according to yours. The second is to make a JSONP call, though the response of server must support such a solution.
The best option is to have a server with the above header specified. Your server would handle all the network stuff on its side and your script would just get/send some responses/requests.
I would say it designed more to protect the server. Imagine the following situations. Your script on your site makes a lot of POST requests to the another site. Actions like submitting forms etc. could happen and would be allowed. That's harmful, right? You can read about that in this stack question.
I spent the last 3 days studying how to make a cross domain request using XMLHttpRequest. The best alternative is indeed with JSONP which I am already using.
But I still have a question that I could not find answer nowhere. I read hundreds of posts (including SOs) and nobody has a good liable answer (with nice reference). Hope someone here can help.
Said that, I read in many websites that due to security reasons I cannot make an Ajax request from domain aaa.com to bbb.com and get the data I want. It's very clear and I have no question about that. BUT the problem is when I run the code below in my localhost (so my domain is "localhost" and I should not me able to request any data from another domain).
xhReq = new XMLHttpRequest();
xhReq.open("GET","http://domain.com?parameter",true);
xhReq.send(null);
When I inspect the Firebug Net Tab I realize that the request was not blocked! It was clearly requested. I could not believe. So I created a file in the domain.com/log.php where I could log any request that hit my domain. Surprisingly all the requests I was firing localhost were hitting my domain.com. When I tried to fetch the response I really could not get it due the same origin policy of my Chrome and FIrebug browser. But I was reallyl surprised that the request really hit the webserver despite I could no manipulate the responde.
More surprisingly is that if domain.com/log.php generates a huge responde with like 1MB my firebug showed me that the browser does download ALL th 1MB from the webserver, and at the end it shows a message "Access denied" as expected. So why download all the file if the same origin policy forbids that data to be read.
Finally, I makes me amazed, is that all the websites and specifications I read says very CLEAR that the request is blocked using Ajax when the target domain does not match the source domain. But clearly, with my experiment, the requests are being completed, despite I cannot have access to the response data.
What makes me upset is that it could be open a BIG security hole, in which a website with thousands of views everyday could run this 3 line code and cause a HUGE Ddos attack in an unfriendly website just making the users request a page in another website in small intervals since the browser will not block the request.
I tested this script in IE 7, 8 and 9 and Chrome latest and Firefox latest and the behaviour is the same: the request is done and the browser downloads all the response while not making it avaiblable to do SOP.
Hope someone can explain me why the specs are so wrong about it or what I am understanding wrong!
This happens because the same origin policy is applied on the client side (browser) by evaluating the following access control header values returned from the server:
Access-Control-Allow-Origin
Access-Control-Allow-Methods
Access-Control-Allow-Headers
As you can see, the request must first be completed on the server in order for the browser to inspect the returned headers. This is exactly the reason why your request execute on the server.
You can have a look at Priciples of the Same-Origin Policy by A. Barth.
See bobince's answer at a similar question:
As per XMLHttpRequest level 2, browsers allow cross-origin GETs to be
sent without preflighting, but don't allow the results to be read from
the response unless the remote domain opts in. There is no additional
vulnerability here because you can already cause a GET to an arbitrary
URL to be sent (including query string, for what it's worth) through
multiple more basic interfaces.
For example you have always been able to create an element with
its src set to an address on a remote domain; taking away that
cross-domain ability would break a lot of the existing web.
Related:
Caniuse
XHR2 Spec