Comment afficher ou simuler un aperçu mobile du site Web d'un utilisateur dans un site Web

Comment intégrer un aperçu mobile du site Web Target dans votre site? En raison des limites des politiques homologues, l'utilisation directement des IFRAMES peut rencontrer des problèmes de domaine croisé. Cet article introduira l'utilisation du proxy inversé pour ajouter des en-têtes COR pour résoudre les problèmes de domaine transversal, et fournira des exemples d'utilisation des iframes et de proxy inversé pour implémenter les aperçus mobiles, et mentionne également brièvement comment utiliser Curl pour obtenir le code source de page.

Utilisez le proxy inversé pour résoudre les problèmes de domaine croisé

Le chargement du site Web cible directement dans l'IFRAME peut rencontrer des erreurs "refusées de connecter" car la politique homologue du navigateur empêche les demandes de domaine croisé. Pour résoudre ce problème, vous pouvez utiliser un proxy inversé, qui agit comme un intermédiaire, obtient du contenu du serveur cible et le renvoie au client, tout en ajoutant l'en-tête CORS (partage de ressources inter-domaines).

CORS Anywhere est un proxy inversé NodeJS couramment utilisé qui ajoute automatiquement les en-têtes CORS.

Déploier des Cors n'importe où

1. Installez NodeJS et NPM: assurez-vous que NodeJS et NPM (Node Package Manager) sont installés sur votre serveur.

2. Installez les COR n'importe où: utilisez le NPM pour installer COR n'importe où:

    NPM Install -g CORS-Anhewhere

3. Exécutez CORS n'importe où: Démarrez le service CORS n'importe où:

    CORS-ANHOINE - ORIGIN "*" - ORIGINATION

   • --origin "*" autorise les demandes de n'importe quel domaine (l'environnement de production n'est pas recommandé, le nom de domaine autorisé doit être spécifié).
   • - Origine de requireheader exige que la demande doit contenir l'en-tête d'origine.

En utilisant le proxy inversé dans iframe

Après avoir déployé des COR n'importe où, vous pouvez utiliser l'URL proxy dans l'IFRAME.

 <iframe id="Preview-Frame1" src="http:%20//%20your-cors-anywhere-server%20/%20https:%20//www.kd-brows.com/" style="hauteur: 547px; largeur: 320px;"> / iframe></iframe>

Remplacez http: // your-cors-anywhere-server par l'adresse de votre serveur CORS n'importe où. https://www.kd-brows.com/ Remplacez par l'adresse du site Web que vous souhaitez prévisualiser.

Notes:

• Sécurité: --origin "*" présente des risques de sécurité dans les environnements de production et doit être configuré pour permettre l'accès uniquement à votre nom de domaine.
• Performances: l'utilisation d'un proxy inversé augmente la latence des demandes car des serveurs supplémentaires sont nécessaires.
• CORS Anywhere Limitations: CORS n'importe où lui-même peut avoir des limites de taux ou d'autres restrictions et doit être ajustée en fonction des conditions réelles.
• Restrictions sur les sites Web cibles: certains sites peuvent toujours bloquer l'accès via le proxy, même si des en-têtes COR sont ajoutés.

Utilisez Curl pour obtenir le code source de la page (alternative)

Une autre façon consiste à utiliser Curl pour obtenir le code source HTML du site Web cible du côté serveur, puis analyser et l'afficher sur votre site Web. Cette méthode peut contourner la stratégie homologue du navigateur, mais nécessite une prise en charge côté serveur.

Exemple PHP:

  Php
fonction get_page_content ($ url) {
  $ ch = curl_init ();
  curl_setopt ($ ch, curlopt_url, $ url);
  curl_setopt ($ ch, curlopt_returntransfer, 1);
  curl_setopt ($ ch, curlopt_useragent, 'Mozilla / 5.0 (Windows NT 10.0; win64; x64) Applewebkit / 537.36 (khtml, comme gecko) Chrome / 58.0.3029.110 Safari / 537.36'); // Définir l'utilisateur-agent
  $ output = curl_exec ($ ch);
  curl_close ($ ch);
  return $ output;
}

$ url = 'https://www.kd-brows.com/';
$ content = get_page_content ($ url);

// Processus $ Contenu ici, par exemple, extraire le contenu clé et afficher l'écho "<pre class="brush:php;toolbar:false">". htmlSpecialChars ($ contenu). "

Notes:

• User-Agent: Définir Curlopt_Userager peut simuler le comportement du navigateur et éviter l'accès refusé par le site Web cible reconnu comme un robot.
• Analyse des pages: Après avoir obtenu le code source HTML, il doit être analysé et extrait le contenu qui doit être affiché. Vous pouvez utiliser DomDocument de PHP ou d'autres bibliothèques d'analyse HTML.
• Chargement des ressources: Curl n'obtiendra que le code source HTML et ne chargera pas automatiquement des ressources telles que CSS, JavaScript, etc. Ces ressources doivent être traitées manuellement, comme la modification de l'URL pour pointer vers votre serveur.
• Risque juridique: lors de la rampe et de l'utilisation du contenu d'autres sites Web, vous devez vous conformer aux lois et réglementations pertinentes et aux conditions d'utilisation du site Web.

Résumer

Cet article décrit deux façons d'afficher ou de simuler un aperçu mobile du site Web d'un utilisateur dans un site Web: à l'aide d'un proxy inversé et à l'utilisation de Curl pour obtenir le code source de page. La méthode d'utilisation du proxy inverse est simple et facile à utiliser, mais nécessite le déploiement et la maintenance du serveur proxy inversé. La méthode d'utilisation de Curl est plus flexible, mais nécessite l'analyse de la page et le chargement des ressources, et les risques juridiques doivent être prêts attention. La méthode à choisir dépend de vos besoins spécifiques et de vos capacités techniques.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!