Error uploading profile picture from URL - misconfigured CORS
-
I was trying to "upload" a new profile picture from URL, and received an error that it could not complete due to misconfigured CORS.
- I assume this is an Admins thing on our side cc: @ben_lubar
- There's also somewhat of a NodeBB
bugroom for design improvement here in one of two spots:
-- It didn't give me the CORS error until after it had presented the Crop & Upload page and I worked through the crop process and hit the final submit button
-- It didn't re-enable the final submit button after the toaster happened, nor did it close the Crop & Upload modal. When I hit the "back" button in the browser, NodeBB navigated back to the topics list underneath the modal but the modal stayed open.
I don't think either half of the behavior was really severely breaking - closing the modal with the X worked just fine, I didn't get stuck and have to reload the page or anything. But I think it would be better design if the CORS check could happen before presenting the Crop & Upload page - it was mildly annoying to spend a minute cropping and then lose that work because of the configuration error that existed before I started.
-
@izzion is the CORS that's affecting the request on what.thedailywtf.com or on the website where the image is hosted?
-
@ben_lubar
Dunno, this is all the information I get
On a more serious note, I also discovered an actual NodeBB bug while trying to repro for the above error:
- If you supply a link that isn't a picture, the "crop photo" page just hangs on a failed-to-load-image icon, without providing any feedback that your picture link wasn't a picture link.
Looking at the console:
Access to XMLHttpRequest at 'https://cdn.bulbagarden.net/upload/f/f7/Spr_7s_147_s.png' from origin 'https://what.thedailywtf.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Or, when I try stripping the SSL from the target image...
Access to XMLHttpRequest at 'http://cdn.bulbagarden.net/upload/f/f7/Spr_7s_147_s.png' from origin 'https://what.thedailywtf.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
So maybe it's something fixable on this side, but it's also probably because there's no CORS header on the target side?
-
@izzion said in Error uploading profile picture from URL - misconfigured CORS:
@ben_lubar
Dunno, this is all the information I get
On a more serious note, I also discovered an actual NodeBB bug while trying to repro for the above error:
- If you supply a link that isn't a picture, the "crop photo" page just hangs on a failed-to-load-image icon, without providing any feedback that your picture link wasn't a picture link.
Looking at the console:
Access to XMLHttpRequest at 'https://cdn.bulbagarden.net/upload/f/f7/Spr_7s_147_s.png' from origin 'https://what.thedailywtf.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Or, when I try stripping the SSL from the target image...
Access to XMLHttpRequest at 'http://cdn.bulbagarden.net/upload/f/f7/Spr_7s_147_s.png' from origin 'https://what.thedailywtf.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
So maybe it's something fixable on this side, but it's also probably because there's no CORS header on the target side?
Yeah, that's your web browser refusing to let NodeBB load the Pokemon image because the Pokemon wiki doesn't say it can.
The workaround would just be downloading the image and re-uploading it or pasting the URL into the file selector if your OS supports that.
-
@izzion said in Error uploading profile picture from URL - misconfigured CORS:
but it's also probably because there's no CORS header on the target side?
It's this.
doesn't include the Access-Control-Allow-Originheader when it serves up the image, so
(or more specifically your browser) doesn't know that it's publicly available and not leaking seekrits about your pokémon. Therefore, it can't upload it to some random, unrelated server (ours). Theoretically, the server-side software could download the image (since it wouldn't have any of your credentials and thus couldn't access your seekrits), but if the image differs between your authenticated browser and the unauthenticated server it could lead to unexpected behavior. Your best bet is to talk to the Bulbapedia folks and get them to Access-Control-Allow-Origin: *all the CDN things.
-
@ben_lubar
As evidenced by my profile image, I already discovered the workaround...
I guess this is more of a NodeBB unexpected behavior -- I would kind of expect that the server would go out and get the image from the link, since the application has already shown me the image to crop. I guess it must be an element of iframe-style behavior that's allowing the local client to pull the image for the crop selector, and then when the "ok, now do it" request is sent to the server the client is trying to download and resubmit the picture to the server, but as a user (without putting my technical hat on), I would have expected that once I saw the image to crop it would have all worked.
So I guess I should restate this as a feature/change request, to do one of the following two approaches:
- Check the CORS policy first, before bringing up the image to crop, and error out there (possibly with a more verbose / clearer error) indicating that the image won't be able to be uploaded by URL
- Change the post-crop behavior so the client sends the image URL and the desired crop coordinates to the server, and then the server does its own CURL request (possibly sending back a confirmation image before applying, to cover the potential case of image differing between my browser requesting it and the server requesting it)
-
@izzion said in Error uploading profile picture from URL - misconfigured CORS:
@ben_lubar
As evidenced by my profile image, I already discovered the workaround...I guess this is more of a NodeBB unexpected behavior -- I would kind of expect that the server would go out and get the image from the link, since the application has already shown me the image to crop. I guess it must be an element of iframe-style behavior that's allowing the local client to pull the image for the crop selector, and then when the "ok, now do it" request is sent to the server the client is trying to download and resubmit the picture to the server, but as a user (without putting my technical hat on), I would have expected that once I saw the image to crop it would have all worked.
So I guess I should restate this as a feature/change request, to do one of the following two approaches:
- Check the CORS policy first, before bringing up the image to crop, and error out there (possibly with a more verbose / clearer error) indicating that the image won't be able to be uploaded by URL
- Change the post-crop behavior so the client sends the image URL and the desired crop coordinates to the server, and then the server does its own CURL request (possibly sending back a confirmation image before applying, to cover the potential case of image differing between my browser requesting it and the server requesting it)
I'd have the server do all the requests just due to how iframely already exists. Just do a sanity check to make sure the server isn't requesting something on a protocol like file:/// and it should be fine.
-
@ben_lubar
Now where do I find the NodeBB version & git hash to submit on the issue tracker...
-
@izzion said in Error uploading profile picture from URL - misconfigured CORS:
@ben_lubar
Now where do I find the NodeBB version & git hash to submit on the issue tracker...Right now I think we're on vanilla 1.10.2
tdwtf/Dockerfile at ee37a617a222df3ab5f43b366276ebf839b45442 · boomzillawtf/tdwtf
Custom CSS and headers for what.thedailywtf.com. Contribute to boomzillawtf/tdwtf development by creating an account on GitHub.
