diff --git a/components/Apps/WebView.tsx b/components/Apps/WebView.tsx
index 52c8b2c..87c8481 100644
--- a/components/Apps/WebView.tsx
+++ b/components/Apps/WebView.tsx
@@ -34,6 +34,7 @@ export const AppsWebView = ({ openStationACFromEachTrainInfo }) => {
     setLoadError,
     setTrainInfo,
     injectJavascript,
+    injectJavascriptBeforeContentLoaded,
     mockApiEnabled,
   } = useTrainMenu();
   var urlcache = "";
@@ -166,6 +167,7 @@ export const AppsWebView = ({ openStationACFromEachTrainInfo }) => {
       contentMode="mobile"
       style={{ backgroundColor: bgColor }}
       {...{ onMessage, onNavigationStateChange, onLoadEnd }}
+      injectedJavaScriptBeforeContentLoaded={injectJavascriptBeforeContentLoaded}
       injectedJavaScript={injectJavascript}
     />
   );
diff --git a/lib/webViewInjectjavascript.ts b/lib/webViewInjectjavascript.ts
index a636d5e..885b695 100644
--- a/lib/webViewInjectjavascript.ts
+++ b/lib/webViewInjectjavascript.ts
@@ -38,12 +38,7 @@ export const injectJavascriptData = ({
   useUnyohub,
   useElesite,
   isDark,
-  mockApiConfig = null,
-}: InjectJavascriptOptions): string => {
-  // XHRインターセプターを先頭に注入（モックモード有効時）
-  const xhrInterceptor = mockApiConfig
-    ? generateXhrInterceptorJs(mockApiConfig)
-    : '';
+}: Omit<InjectJavascriptOptions, 'mockApiConfig'>): string => {
 
   // 一番上のメニュー非表示　地図スイッチによって切り替え
   const topMenu =
@@ -1405,7 +1400,6 @@ setStationMenuDialog.observe(document.querySelector('#disp'), {
 `
       : ``;
   return (
-    xhrInterceptor +
     bootData +
     topMenu +
     trainIcon +
@@ -1416,3 +1410,12 @@ setStationMenuDialog.observe(document.querySelector('#disp'), {
     makeStationMenu
   );
 };
+
+/**
+ * XHRインターセプターJSを生成する（injectedJavaScriptBeforeContentLoaded用）
+ * ページスクリプトより前に実行する必要があるため、別プロップで渡す。
+ */
+export const generateBeforeContentLoadedScript = (mockApiConfig: MockApiConfig | null): string => {
+  if (!mockApiConfig) return '';
+  return generateXhrInterceptorJs(mockApiConfig);
+};
diff --git a/stateBox/useTrainMenu.tsx b/stateBox/useTrainMenu.tsx
index efc6736..d9b4d97 100644
--- a/stateBox/useTrainMenu.tsx
+++ b/stateBox/useTrainMenu.tsx
@@ -10,7 +10,7 @@ import { ASCore } from "../storageControl";
 import { AS } from "../storageControl";
 
 import { getStationList2 } from "../lib/getStationList";
-import { injectJavascriptData } from "../lib/webViewInjectjavascript";
+import { injectJavascriptData, generateBeforeContentLoadedScript } from "../lib/webViewInjectjavascript";
 import { MockApiConfig, TrainEntry } from "../lib/mockApi/webviewXhrInterceptor";
 import { MOCK_TRAIN_POSITIONS } from "../lib/mockApi";
 
@@ -49,6 +49,8 @@ const initialState = {
     elesite: boolean;
   },
   injectJavascript: "",
+  /** injectedJavaScriptBeforeContentLoaded用（XHRインターセプター） */
+  injectJavascriptBeforeContentLoaded: "",
   /** モックAPIが有効かどうか（走行位置画面のスイッチ） */
   mockApiEnabled: false,
   setMockApiEnabled: (e: boolean) => {},
@@ -155,9 +157,11 @@ export const TrainMenuProvider: FC<props> = ({ children }) => {
     useUnyohub: useUnyohubSetting,
     useElesite: useEleSiteSetting,
     isDark: useThemeColors().isDark,
-    mockApiConfig,
   });
 
+  // XHRインターセプターはページスクリプトより前に実行が必要
+  const injectJavascriptBeforeContentLoaded = generateBeforeContentLoadedScript(mockApiConfig);
+
   useEffect(() => {
     //列車アイコンスイッチ
     ASCore({
@@ -236,6 +240,7 @@ export const TrainMenuProvider: FC<props> = ({ children }) => {
         setUpdatePermission,
         dataSourcePermission,
         injectJavascript,
+        injectJavascriptBeforeContentLoaded,
         mockApiEnabled,
         setMockApiEnabled,
         mockTrainPositions,