5.

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

編集
この記事の要点

base 要素とは

HTML 文書内のすべての相対 URL のベースを指定する要素。 内に 1 つだけ書けます。




  
  サンプル


  
  はじめに
  

  
  

属性

属性意味
hrefベース URLhttps://cdn.example.com/v2/
target全リンクのデフォルトターゲット_blank / _self / _parent / _top / フレーム名

少なくともどちらか 1 つ指定が必要。両方指定も可。

target 属性で全リンクを新タブに


  


  About
  

  Contact
  

ドキュメントサイトやヘルプセンターで「全リンクを新タブで開きたい」用途に便利。ただしUX を損ねることが多いので注意。

副作用1: ページ内アンカーが効かなくなる

最大の落とし穴 を指定すると、同ページ内のアンカーではなく https://example.com/#section への新規ナビゲーションになります:


  


  
  
  セクション

  
  セクション

  
  
    セクション
  

副作用2: フォーム送信先

同様に

も base からの解釈になります。意図しないエンドポイントに POST される可能性があります。

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 を使う代替手段

用途base を使う代替
サブディレクトリ配置絶対パス書く or サーバ側で配信パス調整
全リンクを新タブJS で document.links ループ
CDN への切替base.href 変更ビルド時にパス置換
ローカル / 本番のパス切替環境別 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ルーティングを担当します。

編集
Post Share
子ページ

子ページはありません

同階層のページ
  1. html要素
  2. head要素
  3. body要素
  4. title要素
  5. base要素
  6. meta要素
  7. div要素
  8. span要素
  9. header要素
  10. HTML5 footer 要素の使い方(フッター・コピーライト・連絡先)
  11. main要素
  12. address要素

最近更新/作成されたページ