Mixed Content warning when serving over HTTPS about cloudinary-react HOT 6 CLOSED

I added the secure prop and it works. Thanks!

<Video 
   secure
   ...

from cloudinary-react.

@skube this weird, since the protocol for serving images from Cloudinary relies on the window.location.protocol, see https://github.com/cloudinary/cloudinary_js/blob/a50f25d3bb308c98549308667836fe165f9ff383/src/configuration.coffee#L15.

You can force the SDK to use HTTPS by providing the secure attribute, e.g.:

<CloudinaryContext cloudName="demo" secure>
     <Image publicId="nice_couple" width="300" crop="scale" />
</CloudinaryContext>

See full example here - https://codepen.io/eitanp461/pen/pOZwJe.
You can copy the HTML from the pen to a local server and see how the secure attribute affects the image delivery URL.

You can find a complete list of supported configuration parameters here - https://cloudinary.com/documentation/solution_overview#configuration_parameters

from cloudinary-react.

The problem for us is that we do SSR which does not have access to window.location.protocol. So when it is rehydrated in the client not only is it mixed content but the app HTML does not match what React renders causing issues. The solution is manually setting the secure option.

from cloudinary-react.

Hello, we noticed the same issue just today with v1.1.0.

from cloudinary-react.

@ronnyhaase did you try the solution above?

from cloudinary-react.

Yes I did, @strausr and it works.
But I think it would be nice if that wouldn't be necessary and to have a look at the actual reason.

from cloudinary-react.