56

We have deployed the api on azure and trying to consume in our web app written in angular 5. However when we try to consume the api we are getting following errors.

Chrome Mixed Content: The page at 'https://somedevapp.azurewebsites.net/#/managesomething' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://admindevapp.azurewebsites.net/api/data/getdata'. This request has been blocked; the content must be served over HTTPS.

Firefox Blocked loading mixed active content

Is this issue related to CORS? How to resolve this issue?

Any help on this appreciated!

Super Kai - Kazuya Ito
  • 22,221
  • 10
  • 124
  • 129
XamDev
  • 3,377
  • 12
  • 58
  • 97
  • 5
    The Chrome error message has explained exactly what the problem is, and how you need to fix it. –  Sep 01 '18 at 18:16
  • 2
    You can add the domain of your API to allowed resources in your html head. And like the error said: use https – Simon Franzen Sep 01 '18 at 18:18
  • 1
    @duskwuff Yes So we need to consume all APIs with https protocol only. But do we need to fix in angular from where we are consuming APIs OR from web api side also ? – XamDev Sep 01 '18 at 18:19
  • 1
    @SimonFranzen can you give example how to add domain of APIs in allowed resources in HTML head ? – XamDev Sep 01 '18 at 18:25
  • 2
    Google: CORS allow Domain . Sorry I am on the way ..... – Simon Franzen Sep 01 '18 at 18:27

6 Answers6

116

If your web app is being hosted over HTTPs as you've indicated, then all external resources it is consuming (CDN, scripts, CSS files, API calls) should also use SSL and be secured through HTTPs. Think about it. It would defeat the purpose of your app being secure, if your app was in turn making insecure requests to an API.

You can either therefore:

  1. As Chrome suggests, change your API calls to use HTTPs (recommended)

  2. Use HTTP instead of HTTPs

  3. Add the following meta tag to your <head> element in your HTML:

    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />

More information about this can be found here: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/upgrade-insecure-requests.

PålOliver
  • 2,502
  • 1
  • 23
  • 27
Mehdi Ibrahim
  • 2,434
  • 1
  • 13
  • 13
19

Use this ---- Add in your head section I will try this with my weather application & now it's working fine

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
Vishwajeet Singh
  • 191
  • 1
  • 2
12

only add this on header section.

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
Sandeep Kumar
  • 409
  • 4
  • 5
8
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

you can use this only if your resource API supports the HTTPS request.

example: "http://ip-api.com/json" and "https://ip-api.com/json" both will not return the same response if "ip-api.com" doesn't support HTTPS requests.

Rahul Gupta
  • 166
  • 3
  • 7
5

The meta tag below helps to prevent Chrome complaining about HTTP request made. I was working on a class projects (a weather app) and the API call over HTTP and adding an S to the HTTP call doesn't help. Since this a project a there no major issue. The meta tag share above by @Medhi Ibrahim does the trick.

   <meta 
     http-equiv="Content-Security-Policy"   
     content="upgrade-insecure-requests" 
    />
Sagar Sharma
  • 5
  • 6
Zhesc
  • 51
  • 1
  • 3
2

i tried to remove the "meta solution" on index. And removed the "s" on environment.prod.ts

When i sign in " http://app.finoview.com" the api Nestjs works.

But when i try to log in "https://finoview.com", angular works, but the api nestjs doesnt work.

Here is the image:

enter image description here

Rohan Rao
  • 2,505
  • 3
  • 19
  • 39
Raúl García Sarabia
  • 21
  • 3