解決chrome阻止未經驗證腳本加載的問題

時間 2020-01-10

原文原文鏈接

問題

最近遇到了個問題，同事電腦的谷歌瀏覽器在加載websocket（實際項目用的是stomp.js）的時候，websocket鏈接不上。php

緣由

從網上獲取了類似狀況的圖片：
html

首先谷歌瀏覽器攔截了未經驗證來源的腳本，而後控制檯打印出了混合內容報錯，大概模板是這樣的：
Mixed Content: The page at '****************' was loaded over HTTPS, but requested an insecure resource '****************'. This request has been blocked; the content must be served over HTTPS.jquery

解決方法

點擊網址輸入欄右邊的小金盾，容許加載未知來源的腳本
將https鏈接的協議，改成http鏈接的協議，好比： https://www.123.cn 改成http://www.123.cn

最近社區中也發現了mixed content的問題，列下補充一下：

HTTPS頁面裏動態的引入HTTP資源，好比引入一個js文件，會被直接block掉的。
在HTTPS頁面裏經過AJAX的方式請求HTTP資源，也會被直接block掉的。git

問題1：

在博客中，引入優酷視頻，採用的是iframe形式，以下：github

<div class="video_content">
    <iframe height=148 width=220 src="http://player.youku.com/embed/XMTU4MTY4OTg5Mg==" frameborder=0 allowfullscreen></iframe>
</div>

但沒法打開這個視頻，chrome瀏覽器下提示錯誤：web

Mixed Content: The page at 'https://xifengxx.github.io/web-demo/imooc/index.html' was loaded over HTTPS, but requested an insecure resource 'http://player.youku.com/embed/XMTU4MTY4OTg5Mg=='. This request has been blocked; the content must be served over HTTPS.chrome

問題2：

博客中，經過Ajax引入了http資源，也是沒法順利訪問，chrome瀏覽器下提示錯誤：api

jquery.min.js:4 Mixed Content: The page at 'https://xifengxx.github.io/web-demo/music-APP/index.html' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://api.jirengu.com/fm/getChannels.php'. This request has been blocked; the content must be served over HTTPS.瀏覽器

具體的的解決方法主要是：
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
能夠在相應的頁面的<head>里加上這句代碼，意思是自動將http的不安全請求升級爲https。安全

圖片獲取：https://www.cnblogs.com/Marydon20170307/p/9086279.html
參考文章： https://thehackernews.com/2015/04/disable-mixed-content-warning.html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。