Учебники

Google AMP — Cors

Март 15, 2019

В этой главе мы попытаемся понять CORS в AMP. Прежде чем углубляться в детали, давайте разберемся с основами CORS и как это полезно.

Что такое CORS?

CORS расшифровывается как Cross Source Resource Sharing. CORS — это процесс, которому требуются дополнительные данные заголовка HTTP, чтобы сообщить браузеру, следует ли дать запросу, сделанному на URL веб-страницей, работающей по адресу источника xyz.com, разрешение на доступ к данным из запрошенного URL-адреса. Мы делаем много http-запросов с веб-страницы, и для этого нам нужно иметь CORS, чтобы получить необходимые данные.

Когда мы отправляем запрос http на сервер, отличный от хоста, мы называем его запросом перекрестного источника, что означает, что домен, протокол и порт отличаются от источника узла. В таком случае должно быть разрешение от запрошенного URL для доступа к данным; это означает, что запрос GET / PUT / POST / DELETE выполнен.

Эти дополнительные данные доступны в заголовке браузера для выполнения запроса http. Этот шаг разрешения в основном требуется по соображениям безопасности, чтобы ни одна веб-страница не могла создавать или получать данные из другого домена без необходимого разрешения.

Заголовок браузера должен содержать такие данные, как Access-Control-Allow-Origin, которые могут иметь значения, как показано ниже — 

Access-Control-Allow-Origin : *

Значение * в заголовке URL-адреса запроса означает, что браузер разрешает запрашивать данные из любого источника для доступа к ресурсу. 

Access-Control-Allow-Origin: https://www.example.com

Значение, указанное выше, говорит браузеру, что запрос, сделанный с веб-страницы www.example.com, позволит получить данные только для запрошенного URL.

Конфигурирование сервера для CORS должно быть выполнено с учетом того, как будут использоваться данные, которые являются общими. В зависимости от этого требуемые заголовки должны быть установлены на стороне сервера.

Теперь, когда мы знаем, что такое CORS, давайте сделаем еще один шаг вперед. В случае amp у нас есть такие компоненты, как amp-form, amp-list, которые используют конечные точки http для динамической загрузки данных.

В случае страниц с усилком, даже если http-запрос сделан из того же источника, нам нужно иметь настройку CORS. Здесь возникают вопросы — почему мы должны включить CORS, даже если запрос и ответ будут приходить из одного источника. Технически нам не нужно включать CORS в таком случае, потому что мы запрашиваем и отображаем данные для того же домена, источника и т. Д.

Amp имеет функцию, называемую кешированием, которая добавляется для более быстрого получения данных пользователю, который заходит на страницу. Если пользователь уже посетил страницу, данные будут кэшироваться в Google CDN, следующий пользователь получит данные из кэша.

Данные хранятся на конце усилителя, который теперь имеет другой домен. Когда пользователь нажимает любую кнопку для получения свежих данных, URL-адрес кэша усилителя сравнивается с доменом веб-страницы для получения новых данных. Здесь и сейчас, если CORS не включен, так как он имеет дело с кэшированным URL-адресом amp и доменом веб-страницы, запрос не будет действительным и не сможет получить разрешение CORS. Это причина, почему нам нужно включить CORS даже для того же источника в случае страниц с усилителем.

Рабочий пример работы с формами с включенным CORS показан здесь — 

<!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;
   }
?>

Выход

Представить форму

Подробности заголовков ответов добавлены в submitform.php —

Ответ Отправить

Чтобы форма работала, нам нужно добавить заголовки, такие как access-control-expose-headers со значением AMP-Access-Control-Allow-Source-Origin и amp-access-control-allow-source-origin — http: // localhost : 8080 .

Здесь мы используем php-файл, а apache — используемый сервер. В 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;
   }
?>

Когда необходимые заголовки будут добавлены, отправителю http: // localhost: 8080 будет разрешено взаимодействовать и получать данные обратно.,

46
Share: