背景

AMPページで、Self-XSS対策のためにコンソールにアラートをだせないか試してみた。
AMPページはjavascriptが使えないので、回避方法について記載する。

AMP

「AMP(Accelerated Mobile Pages)とはGoogleとTwitterで共同開発されている、モバイル端末でウェブページを高速表示するためのプロジェクト、またはそのためのフレームワーク(AMP HTML)のことです。」

なので、ざっと噛み砕くと、

「独自のルールに則ってhtmlを構成すると、モバイル端末だけには高速表示されるよ」
ってこと。

メリット

読み込み速度UPによって、モバイルユーザーに対してのUXを向上させることができる。

デメリット

javascriptが使えないので、動的コンテンツを持っているページは、ampの用意したライブラリに置き換えたりする必要がある。
逆説的に、好き勝手なjavascriptのせいでロードが遅くなるってことなのかな。

Self-XSS

第三者が、ユーザーに対してコンソール上などで悪意のあるスクリプトを騙して実行させ、個人情報を抜き取ったりする攻撃。

対策

ユーザー側が意図せずコンソールを開いたり、スクリプトを実行させないように警告文や注意を促す対策が考えられる。
（他にも特定のAPIを塞ぐなどあるみたいだけど今回は検討しない）
実際に、facebookのページでコンソールを開いてみると対策であるワーニングが表示される

実装

で、AMPページの場合、単純にconsole.logでコンソールにSelf-XSSの注意文言を表示させることができない。
使ってみるとOnly AMP runtime 'script' tags are allowedってAMP以外のscriptは許可されてないってエラーが出る。

なので、amp-iframeと言ったライブラリで、
javascriptが使える外部コンテンツとしてワーニングが表示されるjavascriptを読み込ませることにした。

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello, AMPs</title>
    <link rel="canonical" href="localhsot/amp">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
*   <style amp-custom>
        h2 {
            margin-top: 600px ;
        }
        amp-iframe {
            max-width: 1px ;
        }
    </style>
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </script>
    <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-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>
  <body>
    <h1>Welcome to the mobile web</h1>

    <h2>ampページでコンソール出力する方法</h2>
 *  <amp-iframe width="1" height="1"
        sandbox="allow-scripts"
        layout="responsive"
        frameborder="0"
        src="/warning">
    </amp-iframe>

  </body>
</html>

「*」がついている行（ブロック）が今回必要となったコード
src="/warning"がconsole.logで注意を出力するjsが記述しているページのURLとする
margin-top: 600pxは「amp-iframe要素は、ファーストビューの領域の75%よりも下、または最上部から600pxより下に配置しなければいけません。」とのことから
width、height、cssのmax-widthが1なのは0だとiframe自体が表示されなかったから

そもそも

モバイル端末で、DevelopeToolとか開くことあるんですかね・・・。
なんか選択肢として間違っている気もする。。。

参考

https://www.ampproject.org/docs/reference/components/amp-iframe
https://syncer.jp/Web/AMP/Component/amp-iframe/

AMPページでSelf-XSS対策をする

背景

AMP

メリット

デメリット

Self-XSS

対策

実装

そもそも

参考