エラー153とは何か

React NativeでWebViewを使ってYouTube動画を埋め込む際、Error 153 が発生することがあります。これはYouTube側が「許可されていないReferer（参照元）からのアクセス」と判断した場合に返すエラーコードです。

WebViewにURLをそのまま渡しただけでは、適切なRefererヘッダーが送信されず、YouTubeのAPIポリシー要件を満たせないためにこのエラーが発生します。

解決方法：WebViewにheadersを追加する

WebViewのsourceプロパティにheadersを追加し、Refererを設定します。

<WebView
  source={{
    uri: url,
    headers: {
      Referer: 'https://com.example.yourapp',
    },
  }}
/>

ポイント：Refererの値はアプリのIDによって変わります。次のセクションで確認方法を説明します。

Refererに設定する値の確認方法

Refererには 'https://' + {アプリID} の形式で設定します。

アプリIDの確認場所：

• Androidの場合： android/app/build.gradle の applicationId
• iOSの場合： ios/{プロジェクト名}/Info.plist の Bundle Identifier、またはXcodeプロジェクトの「Signing & Capabilities」タブ

例えばアプリIDが com.example.myapp の場合、Refererは以下のようになります。

Referer: 'https://com.example.myapp'

コード全体の例

import React from 'react';
import { WebView } from 'react-native-webview';

const YouTubePlayer = ({ videoUrl }) => {
  return (
    <WebView
      source={{
        uri: videoUrl,
        headers: {
          Referer: 'https://com.example.myapp', // ←自分のアプリIDに変更
        },
      }}
      style={{ flex: 1 }}
    />
  );
};

export default YouTubePlayer;

それでも解決しない場合

上の方法で解決しない場合は、以下を確認してください。

• react-native-webviewのバージョン：古いバージョンではheadersが正しく送信されない場合があります。npm update react-native-webviewで最新化を試してください。
• YouTubeの埋め込みURLを使う：https://www.youtube.com/watch?v=XXXXの代わりにhttps://www.youtube.com/embed/XXXX形式を使うと問題が回避できることがあります。
• react-native-youtube-iframeの利用：WebViewの代わりにYouTube専用ライブラリ（react-native-youtube-iframe）を使う方法も有効です。

まとめ

React NativeのWebViewでYouTubeエラー153が発生する場合、Refererヘッダーの追加が最も効果的な解決策です。

1. WebViewのsourceにheaders: { Referer: 'https://com.yourappid' }を追加
2. アプリIDはbuild.gradle（Android）またはBundle Identifier（iOS）で確認
3. 解決しない場合はyoutube.com/embed/形式のURLや専用ライブラリも検討