Google AMP - Cors
Dans ce chapitre, nous essaierons de comprendre CORS dans AMP. Avant de creuser plus profondément dans les détails, laissez-nous comprendre les bases de CORS et son utilité.
Qu'est-ce que CORS?
CORS signifie Cross Origin Resource Sharing. CORS est un processus qui nécessite des données d'en-tête HTTP supplémentaires pour indiquer au navigateur si la demande faite à l'URL par la page Web exécutée à l' origine, disons xyz.com , doit être autorisée à accéder aux données à partir de l'url demandée. Nous faisons de nombreuses requêtes http à partir de la page Web et pour cela, nous devons avoir CORS en place pour obtenir les données requises.
Lorsque nous faisons une requête http à un serveur différent de l'hôte, nous l'appelons comme requête d'origine croisée, ce qui signifie que le domaine, le protocole et le port sont différents de l'origine de l'hôte. Dans ce cas, il devrait y avoir une autorisation de l'URL demandée pour accéder aux données; cela signifie la demande GET / PUT / POST / DELETE effectuée.
Ces données supplémentaires sont disponibles dans l'en-tête du navigateur pour l'appel de requête http effectué. Cette étape d'autorisation est fondamentalement requise pour des raisons de sécurité afin qu'aucune page Web ne puisse créer ou obtenir des données d'un autre domaine sans l'autorisation requise.
L'en-tête du navigateur doit contenir des détails tels que Access-Control-Allow-Origin qui peut avoir des valeurs comme indiqué ci-dessous -
Access-Control-Allow-Origin : *Avoir la valeur * dans l'en-tête de l'URL de la requête signifie qu'il indique aux navigateurs d'autoriser la demande de données de n'importe quelle origine pour accéder à la ressource.
Access-Control-Allow-Origin: https://www.example.comAvoir la valeur ci-dessus indique au navigateur que la demande faite à partir de la page Web www.example.com ne sera autorisée à obtenir les données que pour l'URL demandée.
La configuration du serveur pour CORS doit être effectuée en gardant à l'esprit comment les données partagées seront utilisées. En fonction de cela, les en-têtes requis doivent être définis côté serveur.
Maintenant que nous savons ce qu'est CORS, faisons un autre pas en avant. Dans le cas de l'ampli, nous avons des composants tels que amp-form, amp-list qui utilisent des points de terminaison http pour charger les données de manière dynamique.
Dans le cas des pages amp, même si la requête http est faite à partir de la même origine, nous devons avoir le paramètre CORS en place. Des questions se posent ici - pourquoi devrions-nous avoir CORS activé même si la demande et la réponse viendront de la même origine. Techniquement, nous n'avons pas besoin d'activer CORS dans ce cas, car nous demandons et affichons des données pour le même domaine, origine, etc.
Amp a une fonctionnalité appelée mise en cache qui est ajoutée pour obtenir les données plus rapidement vers l'utilisateur qui accède à la page. Dans le cas où l'utilisateur a déjà visité la page, les données seront mises en cache sur google cdn, le prochain utilisateur recevra les données du cache.
Les données sont stockées à la fin de l'ampli qui a maintenant un domaine différent. Lorsque l'utilisateur clique sur n'importe quel bouton pour obtenir de nouvelles données, l'URL du cache amp est comparée au domaine de la page Web pour obtenir les nouvelles données. Ici maintenant, si CORS n'est pas activé car il traite l'URL mise en cache amp et le domaine de la page Web, la demande ne sera pas valide et échouera pour l'autorisation CORS. C'est la raison pour laquelle nous devons activer CORS même pour la même origine dans le cas de pages d'ampli.
Un exemple de travail avec des formulaires avec CORS activé est montré ici -
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js">
</script>
<title>Google AMP - Form</title>
<link rel = "canonical" href = "ampform.html">
<meta name = "viewport" content = "width = device-width,
minimum-scale = 1,initial-scale = 1">
<style amp-boilerplate>
body{
-webkit-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
-amp-start 8s steps(1,end) 0s 1 normal both;animation:
-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
-amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none}
</style>
</noscript>
<script async custom-element = "amp-form"
src = "https://cdn.ampproject.org/v0/amp-form-0.1.js">
</script>
<script async custom-template = "amp-mustache"
src = "https://cdn.ampproject.org/v0/amp-mustache-0.2.js">
</script>
<style amp-custom>
form.amp-form-submit-success [submit-success],
form.amp-form-submit-error [submit-error]{
margin-top: 16px;
}
form.amp-form-submit-success [submit-success] {
color: white;
background-color:gray;
}
form.amp-form-submit-error [submit-error] {
color: red;
}
form.amp-form-submit-success.hide-inputs > input {
display: none;
}
</style>
</head>
<body>
<h3>Google AMP - Form</h3>
<form
method = "post"
class = "p2"
action-xhr = "submitform.php"
target = "_top">
<p>AMP - Form Example</p>
<div>
<input
type = "text"
name = "name"
placeholder = "Enter Name" required>
<br/>
<br/>
<input
type = "email"
name = "email"
placeholder = "Enter Email"
required>
<br/>
<br/>
</div>
<input type = "submit" value = "Submit">
<div submit-success>
<template type = "amp-mustache">
Form Submitted! Thanks {{name}}.
</template>
</div>
<div submit-error>
<template type = "amp-mustache">
Error! {{name}}, please try again.
</template>
</div>
</form>
</body>
</html>submitform.php
<?php
if(!empty($_POST)){
$domain_url = (isset($_SERVER['HTTPS']) ? "https" : "http") .
"://$_SERVER[HTTP_HOST]";
header("Content-type: application/json");
header("AMP-Access-Control-Allow-Source-Origin: " . $domain_url);
header("Access-Control-Expose-Headers:
AMP-Access-Control-Allow-Source-Origin");
$myJSON = json_encode($_POST);
echo $myJSON;
}
?>Production
Les détails des en-têtes de réponse ajoutés à submitform.php -
Pour que le formulaire fonctionne, nous devons ajouter des en-têtes tels que access-control-expose-headers avec la valeur AMP-Access-Control-Allow-Source-Origin et amp-access-control-allow-source-origin - http://localhost:8080.
Ici, nous utilisons un fichier php et apache est le serveur utilisé. Dans le fichier php, nous avons ajouté les en-têtes requis comme indiqué ci-dessous -
<?php
if(!empty($_POST)){
$domain_url = (isset($_SERVER['HTTPS']) ? "https" : "http") .
"://$_SERVER[HTTP_HOST]";
header("Content-type: application/json");
header("AMP-Access-Control-Allow-Source-Origin: " . $domain_url);
header("Access-Control-Expose-Headers:
AMP-Access-Control-Allow-Source-Origin");
$myJSON = json_encode($_POST);
echo $myJSON;
}
?>Lorsque les en-têtes requis sont ajoutés, l'origine http://localhost:8080 sera autorisé à interagir et à récupérer les données.,