web-dev-qa-db-ja.com

HTTPSページでHTTP AJAX操作を実行すると「混合コンテンツがブロックされました」

私はcrm（ViciDial）に（この方法で必要とされるのでGETを通して）提出しているフォームを持っています。ただし、crmの処理ファイルが単に成功テキストをエコーするだけであれば、フォームを正常に送信できます。

そのテキストの代わりに、私は私のウェブサイトにお礼のページを表示したいので、フォームを送信して必要なページにリダイレクトするためにAJAXを使用することにしました。ブラウザ：

混合コンテンツ： ' https://page.com 'のページがHTTPS経由でロードされましたが、安全でないXMLHttpRequestエンドポイントが要求されました ' http://XX.XXX.XX.XXX/ vicidial/non_agent_api.php？クエリ=クエリ=データ '。このリクエストはブロックされました。コンテンツはHTTPS経由で配信する必要があります。

これは私のAJAXスクリプトです。

    <script>
    SubmitFormClickToCall = function(){

        jQuery.ajax({
            url: "http://XX.XXX.XX.XX/vicidial/non_agent_api.php",
            data : jQuery("#form-click-to-call").serialize(),
            type : "GET",
            processData: false,
            contentType: false,
            success: function(data){
                window.location.href = "https://www.example.com/thank-you";
            }
        });
    }
    </script>

URLにhttpsを設定するだけではうまくいきません。GETでデータを送信してユーザーをありがとうございますページにリダイレクトする方法はありますか。

===========================

ここでの問題は混在したコンテンツでした、これは私がHTTPSを通してページをロードして、HTTPにあったAPIをAJAXを通してヒットしようとしていたことを意味します。しかし、ブラウザはそれを許可していません。

そのため、APIをHTTPSに設定できない場合（これは私の場合でした）、それでも別の方法でこれに対処できます。

主な問題は、私がデータをAPIに送信し、ユーザーをお礼のページにリダイレクトしたいという混在した問題ではありませんでした。 AJAXを使用する代わりに、私はデータを受け取るphpファイルをcurlを使ってAPIに送り（これはサーバー側で行われているので混在する問題はありません）、私の幸せなユーザーをお礼のページにリダイレクトします。

javascriptphpjqueryhtmlajax
58
StormRage

HTTPSを使用してブラウザにページをロードすると、ブラウザはHTTPを介したリソースのロードを拒否します。あなたが試したように、HTTPの代わりにHTTPSを持つようにAPI URLを変更することは通常この問題を解決する。ただし、あなたのAPIはHTTPS接続を許可してはいけません。このため、メインページでHTTPを強制するか、HTTPS接続を許可するように要求する必要があります。

この点に注意してください：あなたがAJAXでそれをロードしようとする代わりにあなたがAPI URLに行くならば、要求はまだうまくいくでしょう。これは、ブラウザが保護されたページ内からリソースをロードしているのではなく、安全でないページをロードしていてそれを受け入れているためです。 AJAXを介して利用できるようにするには、プロトコルは一致する必要があります。

61
Mikel Bitson

私達は私達によって制御されていない第三者のAPIを使っているので、私はHTMLページに次のコードを追加することによってこれを解決しました。

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

これが助けになることを願っています、そして同様に記録のために。

65
Sky

信頼しているWebページにアクセスしているだけで、早く前進したい場合は、次のようにします。

1 - アドレスバーの右端にある盾のアイコンをクリックします。

Allow mixed content in Google Chrome

2-ポップアップウィンドウで、[いずれにしてもロード]または[安全でないスクリプトをロード]をクリックします（Chromeのバージョンによって異なります）。

Chromeブラウザを常に（すべてのWebページで）に設定するには、混合コンテンツを許可します。

1-開いているChromeブラウザで、キーボードのCtrl + Shift + Qを押してChromeを強制終了します。次の手順を実行する前に、Chromeを完全に閉じておく必要があります。

2 - Google Chromeのデスクトップアイコン（または[スタート]メニューのリンク）を右クリックします。プロパティを選択します。

3- [Target]フィールドの既存の情報の最後に、「 - allow-running-insecure-content」を追加します（最初のダッシュの前にスペースがあります）。

4- [OK]をクリックします。

5 - Chromeを起動して、以前にブロックされたコンテンツを起動してみます。今動作するはずです。

20
Juanma Menendez

APIコードがnode.jsサーバー上で実行されている場合は、ApacheやNGINXではなく、そこに注意を集中する必要があります。 Mikelは正しい、API URLをHTTPSに変更することが答えであるが、あなたのAPIがnode.jsサーバーを呼んでいるならば、それはHTTPSのためにセットアップされるのが良い！もちろん、node.jsサーバーは未使用のポートに配置できます。ポート443にする必要はありません。

0
mcmacerson

Ajax Postメソッドを使用する代わりに、要素と共に動的フォームを使用できます。ページがSSLでロードされ、送信されたソースが非SSLであっても機能します。

あなたはフォームの要素の値valueを設定する必要があります。

target属性が '_blank'に設定されている場合、実際には新しい動的フォームはブラウザの別のタブで非SSLモードとして開きます

var f = document.createElement('form');
f.action='http://XX.XXX.XX.XX/vicidial/non_agent_api.php';
f.method='POST';
//f.target='_blank';
//f.enctype="multipart/form-data"

var k=document.createElement('input');
k.type='hidden';k.name='CustomerID';
k.value='7299';
f.appendChild(k);



//var z=document.getElementById("FileNameId")
//z.setAttribute("name", "IDProof");
//z.setAttribute("id", "IDProof");
//f.appendChild(z);

document.body.appendChild(f);
f.submit()
0
Proneet Ray