アーク・リアクター

今月の調査アクティビティ

ブログをどうつくるか考えている. 今月は初めにCloudflareを使ったWordPressをセキュアする試行をした、興味深いデータが得られたので記録しておきたい.

次に、ブログ作成の方法について以下の試行を実施した.

  • 試行パターンは次の3つ
    1. Blogger(主に記事の作成)
    2. WordPress(セキュアなサーバ構成の試行)
    3. Cloudflare Pages + Astro + MicroCMS

また、記事の作成方法についても引き続き調査・検討中だ.

1. WordPress

サイトを安全に公開する方法の検討と試行

WordPressを使う場合、必然的サーバ立てることになる(サーバ立てなくても可能だけど、ほぼ立てることになる)、サーバはリスクが高いのでWordPressを使う場合は、セキュリティをどうするかがもっと重点になるかと思う.

下記の記事を読んで、オリジンサイトを隠蔽することが可能かと思い試行してみた.

CloudflareからさくらVPSサイトにセキュアトンネルを張りオリジン・サーバへのアクセスを隠蔽する. これにより、サーバへの直接アクセスさせずに運用させようと考えた.

ネットワーク構造

今回作成した構成は下記のようにした.

  • ポイント
    • Cloudflare~さくらVPC間にセキュアトンネルを作成
    • サイトはキャッシュを併用してcloudflare CDNで配信

WordPressサイトは、利用者が多いこともありセキュリティ構成が手間だ.

したがってセキュリティの構成は攻撃パターンを含めて検討する必要がありアプリケーション・ファイアウォール設定や著名な攻撃パターンの検出をCloudflareに行わせようという考えだ.(多少の有料はイマドキは常識だろう)

Cloudflare Wordpress

さくらVPC側の設定も含めドメイン名をそれぞれのポイントで適格に設定する必要はあるが難しい設定はないと思う.

cloudflaredを導入しセキュアトンネルを作成、http/https通信やssh通信を遮断してしまえばオリジンサーバーを晒すことはなくなる(アプリケーション的にはwp-adminはキャッシュスルーするので別途カスタムルールでアクセス制限設定の必要はある)

トラフィック分析

数日放置した状態ではスキャンや攻撃はないだろうと思っていたのだが、予想に反しとても多くの攻撃を検出していたことは驚きだ.

サンプルとしてピックアップした日は、日本、シンガポール、アメリカ、UK、アイルランドからであったが、ボットがスキャンして決まりパターンのアクセスをしている様子がチェックされていた.

トラフィック分析

下記にアタックパターンを例に示してみるが、「スターク・インダストリー」(映画:アイアンマンに登場する企業)やボット名をエージェント名にしている点などスクリプトキディな感じを受ける.

アタックパターン

先日もconnpassで構築例を示して講義しているのを見た.WordPressサーバーを直接晒す構成はリスク高いなとは感じた.

実施に構築してみて思ったのだがWordPressサーバは、検出されやすいこともあってアタックされやすいのではないかと思う.

企業の大小にかかわらず、セキュリティ・インシデント・レポートが多い昨今はフロントエンドにはWAFだけでなくDDoSプロテクションを含めて、アクティブ・セキュリティ・ブロッカーを配置することは必要と考える.

2. ブログサイトの検討と試行(Blogger)

WordPressサイトを作った後に出す項目ではないのだが、
ブログをどう作るか考えている. Zenn/Qiita/Noteに示されるようにブログ記事を作成はMarkdownが良い.

Markdownを使う前提でブログサイトをどのように使うか、どのように作るか検討したい.

Markdownの使いかたを考える

Blogger

既存のブログを利用する点においては、Bloggerがいろいろなことを考えて都合が良いと思っている.

記事作成方法を考える必要があるが、単純には下記のような方法が考えられる:

  1. 記事作成のアプローチとしては、StackEditで作成してBloggerへ投入する
    StackEditは更新もあり使い方を更新する必要はあるが、手慣れている点で手軽であると思っている.
  2. VSCodeで記事を作成してBloggerへ投入する
    VSCodeで記事を作成してBloggerへ投入する(VSCode Blogger機能拡張)、可能性を試行する.
  3. VSCode作成・レンダリングしてBloggerへ転記
    VSCodeで作成してレンダリング後に転記する(人的アプローチがめんどくさそうではあるが試行錯誤しているうちはよいかもしれない)

実際にそれぞれ試行して検討することとする.

2.1 VSCode Blogger(VSCode機能拡張)を使ったMarkdown記事の作成

VCCode機能拡張

Bloggerへの記事の展開方法の検討(その2)、VSCodeの機能拡張を利用(VSCode Blogger)

つかえるかどうか検討する

VSCodeBlogger機能拡張

機能各項は下記:
vscodeblogger機能拡張

このドキュメント以外には資料はないので、これに従い設定する.

【事前準備】Google Cloud : Blogger API有効化

RequirementからGoogle Cloudの設定は必須、まずはBlogger APIの有効化を行う.

BloggerAPI

BloggerAPI OAuth

ここではまった

アプリケーションを本番で展開せずにテストの状態の場合、ユーザー登録が必要であった。
Googleに認証されていませんとのエラーメッセージに翻弄された。

2日間も時間を浪費してしまった・・・Microsoftじゃないんだからメッセージはわかりやすくお願いします!

VSCode環境設定

VSCodeの環境設定ファイルに2つパスを設定する.

VSCode Editor設定

client-credentisal.jsonを配置するフォルダを設定しておく.

環境変数は2つとも同じ設置.

記事の作成とプッシュ

VSCodeの環境設定をする.そこへclient_credential.json(BloggerAPIからダウンロードしたファイル)を置く

環境設定ファイル

VSCode環境設定

VSCode Blogger 認証

VSCode Blogger認証

コマンドで認証を行うとブラウザが開くので認証する

VSCode Blogger 記事の投稿

記事の投稿

記事の投稿を確認できれば良し!

Copilotに作せさせてみたテキトーな記事:

感触

VSCodeでMarkdown記事を作成して投稿できるのは確かに良いと感じる.しかし、使いやすい環境にはどうしても要望がでてくるのである.

Zennのような記事を期待したくなるのだが、現状でそれは期待しすぎか.

ZennのパーサーとCSSを使うのであれば、独自にブログを作成しても良いと思う.

3. Astro+Cloudflare Pages+microCMSでブログ環境構築

Next.JSで作ってみようと思ったのだけど、CloudFlareで実装するのであればAstroの方が良さそうだ.

構成要素:

  • microCMSに記事をMarkdownで作成
  • フロントエンドはastro
  • zenn-markdown-htmlを使ってSSR
  • Githubからデプロイ

本文周りは良い感じだ:

astro-zen-markdown-html-microCMS-cloudflarepages

markdownをmicroCMSに入れると、レンダリングしてくれるし、markdown はZenn風で多くの人に受け入れられやすいのではないかと思う.

フロントページのデザインを作成するのがメンドクサイとは思う.

今月のまとめ

3つのパターンで実際に作ってみた、
全部お任せするBlogger、サーバ運用となるWordPress、サーバレスで動かすCloudFlare Pagesとそれぞれの良い点・悪い点がありどれでもよいかなと思う.

個人的には見た目(テーマとかテンプレート)を作ったり・改修したりがもっともメンドクサイ作業だなと感じる.