HTTPS पेज में HTTP AJAX ऑपरेशन चलाते समय "मिश्रित सामग्री अवरुद्ध"


110

मेरे पास एक फॉर्म है जो मैं जमा कर रहा हूं (जीईटी के माध्यम से जैसा कि इस तरह की आवश्यकता है) एक crm (ViciDial) के लिए। मैं सफलतापूर्वक फॉर्म जमा कर सकता हूं लेकिन अगर मैं ऐसा करता हूं कि crm पर प्रोसेसिंग फाइल सिर्फ एक सफलता पाठ को प्रतिध्वनित करेगी और यही है।

उस पाठ के बजाय, मैं अपनी वेबसाइट पर धन्यवाद पृष्ठ प्रदर्शित करना चाहता हूं, इसलिए मैंने AJAX का उपयोग फ़ॉर्म जमा करने और इसे उस पृष्ठ पर पुनर्निर्देशित करने का निर्णय लिया, जिसकी मुझे आवश्यकता है, लेकिन मुझे अपने ब्राउज़र पर यह त्रुटि मिल रही है:

मिश्रित सामग्री: ' https://page.com ' पर पेज HTTPS से अधिक भरा हुआ था, लेकिन एक असुरक्षित XMLHttpRequest समापन बिंदु ' http://XX.XXX.XX.XXX/vicidial/non_agent_api.php?queries=quata=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 के माध्यम से एक पृष्ठ लोड किया था और AJAX एपीआई जो HTTP में था के माध्यम से हिट करने की कोशिश कर रहा था। लेकिन ब्राउज़र अभ्यस्त हमें बस ऐसा करने की अनुमति देता है।

तो अगर आप HTTPS होने के लिए एपीआई सेट नहीं कर सकते हैं (यह मेरा मामला था) तो हम अभी भी इसे एक अलग तरीके से देख सकते हैं।

मुख्य समस्या मिश्रित सामग्री का मुद्दा नहीं था, यह था कि मैं एक एपीआई को डेटा सबमिट करना चाहता था और उपयोगकर्ताओं को एक फैंसी धन्यवाद पृष्ठ पर पुनर्निर्देशित करता था। AJAX का उपयोग करने के बजाय, मैंने एक php फ़ाइल बनाई जो डेटा प्राप्त करती है वह इसे एपीआई के लिए कर्ल का उपयोग करके भेजता है (क्योंकि यह सर्वर साइड किया जा रहा है कोई मिश्रित सामग्री समस्या नहीं है) और मेरे खुश उपयोगकर्ता को एक फैंसी धन्यवाद पृष्ठ पर पुनर्निर्देशित करता है।


क्या आपके पास अपने एपीआई का सुरक्षित संस्करण है? यदि आप मूल के रूप में एक सुरक्षित साइट का उपयोग कर रहे हैं तो आपको HTTPS पर अनुरोध करना होगा।
कैमरून टिंकर

1
नहीं, मैं नहीं, क्या कोई और तरीका है जिसमें मैं ऐसा कर सकता था? मेरा मतलब है कि यदि कोई अजाक्स
स्टॉर्मरेज

आप एचटीटीपी को एचटीटीपीएस यूआरएल बनाकर एचटीटीपी को प्रॉक्सी से प्रॉक्सी कर सकते XX.XXX.XX.XXहैं। हालांकि, यदि HTTP का उद्देश्य उपयोगकर्ता की जानकारी की सुरक्षा करना है, तो आपको सावधान रहना होगा कि सर्वरों के बीच का मार्ग सार्वजनिक इंटरनेट पर नहीं जाता है।
रोकें

जवाबों:


90

यदि आप HTTPS का उपयोग करके अपने ब्राउज़र में एक पेज लोड करते हैं, तो ब्राउज़र HTTP पर किसी भी संसाधन को लोड करने से मना कर देगा। जैसा कि आपने प्रयास किया है, HTTP के बजाय HTTPS के लिए API URL को बदलना आम तौर पर इस समस्या को हल करता है । हालाँकि, आपके API को HTTPS कनेक्शन की अनुमति नहीं होनी चाहिए। इस वजह से, आपको या तो HTTP को मुख्य पृष्ठ पर लागू करना होगा या अनुरोध करना होगा कि वे HTTPS कनेक्शन की अनुमति देते हैं।

इस पर ध्यान दें: अनुरोध तब भी काम करेगा जब आप इसे AJAX के साथ लोड करने के प्रयास के बजाय API URL पर जाएंगे। ऐसा इसलिए है क्योंकि ब्राउज़र किसी सुरक्षित पृष्ठ के भीतर से संसाधन लोड नहीं कर रहा है, इसके बजाय यह एक असुरक्षित पृष्ठ लोड कर रहा है और इसे स्वीकार कर रहा है। AJAX के माध्यम से उपलब्ध होने के लिए, हालांकि, प्रोटोकॉल मैच होना चाहिए।


1
ठीक है, एपीआई मेरे सर्वर में है, क्या कोई गाइड है जिसे मैं इसका https बनाने के लिए अनुसरण कर सकता हूं?
स्टॉर्मरेज

1
@StormRage बिल्कुल! आप किस प्रकार का सर्वर चला रहे हैं? अमरीका की एक मूल जनजाति? यह साझा होस्टिंग या एक निजी सर्वर है?
मिकेल बिटसन

@StormRage कृपया मुझे बताएं कि क्या आपको किसी और सहायता की आवश्यकता है। अन्यथा, मतदान आपको SO पर यहां मिलने वाली सार्वजनिक सहायता को प्रोत्साहित करेगा।
मिकेल बिट्सन

1
इस पर देर होने के लिए क्षमा करें, मैं AJAX का उपयोग किए बिना इसे हल करने में कामयाब रहा, मेरे समाधान में कुछ वर्डप्रेस फ़ंक्शन / php कर्ल शामिल हैं, मैं जितनी जल्दी हो सके अपने समाधान को पोस्ट कर सकता हूं, मुझे बस अपना प्रश्न संपादित करना चाहिए और उसमें अपना समाधान लिखना चाहिए, या क्या मुझे उस बटन का उपयोग करना चाहिए जो कहता है "अपने स्वयं के प्रश्न का उत्तर दें"?
स्टॉर्मरेज

1
यहाँ उत्तर के प्रासंगिक भाग पर प्रकाश डाला। इसका एकमात्र व्यावहारिक उपाय HTTPS
Liam

131

मैंने HTML पृष्ठ में निम्नलिखित कोड जोड़कर इसे हल किया, क्योंकि हम तीसरे पक्ष के एपीआई का उपयोग कर रहे हैं जो हमारे द्वारा नियंत्रित नहीं है।

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

आशा है कि यह मदद करेगा, और एक रिकॉर्ड के लिए भी।


8
यह उन्नयन सभी httpअनुरोधों का उपयोग करता है https, इसलिए आपको प्रत्येक कॉल के लिए प्रोटोकॉल बदलने की आवश्यकता नहीं है।
ईथ

3
यह मेरे लिए काम करता है, लेकिन दुर्भाग्य से यह इंटरनेट एक्सप्लोरर के साथ काम नहीं करता है: developer.mozilla.org/en-US/docs/Web/HTTP/Headers/…
सियारन गलाघेर

2
मैंने यह कोशिश की है, लेकिन अब मुझे फ़ायरफ़ॉक्स पर शुद्ध त्रुटि मिल रही है और क्रोम पर :: ERR_SSL_PROTOCOL_ERROR। मुझे पता है कि सभी कॉल काम करती हैं क्योंकि मेरा वेबपेज पहले http था लेकिन अब मैंने इसे बदल कर https कर दिया है ये कॉल काम नहीं कर रही हैं। क्या कोई अन्य चीज़ है जिसे मैं अपनी मुख्य html फ़ाइल में जोड़ सकता हूँ? क्योंकि अगर मैं @Juanma Menendez सभी कॉल काम का पालन करता हूं, लेकिन मुझे उम्मीद है कि हर उपयोगकर्ता ऐसा करेगा।
Otorrinolaringologista -man

मैं इस मुद्दे से घंटों तक जूझता रहा जब तक मुझे आपका जवाब नहीं मिला, बहुत बहुत धन्यवाद!
मुहब्बत

हम इस बात की पुष्टि करते हैं कि यह समाधान हमारे मामले पर काम करता है, शायद भविष्य में भी आपकी मदद करेगा: हमने मांग सुविधा पर कुछ खंडित HTTP लाइव स्ट्रीमिंग / वीडियो स्थापित करने की कोशिश की, कुछ इस तरह www.example.com/blabla/master.m3u8। यह सब http पर अच्छा काम करता था। लेकिन जब हम इसे https में माइग्रेट कर रहे हैं तो यह काम नहीं करेगा। हमें पता चला कि प्रारंभिक अनुरोध master.m3u8करने में सक्षम था https, लेकिन वीडियो का निम्नलिखित खंडित हिस्सा हमेशा उपयोग कर रहा था http(क्योंकि हम तीसरे मॉड्यूल मॉड्यूल का उपयोग कर रहे हैं)। कोई फर्क नहीं पड़ता कि हम इसे सिर्फ इस्तेमाल नहीं करेंगे https। इस नीति का इस्तेमाल किया और आकर्षण की तरह तुरंत काम किया!
rahmatns

34

यदि आप किसी वेबपेज पर जा रहे हैं जिस पर आपको भरोसा है और आप तेजी से आगे बढ़ना चाहते हैं, तो:

1- एड्रेस बार के सबसे दाईं ओर शील्ड आइकन पर क्लिक करें।

Google Chrome में मिश्रित सामग्री की अनुमति दें

2- पॉप-अप विंडो में, "वैसे भी लोड करें" या "लोड असुरक्षित स्क्रिप्ट" (आपके क्रोम संस्करण पर निर्भर करता है) पर क्लिक करें।


यदि आप अपना Chrome ब्राउज़र ALWAYS (सभी वेबपृष्ठों में) सेट करना चाहते हैं, तो मिश्रित सामग्री की अनुमति दें:

1- ओपन क्रोम ब्राउजर में, क्रोम को बंद करने के लिए अपने कीबोर्ड पर Ctrl + Shift + Q दबाएं। अगले चरणों से पहले क्रोम पूरी तरह से बंद होना चाहिए।

2- Google Chrome डेस्कटॉप आइकन (या प्रारंभ मेनू लिंक) पर राइट-क्लिक करें। गुण का चयन करें।

3- लक्ष्य फ़ील्ड में मौजूदा जानकारी के अंत में, जोड़ें: "--allow-रनिंग-असुरक्षित-सामग्री" (पहले डैश से पहले एक स्थान है।)

4- ओके पर क्लिक करें।

5- क्रोम खोलें और उस सामग्री को लॉन्च करने का प्रयास करें जिसे पहले अवरुद्ध किया गया था। यह अब काम करना चाहिए।


4
यह उन उपयोगकर्ताओं के लिए वेबसाइट डिजाइन करने वाले लोगों के लिए कुछ भी नहीं करता है जो अपने ब्राउज़र पर साइट के काम को बनाने के लिए अपनी सेटिंग्स को बदलना नहीं चाहते हैं, उदाहरण के लिए, ओपी।
छोटे बच्चे 18

12

इस त्रुटि का कारण बहुत सरल है। आपका AJAX HTTP पर कॉल करने का प्रयास कर रहा है, जबकि आपका सर्वर HTTPS से अधिक चल रहा है, इसलिए आपका सर्वर आपके AJAX को कॉल करने से इनकार कर रहा है। यह आपकी मुख्य HTML फ़ाइल के मुख्य टैग के अंदर निम्नलिखित पंक्ति जोड़कर तय किया जा सकता है:

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

यह अनुमति देता है, लेकिन अनुरोध
BG BRUNO

मेरे मामले में। सर्वर केवल HTTP अनुरोध। मैं यह कोशिश करता हूं <meta> काम नहीं कर सकता। ब्राउज़र URL पर अनुरोध त्रुटि कहता है।

1

यदि आपका एपीआई कोड एक नोड.जेएस सर्वर पर चल रहा है, तो आपको अपना ध्यान वहां केंद्रित करने की आवश्यकता है, अपाचे या एनजीआईएनएक्स में नहीं। मिकेल सही है, एपीआई यूआरएल को एचटीटीपीएस में बदलना इसका उत्तर है लेकिन अगर आपका एपीआई एक नोड.जेएस सर्वर को कॉल कर रहा है, तो यह एचटीटीपीएस के लिए बेहतर है! और हां, नोड.जेएस सर्वर किसी भी अप्रयुक्त पोर्ट पर हो सकता है, इसे 443 पोर्ट नहीं होना चाहिए।


एपीआई थर्ड पार्टी थी, इसलिए मेरे पास इसे https पर सेट करने का कोई तरीका नहीं था, और जैसा कि आप देख सकते हैं कि url मैं हिट करने की कोशिश कर रहा था, एपीआई को PHP में कोडित किया गया था
StormRage

@StormRage आपके प्रश्न और मिकेल के उत्तर से मेरी समस्या का समाधान हो गया, इसलिए मैंने सोचा कि मैं इसका ध्यान यहाँ रखूँगा, हालांकि मेरा उत्तर वास्तव में आपकी स्थिति पर लागू नहीं होता है।
mcmacerson

ठीक है, आप और मिकेल सही हैं, सबसे उचित समाधान एपीआई में एसएसएल का उपयोग करना होगा, लेकिन इस संदर्भ में मैं ऐसा करने में सक्षम नहीं था, क्योंकि यह एक 3 जी एपीआई था, लेकिन वर्डप्रेस का उपयोग करके पीपीएल के लिए एक समाधान या कोई भी विरासत साइट अपने बैकएंड पर डेटा भेज सकती है और सर्वर के भीतर एपीआई के लिए अनुरोध भेज सकती है।
स्टॉर्मरेज

मैंने सर्वर होस्ट के रूप में
लारवेल द्वारा पीआईए

1

अजाक्स पोस्ट विधि का उपयोग करने के बजाय, आप तत्व के साथ-साथ गतिशील रूप का उपयोग कर सकते हैं। यह काम करेगा यहां तक ​​कि पेज एसएसएल में लोड किया गया है और प्रस्तुत स्रोत गैर एसएसएल है।

आपको फ़ॉर्म के तत्व का मान सेट करना होगा।

वास्तव में नया डायनेमिक फॉर्म ब्राउज़र के अलग टैब में नॉन एसएसएल मोड के रूप में खुलेगा जब लक्ष्य विशेषता ने '_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()

मैं वास्तव में एक एपीआई हिट करना चाहता हूं, लेकिन जब मैं अनुरोध प्राप्त करके आपकी विधि के साथ ऐसा करता हूं तो मैं वास्तव में एक फॉर्म सबमिट करूंगा लेकिन अब मैं एपीआई से प्रतिक्रिया पढ़ने के साथ फंस गया हूं। क्योंकि मुझे लगता है कि AJAX या xmlhttprequest ही एकमात्र विकल्प है
सिद्धार्थ चौधरी

इंटरसेटिंग सॉल्यूशन :-)
BG BRUNO

सरल और शानदार
हर्कल

0

मैं एक ही समस्या थी, लेकिन मेरे लिए समस्या एनजी बिल्ड कमांड थी। मैं "एनजी बिल्ड -प्रोड" कर रहा था, मैंने इसे "एनजी बिल्ड --प्रोड --बेस-हाइपर / एप्लीकेशननेम" के लिए सही किया है। और इससे मेरी समस्या हल हो गई।


0

मेरे मामले में, मेरा लोकलहोस्ट था httpऔर मेरा तैनात संस्करण था https, इसलिए मैंने इस स्क्रिप्ट का उपयोग http- इक्विव मेटा टैग जोड़ने के लिए किया था:

if (window.location.protocol.indexOf('https') == 0){
  var el = document.createElement('meta')
  el.setAttribute('http-equiv', 'Content-Security-Policy')
  el.setAttribute('content', 'upgrade-insecure-requests')
  document.head.append(el)
}
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.