Default avatar causes CORS error

[morphatic]

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

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!

[jmangelo]

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.