HTML <base> 要素の使い方と落とし穴（相対 URL / アンカーリンク / target）

SPA での活用例

React / Vue / Angular のシングルページアプリケーションで、サブディレクトリ配置するときに使われます:

// React Router
import { BrowserRouter } from 'react-router-dom';

// public/index.html に  がある場合

  ...


// Vue Router
const router = createRouter({
  history: createWebHistory('/admin/'),
  routes: [...]
});

// Angular
// angular.json の "baseHref": "/admin/" + index.html の 

動的に base を変える

// JavaScript で base を変更
const base = document.querySelector('base');
if (base) {
    base.href = 'https://cdn-region-jp.example.com/';
} else {
    const newBase = document.createElement('base');
    newBase.href = 'https://cdn-region-jp.example.com/';
    document.head.prepend(newBase);
}

// 注意: すでにパース済の相対 URL（ 等）は再評価されない
// → 動的に変えても効果は限定的

base を使う代替手段

セキュリティ上の注意

XSS 攻撃で を注入されると、すべての相対 URL リソース（JS / CSS / 画像）が攻撃者サーバから読まれる非常に危険なベクタになります。CSP で防御:

Content-Security-Policy: base-uri 'self'

# base 要素の href として許可するオリジンを制限
# 攻撃者が  を注入できなくなる

歴史と互換性

• HTML2.0 (1995) で導入
• 当初は href のみ。target は HTML4 で追加
• すべてのブラウザで対応（IE 含む）
• HTML5 仕様で「1 ページに 1 つだけ」が明文化

非推奨なパターン

• 本文中で href 切替のためだけに base → 絶対 URL を書いた方が明確
• SEO 対策で base を使う → 検索エンジンに canonical URL を伝えるなら を使う
• JS で頻繁に base を書き換える → SPA ルーターを使う
• iframe 内に異なる base → 親フレームと混乱の元

FAQ

Q: 同 1 ページに複数の を書ける？
A: HTML5 仕様で1 つだけと明記。複数あるとブラウザは最初の 1 つを採用、それ以外を無視します。

Q: base を使うと相対 URL の動作が変
A: base が想定通り効いている可能性大。view-source: でレンダリング後の URL を確認、ブラウザ DevTools の Network タブで実際のリクエスト URL をチェックしましょう。

Q: SPA で BrowserRouter の basename と どちらが必要？
A: 両方推奨。 は静的アセット（CSS/JS/画像）の相対パス、basename はルーティングを担当します。