Google AMP-Cors

この章では、AMPのCORSを理解しようとします。詳細を掘り下げる前に、CORSの基本とその有用性を理解しましょう。

CORSとは何ですか？

CORSはCross Origin Resource Sharingの略です。 CORSは、たとえば_xyz.com_ originで実行されているWebページによってURLに対して行われた要求に、要求されたURLのデータにアクセスする許可を与える必要があるかどうかをブラウザに伝えるために、追加のHTTPヘッダーデータが必要なプロセスです。 Webページから多くのhttpリクエストを行います。そのためには、必要なデータを取得するためにCORSを配置する必要があります。

ホストとは異なるサーバーにhttpリクエストを行う場合、クロスオリジンリクエストと呼びます。これは、ドメイン、プロトコル、ポートのいずれかがホストオリジンと異なることを意味します。そのような場合、要求されたURLからデータにアクセスするための許可が必要です。 GET/PUT/POST/DELETEリクエストが行われたことを意味します。

この追加データは、行われたhttp要求呼び出しのブラウザーヘッダーで利用可能です。この許可ステップは基本的にセキュリティ上の理由で必要であるため、必要な許可なしにWebページが別のドメインからデータを作成または取得することはできません。

ブラウザのヘッダーには、以下に示す値を持つことができる Access-Control-Allow-Origin などの詳細が必要です-

Access-Control-Allow-Origin : *

要求URLヘッダーに値*を指定すると、ブラウザーに、任意のオリジンからのデータへのアクセスを許可してリソースにアクセスするよう指示します。

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

上記の値を設定すると、ブラウザにWebページhttp://www.example.com/[www.example.com]からのリクエストがリクエストされたURLのデータの取得のみ許可されます。

CORSのサーバー構成は、共有されるデータの使用方法を念頭に置いて行う必要があります。それに応じて、サーバー側で必要なヘッダーを設定する必要があります。

CORSが何であるかがわかったので、次のステップに進みましょう。 ampの場合、httpエンドポイントを使用してデータを動的にロードするamp-form、amp-listなどのコンポーネントがあります。

ampページの場合、http要求が同じ発信元から行われた場合でも、CORS設定を適切に行う必要があります。ここで疑問が生じます。要求と応答が同じ発信元から来たとしても、なぜCORSを有効にする必要があるのでしょうか。技術的には、同じドメイン、オリジンなどのデータをリクエストおよび表示しているため、そのような場合はCORSを有効にする必要はありません。

Ampには、ページをヒットしたユーザーにより速くデータを取得するために追加されるキャッシングと呼ばれる機能があります。ユーザーが既にページにアクセスしている場合、データはgoogle cdnにキャッシュされ、次のユーザーはキャッシュからデータを取得します。

データは、現在は異なるドメインを持つアンプエンドに保存されます。ユーザーが任意のボタンをクリックして最新のデータを取得すると、ampキャッシュURLがWebページドメインと比較され、新しいデータが取得されます。ここで、CORSがampキャッシュされたURLとWebページドメインを処理するため有効になっていない場合、リクエストは無効になり、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 = "ampforml">
      <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

submitform.phpに追加された応答ヘッダーの詳細-

応答送信フォーム

フォームが機能するには、値がAMP-Access-Control-Allow-Source-Originおよびamp-access-control-allow-source-originのaccess-control-expose-headersなどのヘッダーを追加する必要があります- 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 が対話してデータを取得できるようになります。

Google-amp-cors

Google AMP-Cors

CORSとは何ですか？

出力