After deploying https, the browser warns it's not secure and the green padlock doesn't appear?

Published: 2020-06-19

After the website is deployed with https, the browser indicates it is insecure, and the small green lock icon does not appear?

After visiting the website, press f12, and the browser prompts:

Mixed Content: The page at 'https://www.xxx.com/'' was loaded over HTTPS, but requested an insecure image 'http://www.xxx.com/uploads/2018/12/3.png'. This content

The reason is that on an https page, if http resources are called, the browser will throw some errors,

Solution: Add  Upgrade-Insecure-Requests in the header, which will tell the browser that it can upgrade all  http  connections belonging to this site to  https  connections, while external site requests remain by default;

Method to add header:

1.iis7

        image.png

        

        Or directly define it in web.config in the website root directory

 <?xml version="1.0" encoding="UTF-8"?>   
      <configuration>
         <system.webServer>
           <httpProtocol>
           <customHeaders>
            <add name="Content-Security-Policy" value="upgrade-insecure-requests" />
           </customHeaders>
         </httpProtocol>
       </system.webServer> 
      </configuration>

2.apache

    It can be defined directly in .htaccess in the website root directory

 <IFModule mod_headers.c>     
     Header add Content-Security-Policy upgrade-insecure-requests
 </IFModule>

3. nginx

        server {
            listen        80;
            server_name   (myservername);
            add_header Content-Security-Policy "upgrade-insecure-requests";
            location / {    
                proxy_pass         http://localhost:5000;
            }
        }