ตรวจสอบว่าการโทร ajax ล้มเหลวเนื่องจากการตอบสนองที่ไม่ปลอดภัยหรือการเชื่อมต่อถูกปฏิเสธ

ฉันได้ทำการวิจัยมากมายและไม่สามารถหาวิธีจัดการกับเรื่องนี้ได้ ฉันกำลังพยายามทำการโทร jQuery ajax จากเซิร์ฟเวอร์ https ไปยังเซิร์ฟเวอร์ locahost https ที่ใช้ท่าเทียบเรือพร้อมใบรับรองที่ลงนามด้วยตนเอง ปัญหาของฉันคือฉันไม่สามารถระบุได้ว่าการตอบกลับเป็นการปฏิเสธการเชื่อมต่อหรือการตอบสนองที่ไม่ปลอดภัย (เนื่องจากการไม่ยอมรับใบรับรอง) มีวิธีกำหนดความแตกต่างระหว่างสถานการณ์ทั้งสองหรือไม่ responseTextและstatusCodeมักจะเหมือนกันในทั้งสองกรณีแม้ในคอนโซลโครเมี่ยมที่ฉันสามารถเห็นความแตกต่าง:

net::ERR_INSECURE_RESPONSE
net::ERR_CONNECTION_REFUSED

responseTextเป็น "" เสมอและstatusCodeเป็น "0" สำหรับทั้งสองกรณี

คำถามของฉันคือฉันจะทราบได้อย่างไรว่าการโทร jQuery ajax ล้มเหลวเนื่องจากERR_INSECURE_RESPONSEหรือเนื่องจากERR_CONNECTION_REFUSED?

เมื่อยอมรับใบรับรองแล้วทุกอย่างทำงานได้ดี แต่ฉันต้องการทราบว่าเซิร์ฟเวอร์ localhost ปิดหรือเปิดและทำงาน แต่ยังไม่ยอมรับใบรับรอง

$.ajax({
    type: 'GET',
    url: "https://localhost/custom/server/",
    dataType: "json",
    async: true,
    success: function (response) {
        //do something
    },
    error: function (xhr, textStatus, errorThrown) {
        console.log(xhr, textStatus, errorThrown); //always the same for refused and insecure responses.
    }
});

แม้แต่ดำเนินการตามคำขอด้วยตนเองฉันก็ได้รับผลลัพธ์เดียวกัน:

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

ไม่มีวิธีใดที่จะทำให้แตกต่างจากเว็บเบราว์เซอร์ใหม่ล่าสุด

ข้อกำหนด W3C:

ขั้นตอนด้านล่างอธิบายถึงสิ่งที่ตัวแทนผู้ใช้ต้องทำสำหรับคำขอข้ามแหล่งที่มาง่ายๆ :

ทำตามขั้นตอนการร้องขอและปฏิบัติตามกฎการร้องขอด้านล่างขณะทำการร้องขอ

หากไม่ได้ตั้งค่าสถานะการเปลี่ยนเส้นทางด้วยตนเองและการตอบกลับมีรหัสสถานะ HTTP 301, 302, 303, 307 หรือ 308 ให้ ใช้ขั้นตอนการเปลี่ยนเส้นทาง

หากผู้ใช้ยกเลิกการร้องขอ ใช้ขั้นตอนการยกเลิก

หากมีข้อผิดพลาดของเครือข่าย ในกรณีที่มีข้อผิดพลาด DNS, TLS ความล้มเหลวของการเจรจาต่อรองหรือชนิดอื่น ๆ ของข้อผิดพลาดของเครือข่ายการใช้ขั้นตอนข้อผิดพลาดของเครือข่าย อย่าร้องขอการโต้ตอบกับผู้ใช้ปลายทางใด ๆ

หมายเหตุ: ไม่รวมการตอบกลับ HTTP ที่ระบุข้อผิดพลาดบางประเภทเช่นรหัสสถานะ HTTP 410

มิฉะนั้นให้ ทำการตรวจสอบการแชร์ทรัพยากร หากส่งคืนล้มเหลวให้ใช้ขั้นตอนข้อผิดพลาดของเครือข่าย มิฉะนั้นหากส่งคืนค่าผ่านให้ยุติอัลกอริทึมนี้และตั้งค่าสถานะคำขอข้ามต้นทางเป็นสำเร็จ ห้ามยุติคำขอจริง

ดังที่คุณอ่านข้อผิดพลาดของเครือข่ายไม่รวมการตอบสนอง HTTP ที่มีข้อผิดพลาดนั่นคือเหตุผลที่คุณจะได้รับ 0 เป็นรหัสสถานะเสมอและ "" เป็นข้อผิดพลาด

แหล่ง

หมายเหตุ : ตัวอย่างต่อไปนี้สร้างขึ้นโดยใช้ Google Chrome เวอร์ชัน 43.0.2357.130 และเทียบกับสภาพแวดล้อมที่ฉันสร้างขึ้นเพื่อเลียนแบบ OP รหัสสำหรับการตั้งค่าจะอยู่ที่ด้านล่างของคำตอบ

ฉันแม้ว่าวิธีการในการแก้ไขปัญหานี้จะเป็นการร้องขอรองผ่าน HTTP แทน HTTPS เป็นคำตอบนี้แต่ฉันจำได้ว่าเป็นไปไม่ได้เนื่องจากเบราว์เซอร์เวอร์ชันใหม่บล็อกเนื้อหาผสม

นั่นหมายความว่าเว็บเบราว์เซอร์จะไม่อนุญาตการร้องขอผ่าน HTTP หากคุณใช้ HTTPS หรือในทางกลับกัน

เป็นเช่นนี้มาตั้งแต่ไม่กี่ปีที่แล้ว แต่เว็บเบราว์เซอร์รุ่นเก่าเช่น Mozilla Firefox ซึ่งอยู่ด้านล่างเวอร์ชัน 23 อนุญาต

หลักฐานเกี่ยวกับเรื่องนี้:

การร้องขอ HTTP จาก HTTPS ใช้คอนโซล Web Broser

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>

การใช้การเชื่อมต่อซ็อกเก็ตก็โพสต์เป็นคำตอบฉันค่อนข้างมั่นใจว่าผลลัพธ์จะเหมือนกัน / คล้ายกัน แต่ฉันได้ลองใช้แล้ว

การพยายามเปิดการเชื่อมต่อซ็อกเก็ตจาก Web Broswer โดยใช้ HTTPS ไปยังปลายทางของซ็อกเก็ตที่ไม่ปลอดภัยจะสิ้นสุดลงด้วยข้อผิดพลาดเกี่ยวกับเนื้อหาผสมกัน

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

1) เนื้อหาผสม: หน้าเว็บที่ ' https: // localhost: 8000 / ' ถูกโหลดผ่าน HTTPS แต่พยายามเชื่อมต่อกับปลายทาง WebSocket ที่ไม่ปลอดภัย 'ws: // localhost: 8001 /' คำขอนี้ถูกบล็อก จุดสิ้นสุดนี้ต้องพร้อมใช้งานบน WSS

2) Uncaught DOMException: ล้มเหลวในการสร้าง 'WebSocket': การเชื่อมต่อ WebSocket ที่ไม่ปลอดภัยอาจไม่ได้เริ่มต้นจากหน้าที่โหลดผ่าน HTTPS

จากนั้นฉันได้ลองเชื่อมต่อกับปลายทาง wss ด้วยดูว่าฉันสามารถอ่านข้อมูลบางอย่างเกี่ยวกับข้อผิดพลาดในการเชื่อมต่อเครือข่ายได้หรือไม่:

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

การเรียกใช้ข้อมูลโค้ดด้านบนโดยปิดเซิร์ฟเวอร์ผลลัพธ์ใน:

การเชื่อมต่อ WebSocket ไปยัง 'wss: // localhost: 8001 /' ล้มเหลว: เกิดข้อผิดพลาดในการสร้างการเชื่อมต่อ: net :: ERR_CONNECTION_REFUSED

การดำเนินการตัวอย่างด้านบนโดยเปิดเซิร์ฟเวอร์

การเชื่อมต่อ WebSocket กับ 'wss: // localhost: 8001 /' ล้มเหลว: การจับมือเปิด WebSocket ถูกยกเลิก

แต่อีกครั้งข้อผิดพลาดที่เอาต์พุต "ฟังก์ชัน onerror" ไปยังคอนโซลไม่มีเคล็ดลับใด ๆ ที่จะแยกความแตกต่างของข้อผิดพลาดอื่น ๆ

การใช้พร็อกซีตามคำตอบนี้สามารถใช้ได้ แต่เฉพาะในกรณีที่เซิร์ฟเวอร์ "เป้าหมาย" มีการเข้าถึงแบบสาธารณะ

นี่ไม่ใช่กรณีนี้ดังนั้นการพยายามใช้พร็อกซีในสถานการณ์นี้จะทำให้เราประสบปัญหาเดียวกัน

โค้ดสำหรับสร้าง 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ในเทอร์มินัล (ตัวอย่างอูบุนตู)

ณ ตอนนี้: ไม่มีวิธีใดที่จะแยกความแตกต่างระหว่างเหตุการณ์นี้ระหว่าง browers เนื่องจากเบราว์เซอร์ไม่มีเหตุการณ์ให้นักพัฒนาสามารถเข้าถึงได้ (กรกฎาคม 2558)

คำตอบนี้เป็นเพียงการพยายามให้แนวคิดสำหรับการแก้ปัญหาที่มีศักยภาพไม่สมบูรณ์และไม่สมบูรณ์

ข้อจำกัดความรับผิดชอบ:คำตอบนี้ไม่สมบูรณ์เนื่องจากไม่สามารถแก้ปัญหาของ OP ได้อย่างสมบูรณ์ (เนื่องจากนโยบายข้ามแหล่งที่มา) อย่างไรก็ตามความคิดนั้นมีข้อดีบางประการที่ขยายเพิ่มเติมโดย: @artur grzesiak ที่นี่โดยใช้พร็อกซีและ ajax

หลังจากค้นคว้าด้วยตัวเองมาพอสมควรดูเหมือนจะไม่มีข้อผิดพลาดใด ๆ ในการตรวจสอบความแตกต่างระหว่างการเชื่อมต่อที่ปฏิเสธและการตอบสนองที่ไม่ปลอดภัยอย่างน้อยที่สุดเท่าที่จาวาสคริปต์จะให้การตอบสนองสำหรับความแตกต่างระหว่างทั้งสอง

ฉันเห็นพ้องกันทั่วไปในการวิจัยของฉันที่ว่าใบรับรอง SSL ได้รับการจัดการโดยเบราว์เซอร์ดังนั้นจนกว่าผู้ใช้จะยอมรับใบรับรองที่ลงชื่อด้วยตนเองเบราว์เซอร์จะล็อกคำขอทั้งหมดรวมถึงคำขอสำหรับรหัสสถานะด้วย เบราว์เซอร์สามารถ (ถ้าเข้ารหัส) ส่งรหัสสถานะของตัวเองกลับไปสำหรับการตอบสนองที่ไม่ปลอดภัย แต่นั่นก็ไม่ได้ช่วยอะไรเลยแม้แต่น้อยคุณก็มีปัญหาเกี่ยวกับความเข้ากันได้ของเบราว์เซอร์ (chrome / firefox / IE ที่มีมาตรฐานต่างกัน .. อีกครั้ง)

เนื่องจากคำถามเดิมของคุณคือการตรวจสอบสถานะของเซิร์ฟเวอร์ของคุณระหว่างการใช้งานกับใบรับรองที่ไม่ได้รับการยอมรับคุณไม่สามารถสร้างคำขอ HTTP มาตรฐานได้หรือไม่?

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

ได้รับสิ่งนี้จำเป็นต้องมีการร้องขอเพิ่มเติมเพื่อตรวจสอบการเชื่อมต่อเซิร์ฟเวอร์ แต่ควรทำให้งานเสร็จสิ้นตามขั้นตอนการกำจัด แม้ว่าจะยังรู้สึกแฮ็คอยู่และฉันก็ไม่ใช่แฟนตัวยงของคำขอเพิ่มเป็นสองเท่า

คำตอบของ @ Schultzie นั้นค่อนข้างใกล้เคียง แต่httpโดยทั่วไปแล้วจะไม่สามารถใช้งานได้จากhttpsในสภาพแวดล้อมของเบราว์เซอร์

สิ่งที่คุณทำได้คือการใช้เซิร์ฟเวอร์กลาง (พร็อกซี) เพื่อส่งคำขอในนามของคุณ ให้ผู้รับมอบฉันทะควรอนุญาตให้อย่างใดอย่างหนึ่งที่จะไปข้างหน้าhttpการร้องขอจากhttpsแหล่งกำเนิดหรือเนื้อหาที่โหลดจากต้นกำเนิดลงนามด้วยตนเอง

มีเซิร์ฟเวอร์ของคุณเองที่มีใบรับรองที่เหมาะสมอาจเป็น overkill ในกรณีของคุณ - เท่าที่คุณสามารถใช้การตั้งค่านี้แทนเครื่องที่มีใบรับรองลงนามด้วยตนเอง - แต่มีความอุดมสมบูรณ์ของบริการเปิดพร็อกซี่ที่ไม่ระบุชื่อออกมี

ดังนั้นสองวิธีที่อยู่ในใจของฉันคือ:

1. คำขอ ajax - ในกรณีนี้พร็อกซีต้องใช้การตั้งค่า CORS ที่เหมาะสม
2. การใช้ iframe - คุณโหลดสคริปต์ของคุณ (อาจรวมอยู่ใน html) ภายใน iframe ผ่านพร็อกซี เมื่อสคริปต์โหลดแล้วจะส่งข้อความไปยัง.parentWindowไฟล์. หากหน้าต่างของคุณได้รับข้อความคุณสามารถมั่นใจได้ว่าเซิร์ฟเวอร์กำลังทำงานอยู่ (หรือแม่นยำกว่านั้นคือทำงานก่อนหน้านี้เพียงเสี้ยววินาที)

หากคุณสนใจเฉพาะสภาพแวดล้อมในพื้นที่ของคุณคุณสามารถลองเรียกใช้ chrome ด้วย--disable-web-securityแฟล็ก

ข้อเสนอแนะอื่น ๆ : คุณพยายามโหลดภาพโดยใช้โปรแกรมเพื่อดูว่ามีข้อมูลเพิ่มเติมหรือไม่

ตรวจสอบjQuery.ajaxError () นำมาจาก: jQuery AJAX Error Handling (HTTP Status Codes) ตรวจ จับข้อผิดพลาด Ajax ทั่วโลกซึ่งคุณสามารถจัดการได้หลายวิธีผ่าน HTTP หรือ HTTPS:

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

น่าเสียดายที่ XHR API ของเบราว์เซอร์ในปัจจุบันไม่มีตัวบ่งชี้ที่ชัดเจนเมื่อเบราว์เซอร์ปฏิเสธที่จะเชื่อมต่อเนื่องจาก "การตอบสนองที่ไม่ปลอดภัย" และเมื่อไม่เชื่อถือใบรับรอง HTTP / SSL ของเว็บไซต์

แต่มีวิธีแก้ปัญหานี้

วิธีแก้ปัญหาหนึ่งที่ฉันคิดขึ้นเพื่อตรวจสอบว่าเมื่อใดที่เบราว์เซอร์ไม่เชื่อถือใบรับรอง HTTP / SSL คือการตรวจสอบก่อนว่ามีข้อผิดพลาด XHR เกิดขึ้นหรือไม่ (โดยใช้การerror()โทรกลับjQuery เป็นต้น) จากนั้นตรวจสอบว่าการเรียก XHR ไปที่ 'https หรือไม่ : // 'URL แล้วตรวจสอบว่า XHR readyStateเป็น 0 หรือไม่ซึ่งหมายความว่ายังไม่ได้เปิดการเชื่อมต่อ XHR (ซึ่งเป็นสิ่งที่เกิดขึ้นเมื่อเบราว์เซอร์ไม่ชอบใบรับรอง)

นี่คือรหัสที่ฉันทำสิ่งนี้: https://github.com/maratbn/RainbowPayPress/blob/e9e9472a36ced747a0f9e5ca9fa7d96959aeaf8a/rainbowpaypress/js/le_requirejs/public/model_info__transaction_details.js#L88

ฉันไม่คิดว่าตอนนี้จะมีวิธีตรวจจับข้อความแสดงข้อผิดพลาดเหล่านี้ แต่การแฮ็กที่คุณทำได้คือใช้เซิร์ฟเวอร์เช่น nginx หน้าแอปพลิเคชันเซิร์ฟเวอร์ของคุณดังนั้นหากเซิร์ฟเวอร์แอปพลิเคชันหยุดทำงานคุณจะได้รับผลเสีย ข้อผิดพลาดเกตเวย์จาก nginx พร้อม502รหัสสถานะซึ่งคุณสามารถตรวจพบได้ใน JS statusCode = 0มิฉะนั้นถ้าใบรับรองไม่ถูกต้องคุณจะยังคงได้รับข้อผิดพลาดทั่วไปเช่นเดียวกันกับ