HTTPS 페이지에서 HTTP AJAX 작업을 실행할 때 "혼합 콘텐츠 차단됨"

HTTPS 페이지에서 HTTP AJAX 작업을 실행할 때 "혼합 콘텐츠 차단됨"

---

crm (ViciDial)에 제출하는 양식이 있습니다 (이 방식으로 필요하므로 GET을 통해). 양식을 성공적으로 제출할 수 있지만 그렇게하면 crm의 처리 파일이 성공 텍스트를 표시하고 그게 전부입니다.

이 텍스트 대신 웹 사이트에 감사 페이지를 표시하고 싶기 때문에 AJAX를 사용하여 양식을 제출하고 필요한 페이지로 리디렉션하기로 결정했지만 브라우저에서이 오류가 발생합니다.

혼합 콘텐츠 : ' https://page.com ' 의 페이지가 HTTPS를 통해로드되었지만 안전하지 않은 XMLHttpRequest 엔드 포인트 ' http://XX.XXX.XX.XXX/vicidial/non_agent_api.php?queries=query=data를 요청했습니다. '. 이 요청은 차단되었습니다. 콘텐츠는 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에 전송하고 (서버 측에서는 혼합 콘텐츠 문제가 없음) 행복한 사용자를 멋진 감사 페이지로 리디렉션합니다.

---

HTTPS를 사용하여 브라우저에서 페이지를로드하면 브라우저는 HTTP를 통한 리소스로드를 거부합니다. 시도한대로 HTTP 대신 HTTPS를 사용하도록 API URL을 변경하면 일반적으로이 문제가 해결 됩니다. 그러나 API는 HTTPS 연결을 허용하지 않아야합니다. 따라서 기본 페이지에서 HTTP를 강제 실행하거나 HTTPS 연결을 허용하도록 요청해야합니다.

참고 사항 : AJAX로로드하는 대신 API URL로 이동하면 요청이 계속 작동합니다. 이는 브라우저가 보안 페이지 내에서 리소스를로드하지 않고 대신 안전하지 않은 페이지를로드하고이를 수락하기 때문입니다. 그러나 AJAX를 통해 사용할 수 있으려면 프로토콜이 일치해야합니다.

---

우리가 제어하지 않는 제 3 자 API를 사용하고 있기 때문에 HTML 페이지에 다음 코드를 추가하여이 문제를 해결했습니다.

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

이것이 도움이되기를 바랍니다.

---

신뢰할 수있는 웹 페이지를 방문하는 중이고 빠르게 진행하려면 다음을 수행하십시오.

1- 주소 표시 줄의 맨 오른쪽에있는 방패 아이콘을 클릭합니다.

2- 팝업 창에서 "그래도로드"또는 "안전하지 않은 스크립트로드"를 클릭합니다 (Chrome 버전에 따라 다름).

---

Chrome 브라우저를 항상 (모든 웹 페이지에서) 혼합 콘텐츠를 허용하도록 설정하려는 경우 :

1- 열려있는 Chrome 브라우저에서 키보드의 Ctrl + Shift + Q를 눌러 Chrome을 강제로 닫습니다. 다음 단계를 수행하기 전에 Chrome을 완전히 닫아야합니다.

2- Google Chrome 바탕 화면 아이콘 (또는 시작 메뉴 링크)을 마우스 오른쪽 버튼으로 클릭합니다. 속성을 선택합니다.

3- 대상 필드의 기존 정보 끝에 "--allow-running-insecure-content"를 추가합니다 (첫 번째 대시 앞에 공백이 있습니다.)

4- 확인을 클릭합니다.

5- Chrome을 열고 이전에 차단 된 콘텐츠를 실행 해보십시오. 이제 작동합니다.

---

이 오류의 원인은 매우 간단합니다. 서버가 HTTPS를 통해 실행되는 동안 AJAX가 HTTP를 통해 호출을 시도하므로 서버가 AJAX 호출을 거부합니다. 기본 HTML 파일의 head 태그 안에 다음 줄을 추가하여이 문제를 해결할 수 있습니다.

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

---

If your API code is running on a node.js server then you need to focus your attention there, not in Apache or NGINX. Mikel is right, changing the API URL to HTTPS is the answer but if your API is calling a node.js server, it better be set up for HTTPS! And of course, the node.js server can be on any unused port, it doesn't have to be port 443.

---

Instead of using Ajax Post method, you can use dynamic form along with element. It will works even page is loaded in SSL and submitted source is non SSL.

You need to set value value of element of form.

Actually new dynamic form will open as non SSL mode in separate tab of Browser when target attribute has set '_blank'

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()

참고URL : https://stackoverflow.com/questions/33507566/mixed-content-blocked-when-running-an-http-ajax-operation-in-an-https-page