nginx配置https反向代理，按F12發現js等檔案出現Mixed Content，Optionally-blockable 和 Blockable

HTTPS 網頁中載入的 HTTP 資源被稱之為 Mixed Content（混合內容），不同瀏覽器對 Mixed Content 有不一樣的處理規則。

現代瀏覽器（Chrome、Firefox、Safari、Microsoft Edge），基本上都遵守了 W3C 的 Mixed Content 規範，將 Mixed Content 分為 Optionally-blockable 和 Blockable 兩類：

Optionally-blockable 類 Mixed Content 包含那些危險較小，即使被中間人篡改也無大礙的資源。現代瀏覽器預設會載入這類資源，同時會在控制檯列印警告資訊。這類資源包括：

通過 <img> 標籤載入的圖片（包括 SVG 圖片）；
通過 <video> / <audio> 和 <source> 標籤載入的視訊或音訊；
預讀的（Prefetched）資源；
除此之外所有的 Mixed Content 都是 Blockable，瀏覽器必須禁止載入這類資源。所以現代瀏覽器中，對於 HTTPS 頁面中的 JavaScript、CSS 等 HTTP 資源，一律不載入，直接在控制檯列印錯誤資訊

解決:
而通過 upgrade-insecure-requests 這個 CSP 指令，可以讓瀏覽器幫忙做這個轉換。啟用這個策略後，有兩個變化：

    頁面所有 HTTP 資源，會被替換為 HTTPS 地址再發起請求；
    頁面所有站內連結，點選後會被替換為 HTTPS 地址再跳轉；
(另外一個https相關的SCP指令選項是：block-all-mixed-content。啟用這個選項之後，所有的非https資源都被禁止載入）

實際配置

比如如果有使用nginx做代理，可以在轉發請求的時候新增一個Content-Security-Policy的頭，並將這個頭的值設定為upgrade-insecure-requests，來將http請求轉為https。

關鍵配置：
    add_header Content-Security-Policy upgrade-insecure-requests;

server {
  listen 80;
  server_name www.abc.com;
  return 301 https://www.abc.com$request_uri;

#  location / {
#    rewrite ^/(.*)$ /cba/$1 last;
# }

#  location ~* ^/cba/.*$ {
#    proxy_pass http://172.18.123.21:88;
#  }
}

server {
        listen       80;
        server_name abc.com;
        return 301 https://www.hotriz.com$request_uri;
}
server {
    listen 443;
    server_name abc.com;
    return 301 https://www.abc.com$request_uri;
    ssl_certificate /etc/nginx/ssl/www.abc.com.crt;
    ssl_certificate_key /etc/nginx/ssl/www.abc.com.key;
}

server {
    listen 443 default_server ssl;
    server_name www.abc.com;
    ssl_certificate /etc/nginx/ssl/www.abc.com.crt;
    ssl_certificate_key /etc/nginx/ssl/www.abc.com.key;
    ssl_session_cache shared:SSL:1m;
    ssl_session_timeout 5m;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_ciphers HIGH:!aNULL:!MD5;
    ssl_prefer_server_ciphers on;

    location / {
   	 rewrite ^/(.*)$ /cba/$1 last;
 }


    location ~* ^/cba/.*$ {    #域名:cba，配置後可以直接www.abc.com訪問
  	 proxy_pass http://172.18.123.21:88;
   	 proxy_set_header X-Real-IP $remote_addr;

   	 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

   	 proxy_set_header Host $host;

   	 proxy_set_header Upgrade-Insecure-Requests 1;

   	 proxy_set_header X-Forwarded-Proto https;
	 add_header Content-Security-Policy upgrade-insecure-requests;
  }

}