[javascript] 안전하지 않은 응답 또는 연결 거부로 인해 ajax 호출이 실패했는지 확인

최신 웹 브라우저와 구별 할 방법이 없습니다.

W3C 사양 :

아래 단계는 간단한 교차 출처 요청에 대해 사용자 에이전트가 수행해야하는 작업을 설명합니다 .

요청하기 단계를 적용하고 요청하는 동안 아래 요청 규칙을 준수하십시오.

수동 리디렉션 플래그가 설정되어 있지 않고 응답에 301, 302, 303, 307 또는 308의 HTTP 상태 코드가있는
경우 리디렉션 단계를 적용합니다.

최종 사용자가 요청을 취소하는 경우
중단 단계를 적용합니다.

네트워크 오류가있는
경우 DNS 오류, TLS 협상 실패 또는 기타 유형의 네트워크 오류가있는 경우 네트워크 오류 단계를 적용 합니다 . 어떠한 종류의 최종 사용자 상호 작용도 요청하지 마십시오.

참고 : 여기에는 HTTP 상태 코드 410과 같은 오류 유형을 나타내는 HTTP 응답이 포함되지 않습니다.

그렇지 않으면
자원 공유 검사를 수행하십시오. 실패하면 네트워크 오류 단계를 적용하십시오. 그렇지 않고 통과를 반환하면이 알고리즘을 종료하고 교차 출처 요청 상태를 성공으로 설정합니다. 실제로 요청을 종료하지 마십시오.

읽을 수 있듯이 네트워크 오류에는 오류가 포함 된 HTTP 응답이 포함되지 않으므로 항상 상태 코드로 0, 오류로 “”가 표시됩니다.

출처

참고 : 다음 예제는 Google Chrome 버전 43.0.2357.130을 사용하고 OP 1을 에뮬레이션하기 위해 만든 환경에 대해 작성되었습니다. 설정 코드는 답변 하단에 있습니다.

나는이 문제를 해결하기 위해이 답변 으로 HTTPS 대신 HTTP를 통해 보조 요청을하는 것이지만 새로운 버전의 브라우저가 혼합 콘텐츠를 차단하기 때문에 불가능하다는 것을 기억했습니다.

즉, HTTPS를 사용하는 경우 웹 브라우저가 HTTP를 통한 요청을 허용하지 않으며 그 반대의 경우도 마찬가지입니다.

이것은 몇 년 전부터 이와 같았지만 Mozilla Firefox와 같은 이전 웹 브라우저 버전은 23 버전 이하에서 허용됩니다.

그것에 대한 증거 :

Web Broser 콘솔을 사용하여 HTTPS에서 HTTP 요청 만들기

var request = new XMLHttpRequest();
request.open('GET', "http://localhost:8001", true);
request.onload = function () {
    console.log(request.responseText);
};
request.onerror = function () {
    console.log(request.responseText);
};
request.send();

다음 오류가 발생합니다.

혼합 콘텐츠 : ‘ https : // localhost : 8000 / ‘의 페이지가 HTTPS를 통해로드되었지만 안전하지 않은 XMLHttpRequest 엔드 포인트 ‘ http : // localhost : 8001 / ‘를 요청했습니다. 이 요청은 차단되었습니다. 콘텐츠는 HTTPS를 통해 제공되어야합니다.

Iframe을 추가하는 것과 같은 다른 방법으로이 작업을 시도하면 브라우저 콘솔에 동일한 오류가 나타납니다.

<iframe src="http://localhost:8001"></iframe>

소켓 연결을 사용 하여 답변으로 게시 했습니다. 결과가 동일 / 유사 할 것이라고 확신했지만 시도해 보았습니다.

HTTPS를 사용하여 웹 브라우저에서 비보안 소켓 끝점으로 소켓 연결을 열려고하면 혼합 콘텐츠 오류가 발생합니다.

new WebSocket("ws://localhost:8001", "protocolOne");

1) 혼합 콘텐츠 : ‘ https : // localhost : 8000 / ‘의 페이지가 HTTPS를 통해로드되었지만 안전하지 않은 WebSocket 끝점 ‘ws : // localhost : 8001 /’에 연결을 시도했습니다. 이 요청은 차단되었습니다. 이 끝점은 WSS를 통해 사용할 수 있어야합니다.

2) 포착되지 않은 DOMException : ‘WebSocket’구성 실패 : HTTPS를 통해로드 된 페이지에서 안전하지 않은 WebSocket 연결이 시작되지 않을 수 있습니다.

그런 다음 wss 엔드 포인트에 연결을 시도했습니다. 네트워크 연결 오류에 대한 정보를 읽을 수 있는지 확인하십시오.

var exampleSocket = new WebSocket("wss://localhost:8001", "protocolOne");
exampleSocket.onerror = function(e) {
    console.log(e);
}

서버를 끈 상태에서 위의 스 니펫을 실행하면 다음과 같은 결과가 발생합니다.

‘wss : // localhost : 8001 /’에 대한 WebSocket 연결 실패 : 연결 설정 오류 : net :: ERR_CONNECTION_REFUSED

서버를 켠 상태에서 위의 스 니펫 실행

‘wss : // localhost : 8001 /’에 대한 WebSocket 연결 실패 : WebSocket 열기 핸드 셰이크가 취소되었습니다.

그러나 다시 말하지만, “onerror function”이 콘솔에 출력하는 오류는 하나의 오류를 다른 오류를 구별하는 팁이 없습니다.

이 답변이 제안한 대로 프록시를 사용 하면 “대상”서버에 공용 액세스 권한이있는 경우에만 작동 할 수 있습니다.

여기에서는 그렇지 않았으므로이 시나리오에서 프록시를 구현하려고하면 동일한 문제가 발생합니다.

Node.js HTTPS 서버를 만드는 코드 :

자체 서명 된 인증서를 사용하는 두 개의 Nodejs HTTPS 서버를 만들었습니다.

targetServer.js :

var https = require('https');
var fs = require('fs');

var options = {
    key: fs.readFileSync('./certs2/key.pem'),
    cert: fs.readFileSync('./certs2/key-cert.pem')
};

https.createServer(options, function (req, res) {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
    res.writeHead(200);
    res.end("hello world\n");
}).listen(8001);

applicationServer.js :

var https = require('https');
var fs = require('fs');

var options = {
    key: fs.readFileSync('./certs/key.pem'),
    cert: fs.readFileSync('./certs/key-cert.pem')
};

https.createServer(options, function (req, res) {
    res.writeHead(200);
    res.end("hello world\n");
}).listen(8000);

작동하려면 Nodejs를 설치해야합니다. 각 서버에 대해 별도의 인증서를 생성하고 그에 따라 certs 및 certs2 폴더에 저장해야합니다.

실행하는 단지 실행 node applicationServer.js하고 node targetServer.js단말기 (우분투 예)이다.

답변

isUp = false;
isAccepted = false;

var isUpRequest = new XMLHttpRequest();
isUpRequest.open('GET', "http://localhost/custom/server/", true); //note non-ssl port
isUpRequest.onload = function() {
    isUp = true;
    var isAcceptedRequest = new XMLHttpRequest();
    isAcceptedRequest.open('GET', "https://localhost/custom/server/", true); //note ssl port
    isAcceptedRequest.onload = function() {
        console.log("Server is up and certificate accepted");
        isAccepted = true;
    }
    isAcceptedRequest.onerror = function() {
        console.log("Server is up and certificate is not accepted");
    }
    isAcceptedRequest.send();
};
isUpRequest.onerror = function() {
    console.log("Server is down");
};
isUpRequest.send();

if (jqXHR.status == 501) {
//insecure response
} else if (jqXHR.status == 102) {
//connection refused
}