Mixed Content error was occurred when import cloudinary url-gen in javascript

Fujeng_Chang
Fujeng_Chang Member Posts: 2 ✭
edited May 13 in Developer APIs

Hi Everyone.

I am a new in the Cloudinary. My apps paltform is on the Heroku.

After running the app with the Cloudinary SDK, I got the following error message.

Mixed Content: The page at 'https://abc.herokuapp.com/user_profile.html' was loaded over HTTPS, but requested an insecure script 'http://abc.herokuapp.com/node_modules/@cloudinary/url-gen/'. This request has been blocked; the content must be served over HTTPS.

Surely, I also searched the related information on the Internet. In the meantime, I added the secure parameter to force https in the cloudinary. Unfortunately, this error is still existed.

Quote

// Import the Cloudinary class

import {Cloudinary} from '../../node_modules/@cloudinary/url-gen';


// Create your instance

const cld = new Cloudinary({    cloud: {cloudName: 'abc'

},

url: {        secure: true // force https, set to false to force http

}});

UnQuote

Could you please push me the right way? Thanks.

Best Regards,

Fujeng😄

Tagged:

Answers

  • Wissam
    Wissam Member, Cloudinary Staff Posts: 103

    Hi Fujeng,

    The error message you're encountering is related to mixed content. Your web page is being loaded over HTTPS (secure connection), but it's trying to load a script from an insecure source (HTTP). This is a security risk, so browsers block such requests.

    The code you have shared will return the asset URL with HTTPS, can you share some asset URL that you are receiving from Cloudinary?
    I would suggest to make sure you are using the latest SDK version.

    Another point to Ensure your Heroku app is set up to serve content over HTTPS. You can enforce HTTPS redirection in Heroku using a Procfile or through the Heroku dashboard settings. Refer to Heroku's documentation for details on enforcing HTTPS: https://help.heroku.com/J2R1S4T8/can-heroku-force-an-application-to-use-ssl-tls

    Make sure that after you make the changes redeploy your app on Heroku and test if the mixed content issue is resolved. Ensure that all resources are now loaded securely over HTTPS.

    Best Regards,

    Wissam

  • Fujeng_Chang
    Fujeng_Chang Member Posts: 2 ✭

    Dear Wissam,

    Thanks for your information and help.

    After thinking about the related errors again, perhaps I missed the points about my environment.

    I also use strapi on my Heroku platform. In the meantime, I configured the Cloudinary and Strapi together.

    They can work well now. So I should call the related customed API from strapi. Not direct to the Cloudinary.

    Am I right?

    Thanks.

    Fujeng

  • Wissam
    Wissam Member, Cloudinary Staff Posts: 103

    Hi Fujeng,

    Strapi integration is a community-built library, not an official Cloudinary SDK.
    You can still use our REST API call through our SDKs:
    https://cloudinary.com/documentation/integrating_cloudinary_with_other_platforms#sdks

    I also found the following Strapi Cloudinary integration guide that you might find useful:
    https://www.restack.io/docs/strapi-knowledge-strapi-cloudinary-integration

    When you upload an image through Strapi's admin panel, it is automatically sent to Cloudinary, which is optimized and transformed based on your predefined settings.

    I hope this helps!
    Regards,

    Wissam

Categories