メインコンテンツへスキップ

Webサーバーミドルウェアの使用

Blocklet SDKには、Express.js用の強力ですぐに使えるミドルウェア群がバンドルされています。これらのツールは、セキュリティ、SEO、シングルページアプリケーション(SPA)ルーティングといった一般的なWeb開発の課題に対処するために設計されており、より少ない定型コードで、より堅牢で機能豊富なブロックレットを構築することができます。

このガイドでは、最も重要なミドルウェアと、それらをアプリケーションに統合する方法について説明します。

CSRF保護

クロスサイトリクエストフォージェリ(CSRF)は、一般的なWebセキュリティの脆弱性です。SDKのcsrfミドルウェアは、このような攻撃からアプリケーションを保護する簡単な方法を提供します。

これは、各ユーザーセッションに一意のトークンを作成し、状態を変更するリクエスト(POSTPUTなど)でそのトークンの送信を要求することで機能します。

使用方法

CSRF保護を有効にするには、csrfおよびcookie-parserミドルウェアをExpressアプリケーションに追加するだけです。

Express.js Server Setup

javascript
import express from 'express';
import cookieParser from 'cookie-parser';
import { csrf } from '@blocklet/sdk/middlewares';

const app = express();

// cookie-parser is required for the csrf middleware to work
app.use(cookieParser());

// Apply the csrf middleware globally
app.use(csrf());

app.post('/api/data', (req, res) => {
  res.json({ message: 'Data updated successfully!' });
});

// Your other routes...
app.listen(3000);

仕組み

  1. トークン生成

    GETリクエストに対して、ミドルウェアはユーザーのlogin_tokenを基にx-csrf-tokenクッキーを自動的に生成します。

  2. トークン検証

    POSTPUTPATCH、およびDELETEリクエストに対して、x-csrf-tokenクッキーとx-csrf-token HTTPヘッダーの値を比較します。一致しない場合、リクエストは拒否されます。

  3. フロントエンド実装

    フロントエンドクライアントは、x-csrf-tokenクッキーを読み取り、その後のすべての状態を変更するAPI呼び出しで、その値をx-csrf-tokenヘッダーで送信する責任があります。

サイトマップ生成

サイトマップは、検索エンジンがアプリケーションのページを発見しインデックス付けするのに役立つため、SEOにとって非常に重要です。sitemapミドルウェアは、準拠したsitemap.xmlファイルの作成を自動化します。

使用方法

アプリケーションのURLをストリームに書き込むジェネレーター関数を提供します。残りの処理はミドルウェアが担当します。

Sitemap Generation

javascript
import express from 'express';
import { sitemap } from '@blocklet/sdk/middlewares';

const app = express();

// A mock function to get dynamic data
const getBlogPosts = async () => [
  { slug: 'my-first-post', updatedAt: new Date() },
  { slug: 'my-second-post', updatedAt: new Date() },
];

app.get('/sitemap.xml', sitemap(async (stream) => {
  // 1. Add static pages
  stream.write({ url: '/' });
  stream.write({ url: '/about' });
  stream.write({ url: '/contact' });

  // 2. Add dynamic pages from a database or API
  const posts = await getBlogPosts();
  posts.forEach(post => {
    stream.write({ url: `/blog/${post.slug}`, lastmod: post.updatedAt });
  });
}));

app.listen(3000);

ユーザーまたは検索エンジンのクローラーが/sitemap.xmlにアクセスすると、このエンドポイントは動的に生成されたXMLサイトマップを返します。

シングルページアプリケーションのSPAフォールバック

シングルページアプリケーション(SPA)はクライアント側でルーティングを処理するため、SEOやURLへの直接アクセスで問題が生じることがあります。fallbackミドルウェアは、アセット以外のすべてのリクエストに対してメインのindex.htmlファイルを提供し、SEOやソーシャルシェアリングのための動的メタデータを注入できるようにすることで、この問題を解決します。

使用方法

fallbackミドルウェアは通常、ミドルウェアチェーンの最後に配置し、他のルート(APIエンドポイントや静的ファイルサーバーなど)で処理されなかったGETリクエストを捕捉するようにします。

SPA Fallback Setup

javascript
import express from 'express';
import path from 'path';
import { fallback } from '@blocklet/sdk/middlewares';
import { env } from '@blocklet/sdk/config';

const app = express();
const publicPath = path.join(__dirname, '../dist');

// Serve static assets like CSS, JS, and images
app.use(express.static(publicPath));

// Your API routes go here
app.get('/api/user', (req, res) => res.json({ name: 'John Doe' }));

// The fallback middleware handles all other GET requests
app.use(fallback('index.html', {
  root: publicPath,
  // Dynamically set meta tags based on the request path
  async getPageData(req) {
    if (req.path.startsWith('/posts/')) {
      const postId = req.path.split('/').pop();
      const post = await getPostById(postId); // Fetch post data
      return {
        title: post.title,
        description: post.summary,
        ogImage: post.featuredImage,
      };
    }
    // Default metadata for other pages
    return {
      title: env.appName,
      description: env.appDescription,
    };
  },
}));

app.listen(3000);

主な機能

  • 動的メタデータ: getPageData関数が中心的な機能であり、ページ固有のtitledescriptionogImageタグを返すことができます。これらのタグはHTMLレスポンスに注入されます。
  • 自動注入: ミドルウェアは、必要なBlocklet JavaScript(__blocklet__.js)とテーマスタイルをHTMLに自動的に注入し、Blocklet Server環境とのシームレスな統合を実現します。
  • キャッシング: 頻繁にアクセスされるページのパフォーマンスを向上させるためのインメモリキャッシュが含まれています。