web-dev-qa-db-fra.com

"Contenu mixte bloqué" lors de l'exécution d'un protocole HTTP AJAX opération dans une page HTTPS

J'ai un formulaire que je soumets (via GET comme il est requis de cette façon) à un crm (ViciDial). Je peux réussir à soumettre le formulaire, mais si je le fais, le fichier de traitement de crm fera simplement écho à un texte de succès et le tour est joué.

Au lieu de ce texte, je souhaite afficher une page de remerciement sur mon site Web. J'ai donc décidé d'utiliser AJAX pour soumettre le formulaire et le rediriger vers la page dont j'ai besoin, mais ce message d'erreur s'affiche sur mon navigateur. navigateur:

Contenu mixte: La page " https://page.com " a été chargée via HTTPS, mais a demandé un noeud final XMLHttpRequest non sécurisé ' http://XX.XXX.XX.XXX/vicidial/non_agent_api.php?queries=query=data ' . Cette demande a été bloquée. le contenu doit être servi sur HTTPS.

Voici mon script 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>

Le simple fait de configurer https dans l'URL ne fonctionnera pas. Existe-t-il un moyen de soumettre les données via GET et de rediriger l'utilisateur vers ma page de remerciement?

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

Le problème ici était un contenu mixte, cela signifie que j'ai chargé une page via HTTPS et que je tentais de frapper via AJAX une API qui était en HTTP. Mais le navigateur ne nous permettra pas de le faire. 

Donc, si vous ne pouvez pas définir l’API sur HTTPS (c’était mon cas), nous pouvons toujours aborder cette question d’une manière différente.

Le problème principal n’était pas le problème du contenu mixte, c’était que je voulais soumettre des données à une API et rediriger les utilisateurs vers une page de remerciement sophistiquée. Au lieu d'utiliser AJAX, j'ai créé un fichier php qui reçoit les données, l'envoie en utilisant curl à l'API (comme cela se fait côté serveur, il n'y a pas de problème de contenu mixte) et redirige mon utilisateur heureux vers une page de remerciement élégante.

javascriptphpjqueryhtmlajax
51
StormRage

Si vous chargez une page dans votre navigateur à l'aide de HTTPS, le navigateur refusera de charger des ressources via HTTP. Comme vous l'avez essayé, changer l'URL de l'API pour que HTTPS au lieu de HTTP résolve généralement ce problème. Cependant, votre API ne doit pas autoriser les connexions HTTPS. Pour cette raison, vous devez forcer HTTP sur la page principale ou demander à ce qu'ils autorisent les connexions HTTPS. 

Remarque sur ceci: la demande fonctionnera toujours si vous accédez à l'URL de l'API au lieu d'essayer de le charger avec AJAX. En effet, le navigateur ne charge pas une ressource depuis une page sécurisée. Il charge plutôt une page non sécurisée et l'accepte. Pour qu’il soit disponible via AJAX, cependant, les protocoles doivent correspondre.

56
Mikel Bitson

J'ai résolu ce problème en ajoutant le code suivant à la page HTML, car nous utilisons une API tierce non contrôlée par nous.

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

J'espère que cela aidera, et pour un disque aussi.

47
Sky

Si vous visitez simplement une page Web en laquelle vous avez confiance et que vous souhaitez avancer rapidement, il suffit de:

1- Cliquez sur l'icône du bouclier à l'extrême droite de la barre d'adresse.

 Allow mixed content in Google Chrome

2- Dans la fenêtre contextuelle, cliquez sur "Charger quand même" ou "Charger le script non sécurisé" (selon votre version de Chrome).

Si vous souhaitez définir votre navigateur Chrome sur TOUJOURS (dans toutes les pages Web), autorisez un contenu mixte:

1- Dans un navigateur Chrome ouvert, appuyez sur les touches Ctrl + Maj + Q de votre clavier pour forcer la fermeture de Chrome. Chrome doit être complètement fermé avant les prochaines étapes.

2- Cliquez avec le bouton droit sur l'icône du bureau Google Chrome (ou sur le lien du menu Démarrer) . Sélectionnez Propriétés.

3- A la fin des informations existantes dans le champ Cible, ajoutez: "--allow-running-insecure-content" (Il y a un espace avant le premier tiret.)

4- Cliquez sur OK.

5- Ouvrez Chrome et essayez de lancer le contenu précédemment bloqué. Cela devrait fonctionner maintenant.

10
Juanma Menendez

La raison de cette erreur est très simple. Votre AJAX tente d'appeler via HTTP alors que votre serveur s'exécute sur HTTPS. Votre serveur refuse donc d'appeler votre AJAX. Cela peut être corrigé en ajoutant la ligne suivante dans la balise head de votre fichier HTML principal:

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

Si votre code API s'exécute sur un serveur node.js , vous devez alors concentrer votre attention là-bas, pas sur Apache ou NGINX. Mikel a raison, changer l'URL de l'API en HTTPS est la solution, mais si votre API appelle un serveur node.js, il vaut mieux qu'elle soit configurée pour HTTPS! Et bien sûr, le serveur node.js peut être sur n’importe quel port inutilisé, il ne doit pas forcément être le port 443.

0
mcmacerson

Au lieu d'utiliser la méthode Ajax Post, vous pouvez utiliser un formulaire dynamique avec l'élément . Cela fonctionnera même si la page est chargée en SSL et la source soumise n'est pas SSL.

Vous devez définir la valeur value de l’élément de la forme.

En fait, le nouveau formulaire dynamique s'ouvrira en mode non SSL dans un onglet distinct du navigateur lorsque l'attribut cible aura pour valeur '_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()
0
Proneet Ray