EBIのホームページ・こだわりポイント

EBIのこだわり

という方向けに、詳しく説明いたします。

お読みいただければ、

がよく分かるようになると思います。

古い技術たち

新しい技術を見る前に、古い技術とその問題点を整理してみようと思います。

jQuery

jQueryは、かつては必須級のライブラリでした。しかし、このサイトでは一切使用していません。

昔はブラウザの制約が多く、jQueryを経由することで表記を短縮できたり、統一した動作を実現したりできました。

しかし、時は令和になり、普通にJavaScriptを書けば普通に動く時代にすでになりました。もはやjQueryを使う理由がありません。

WordPress

WordPressを運用している人は、ブロガーの人もたくさんいらっしゃいます。

ブロガーの場合、基本的には静的サイトで事足りるのですが、WordPressは動的サイトです。

そのため、実は攻撃に対して脆弱です。

また、動かすためのサーバー費用もかかります。

PHP

PHPとは、サーバー側で動く言語です。WordPressを動かすには、必ずPHPが動かなければいけません。

この言語は、マイナビの引用によれば脆弱性が多いプログラミング言語第2位です。

プラグイン、テーマ

WordPressのテーマの中身やプラグインは、主にPHPで書いてあります。

そのため、WordPressの開発者がセキュリティ対策をしていても、プラグインやテーマの脆弱性から攻撃を受ける可能性があります。

そして、その開発者がアップデートを怠るとそのプラグインを抜くか、かわりのプラグインを探す以外に方法がなくなってしまいます。

MySQL

WordPressを動かすには、データベースが必須になり、MySQLが指定されています。

データベースを持つことは、それだけでリスクになり得ます。例えば、以下のような詐欺画面を見たことがあるかもしれません。

Microsoft Newsより引用

こういう攻撃は、主にSQLインジェクションと**クロスサイトスクリプティング（XSS攻撃）**によって実現しています。

Persistent XSS

1. 攻撃者はWebサイトのフォームを使用して、データベースに悪意のあるスクリプトを挿入します。
2. 被害者はWebサイトにページをリクエストします。
3. Webサイトの応答には、データベースからの悪意のあるコードが含まれ、被害者に送信されます。
4. 被害者のブラウザ内で、悪意のあるスクリプトを実行され、被害者の情報が攻撃者のサーバーに送信されます。

引用元　https://qiita.com/risto24/items/70625bb6631ad12266d3

これらの攻撃を防ぐために、WordPressは頻繁なアップデートが必要になります。データベースも保有しているため、サイト設計をするときに毎回セキュリティを気にしなければなりません。

WordPressの脆弱性まとめ

EBIが使う技術

それでは、EBIがどのような技術を使っているかをご説明します。

というような、1対1で対応する技術は少ないです。

すべての技術が新しく、洗練されていて、複数の機能を持っています。一つずつ説明いたします。

Jamstack（ジャムスタック）

Jamstackは特定の技術ではなく、ある特徴を持った技術の集合体です。

ここでは簡潔な説明に留めますが、公式サイトによれば過去の技術と比べ、以下の点が向上しています。

• 柔軟性
  • 最新技術の導入、既存の機能変更が容易です。
• 拡張性
  • 大量のアクセスに対応できるようになります。
• 高速さ（パフォーマンス）
  • 予めページを作成しているので、超高速で読み込むことができます。
• 保守性（メンテナンスの歯やすさ）
  • 作成済みのページは分離してあるので、サイトをメンテナンス状態にすることなく更新可能です。
• APIによる通信
  • 多様な外部機能を簡単に追加できます。

以下に紹介するのは、そんなJamstackを構成するメンバーたちです。

React

Reactとは、

Webとネイティブユーザインターフェースのためのライブラリ （React日本公式サイトより）

です。主にMeta（旧Facebook）が開発しています。

サイトをコンポーネント（部品）に分け、例えばページを移動したときなどに必要な差分だけ読み込みます。これにより、高速通信が実現します。

JSX記法というものを採用しており、HTML、CSS、JSを一つのファイルに入れることができます。

jQueryなどのレガシーなライブラリを用いずとも、自然と安全に設計されたウェブサイトが完成します。すごい技術ですよね。

そして、Reactと組み合わせることで真価を発揮するのがGatsbyやNext.jsです。

SSG（静的サイトジェネレーター）

「静的サイト」とは、つまるところ「HTML、CSS、JSというファイルのみでできたサイト」のことです。現在ご覧頂いているのは静的サイトです。

GatsbyやNext.jsは**SSG（静的サイトジェネレーター）**であり、その名の通り静的サイトを生成します。

ブログ記事などの静的コンテンツが多いサイトは、Gatsbyで構築したほうがいいでしょう。この場合でも「コメント欄」や「フォーム」のような動的コンテンツを埋め込むことはできます。

静的サイトの利点

静的サイトが生成するのは「HTML、CSS、JS」です。これらは静的なファイルであるために、見る人やリクエストの方法により内容が変化しません。そして、このサイトを改竄して攻撃を仕掛けるにはこの「HTML、CSS、JS」を編集しなければなりません。

これは「WordPressのデータベースに不正な指示を送って攻撃を仕掛ける」ことと比べて難易度にかなりの差があり、サーバーに不正にログインして侵入するぐらいしか攻撃方法がありません。

攻撃を受けた場合でも、静的サイトの場合はバックアップからすぐに復旧できます。運営場所を移してしまえば、1日で復旧可能です。

データベースがない

静的サイトは、データベースが必要ありません。

よって、SQLインジェクションなどの攻撃は、原理的に起こりようがありません。

ヘッドレスCMS

WordPressは、ウェブサイトのデザイン、コンテンツ管理、データベースなどがすべて一つになっています。テーマとプラグインを使用してカスタマイズできますが、制約も多いです。その代わりに手に入る簡単さが取り柄です。

一方ヘッドレスCMSは、コンテンツ管理とウェブサイトのフロントエンド（ユーザーが見る部分）が分離しています。バックエンドでコンテンツを管理し、API経由でコンテンツをフロントエンドに提供します。

また、SSGを利用する場合は常にヘッドレスCMSを起動しておく必要がありません。編集時とビルド時にサーバーをつけておけば、データを取得して組み上げてくれます。

まとめ

まとめると、この図のようになります。

まとめ

最後に、2つをまとめてみましょう。

EBIにHP作成を依頼してみませんか？

EBIでは、新しい技術を使用してセキュリティが高いホームページを作っています。

原理的に攻撃が難しいため、レンタルサーバー不要でサイトの運営を始めることができます。

もっと知りたい方へ

「現代のWeb開発についてもっと知りたい！」という方向けに、

• Web技術基礎コース
• 現代Web開発コース

などをご用意しております。こちらのお申込みはEBIオンライン家庭教師で承っております。

90分の無料体験もできます。「45分 ×2」などに分割することも可能です。お気軽に申し込んでみてください。

おすすめ記事

• ウェブサイトの運用にかかる費用について解説！