https網頁載入http資源提示載入不安全腳本

来源:https://www.cnblogs.com/jassy/archive/2018/02/23/8461812.html
-Advertisement-
Play Games

https是當下的網站的主流趨勢,甚至像蘋果這樣的大公司,則完全要求用戶必須使用https地址。 然而對於以前http鏈接來說,我們往往就存在一個相容性問題,因為你不可能一下就全部切換過去,應該在很長一段時間內,https與http將共存。 https與http共存的場景有如: 1. app已經發佈 ...


 https是當下的網站的主流趨勢,甚至像蘋果這樣的大公司,則完全要求用戶必須使用https地址。

 然而對於以前http鏈接來說,我們往往就存在一個相容性問題,因為你不可能一下就全部切換過去,應該在很長一段時間內,https與http將共存。

 https與http共存的場景有如:

   1. app已經發佈出去,其調用介面的地址為http的,那麼這是必須相容的。

   2. app中嵌入了h5頁面,而這頁面在以前的設計中是使用http訪問的,如果換成https地址,極有可能將導致h5頁面無法打開。

   3. 對於流量推廣一類的業務,可能原有的http推廣地址已經發送給第三方,而且即使你通知到第三方要求改為https,也不排除有http地址的訪問。

 針對以上場景,我們肯定是要https與http共存的。

 改https初看起來,其實就是一個功能變數名稱指向的問題,也許我們只要將http的請求,直接跳轉到https地址去,那麼也就完成了https的切換。實際並不是這麼簡單的。

 因為https地址中,如果載入了http資源,瀏覽器將認為這是不安全的資源,將會預設阻止,這就會給你帶來資源不全的問題了,比如:圖片顯示不了,樣式載入不了,JS載入不了。因為樣式類,基本上都是寫在本地的,所以一般還可以,但是一些公共的js文件,往往就是存在於cdn或者其他伺服器上,這時候,如果訪問不了,可能就導致了業務就完全操作不了。比如:jquery效法載入失敗,可能所有的操作、請求都將無效了。

 將http請求直接跳轉至https請求,是一種解決辦法,而且很多公司都是這麼乾的,比如百度什麼的,但是前提是,你所有的服務都已切換https完成。

 但是對於,要相容https、http兩種協議的情況,怎樣才能做到呢?

 1. 最笨的方法,直接複製原有代碼,寫成兩套代碼,一套為http使用,一套為https使用,http和https各自指向各自服務。

 2. 可用的方法,用同一套代碼,在後臺請求標識好協議,將該變數傳到html頁面中,進行協議替換,如:後臺變數,$protocol = 'https://';  前臺接收變數src='{$protocol}res.aa.com/jquery.js'。

 3. h5方法,使用js自己載入協議情況,如在body onload='aa()', 在aa() 方法中,將資源按照需求載入進來即可。<script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.4.2.js"%3E%3C/script%3E'))</script>

 4. 推薦方法,不指定具體協議,使用資源協議自適配,比如,當前為https頁面,那麼就是https資源,如果是http頁面,那麼就是http資源。具體方法超簡單:<script src='//www.aa.com/jquery.js'></script>

 5.含有超鏈接的需要換成<a onclick=window.open('http://jxipt.365960.cn/') style='cursor:pointer'>信息地址</a>

使用 iframe

使用 iframe 的方式引入 http 資源,比如在 https 裡面播放優酷的視頻,我們可以先在一個 http 的頁面里播放優酷視頻,然後將這個頁面嵌入到 https 頁面里就可以了。

另外一個典型的例子是在 https 頁面里通過 Ajax 的方式請求 http 資源,Chrome 是不允許直接 Ajax 請求 http 的。如果兩個頁面的內容都可以控制的話,當前視窗可以 iframe 視窗進行通信。

其他用法

<img src="//domain.com/img/logo.png">

這個小技巧同樣適用於 CSS : 

.omg background: url(//websbestgifs.net/kittyonadolphin.gif); }

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 如何區分word-wrap:break-word;和word-break:break-all;????? 剛看到了這兩個屬性,心裡一萬句草泥馬,怎麼還有這麼像的屬性,不僅像還拗口,死記硬背肯定記混.所以就問了度娘把我的理解整理一下. 首先 總說一下這兩個屬性的作用:斷句! 這兩個屬性作用於英文還有數 ...
  • //1.遍曆數組法,通過indexOf檢索臨時新建的數組,檢索值為arr數組裡面的值,沒有則加入新建數組var arr=[1,4,3,5,1,2,5,4,3,2,1,4,2,6]; var n=[]; for(var i=0;i<arr.length;i++){ if(n.indexOf(arr[i ...
  • 1. 只有一個主線程,node開始執行腳本時,會先進事件迴圈初始化(同步任務,發出非同步請求,規劃定時器生效時間,執行promise.nextTick等),這時事件迴圈還未開始。 nodejs運行機制: 2. nodejs每一輪事件迴圈的六個階段(事件迴圈會無限次執行,直到非同步任務的回調函數隊列清空才 ...
  • 一、前言 新年新氣象,轉眼今年就28了,不知道今年能不能把妹成功呢?哈哈哈!上班第一天,部門Web技術主管給每個同事都發了紅包鼓勵大家今年加油,我作為新轉入部門員工不能給團隊掉鏈子,要加緊學習跟上隊伍。大家都下班了,我安安靜靜總結之前BootStrap的知識內容。 二、內容 BootStrap的<t ...
  • 本人是今年準備畢業的大四學生,算是快進入社會的編程小白一枚,大學期間自己在網上搜集資料自學完了有關於WebGL的相關基礎課程,現在在這裡分享一下我學慣用到的書籍,希望幫助到許多想學但又不知道如何下手的人,大家一起進步。 1.首先對於有一定javascript基礎的人可以看《[JavaScript權威 ...
  • 自己一直想成為高級前端開發工程師,而自學。奈何最近感覺自學收效甚微,一度迷茫。 不破不立,打算改變這樣的狀態。 春節後上班第一天,今年打算好好實現自己的前端夢想。 重新整理、總結前端技術。 廢話,就不多說了,開始今天的主題。 Html中meta標簽 一、meta標簽 含義 <meta> 元素 可提供 ...
  • 最近遇到的這個問題,就是在for迴圈內if判斷的條件會多次執行。 例如,在返回的30數據中,a條目是第7條則會進行30次判斷,彈出29次查無數據,也就是要點擊29次關閉alert,很是讓人不爽。 有了下列解決辦法(利用flag標誌來進行判斷) var temp = false; //迴圈遍歷 拿到數 ...
  • import():函數是按需載入,import文件的export function require():是運行時載入 import().then(()=>{}) Promise.all([import(),import()]).then(()=>{}) ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...