Auth0 Home Blog Docs

Default avatar causes CORS error

The default user picture (avatar) for a person who doesn’t already have a gravatar associated with their email address looks something like:

default avatar

In practice, the actual URL associated with this picture looks something like:

https://s.gravatar.com/avatar/3161f22b2e121fdb1279dc1d2a657cac?s=480&r=pg&d=https%3A%2F%2Fcdn.auth0.com%2Favatars%2Fmo.png

Even though it resolves to the image more simply stored at:

https://cdn.auth0.com/avatars/mo.png

In my app I’m using a <canvas> based component that allows the user to upload and crop a new profile picture. It is supposed to load the current profile picture into the widget, but it doesn’t.

The problem is that the gravatar.com URL above doesn’t have a CORS header set, so <canvas> can’t load it.

I guess I have a couple of questions:

  1. Would it be possible (eventually) for Auth0 to use a different default image that is served from a location with a proper CORS header set? (or possibly to lobby Gravatar to update their server)
  2. Is this file structure stable/solid enough that I could work around this reliably by just parsing the image filename (everything after the final %2F) and then just append it to https://cdn.auth0.com/avatars/?

The second option will meet my needs for now, but ultimately it would be nice not to have to parse the picture URL.

Thanks!

1 Like

It’s not the answer you were hoping for, but if I were in a similar situation I would just handle this through my own backend; if you get the image data from your application back-end then you have full control while also having full resilience to change in URL formats.

In other words, have an endpoint that in your own system that for a profile picture URL it will return the image data; given it’s in the back-end you don’t have to worry about the original source of the image data not supporting CORS and you also don’t need to worry about the format of the URL.

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.