twitter埋め込みページを開くとiOS Safariがクラッシュ！その原因は？

最近、iPhoneでサイトの特定のページを開くと、ブラウザ（safari/chromeともに）がクラッシュしてしまう現象で悩んでいました。

PCでは問題なく表示できていたので、最初は原因が分からず、かなり参りました。色々調べていった結果、twitterの埋め込みtweetが影響しているようでした。

なぜなら、埋め込みtweetを記事から削除するとiPhoneで見てもブラウザのクラッシュが無くなったからです。

この記事では、埋め込みtweetがある記事をiPhoneで見た時にブラウザがクラッシュする原因と回避方法についてまとめています。

埋め込みtweetがセンシティブな内容だとjsが暴走

さらに調べていくと、センシティブな内容を含むtweetを埋め込むと、twitterのjavascriptが暴走するようでした。

埋め込みtweetがセンシティブな内容ではなければ問題は起きません。

特に理由も無くセンシティブな内容を含みます、となるツイートもありますし、埋め込んだ後からセンシティブな内容を含みますになるツイートもあることから、いろんなサイトで影響が出ていると思います。

特にア〇ルト系のサイトではtweetの埋め込みは画像を引用する代わりに頻繁に行われているので、結構クラッシュしているサイトが多いのではないかと思います。

埋め込みtweetブラウザクラッシュ回避策

今回の問題は、iPhoneだけで起きる問題で、Androidや、PCでは問題が起きません。

今回の問題はある日突然起き始めました。

最初は、twitter側の問題だと思ったのですが、iPhoneだけで起きる問題だとすると、twtter側で対処すべき内容なのかiOSが対応すべき内容なのかわからないですね。

iOSかtwitterサイドで何らかの解決が行われるまで、暫定措置で回避する必要があります。

埋め込んだ一つ一つのtweetを記事から削除するのは大変ですし、そもそも記事からツイートを削除してしまうと問題が解決した時にもとに戻すのも大変です。

色んな記事にtweetを埋め込んでいるので、どこに問題のtweetが埋め込まれているのかを探すのも現実的じゃないです。

何らかの対策をするにしても一律対処する必要があり、問題が解決されたら速やかに記事を元に戻せる方法が望ましいです。

暫定回避策

今回はWordpressのフィルターフックで、一律、twitterのscriptタグを削除するように処理することで対応します。

この対応により埋め込みtweetのjavascriptは読み込まれなくなるのでクラッシュ問題は回避できます。しかし、javascriptを読み込まなくなるため、tweet内の画像が表示されなくなるデメリットがあります。

埋め込みツイートをそのままにしているとiPhoneユーザーがサイトを閲覧できなくなりますので、これは仕方ないと思います。

scriptタグ削除スニペット

the_contentフィルターフックで、twitterの埋め込みコードについているscriptタグを削除します。

function delete_twitter_instagram_script( $content ) {
$content = preg_replace('|<script([^>]*?)platform.twitter.com/widgets.js[^>]*?></script>|is','', $content);
return $content;
}
add_filter('the_content','delete_twitter_instagram_script', 11);

iPhoneだけtwitterのscriptタグを削除する方法は？

スマホでもAndroidの場合は、センシティブな内容を含みますのツイートが埋め込まれていても、クラッシュすることはありません。

iPhoneだけscriptタグを削除するにはどうしたらいいでしょうか？

PHPでデバイスの判定を行うのは結構面倒なのとキャッシュの問題もありますので、javascriptで機種判定を行い、javascriptで<script>タグをフッターに追加するのが一番良いと思います。

ただ、結構複雑な手順になるので、詳細は割愛します。

twitter側で問題が解決された模様

2023年10月まだtwitter埋め込み不具合は解消していない

一度解消したかに見えたtwitter センシティブ埋め込み問題ですが、再発しているように見えます。

特に、twitterタイムラインを埋め込み、その中にセンシティブのtweetがあるとブラウザがクラッシュします。

タイムラインは不特定多数のツイートが流れますのでその中にセンシティブがあるとNGです。

対策としては、やはりタイムラインの埋め込みは避けた方が良いですね。

埋め込みコードの例

タイムラインの埋め込みコードの例

<a class="twitter-timeline" href="https://twitter.com/kireina_koichi?ref_src=twsrc%5Etfw">Tweets by kireina_koichi</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

ツイートの埋め込みコードの例

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">鬱です</p>&mdash; 匿名希望 (@kireina_koichi) <a href="https://twitter.com/kireina_koichi/status/1709144725654307081?ref_src=twsrc%5Etfw">October 3, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

twitterの埋め込みタイムラインを削除するスニペット

twitter（X）がどうなるのかわからないので、一括で削除（表示しないだけ）して様子を見るしかないです。

function delete_twitter_timeline_script( $content ) {
$content = preg_replace('/<a class="twitter-timeline"[^>]*>.*?<\/a>/is','', $content);
return $content;
}
add_filter('the_content','delete_twitter_timeline_script', 11);

まとめ

twitterのツイートを記事に埋め込むことで引用扱いになりますので、記事の作成時はとても便利に使っています。

今回それが影響して、ツイートが埋め込まれた記事をiosで閲覧するとブラウザがクラッシュする問題が広範囲で起きてしまってとても焦りました。

まさか、埋め込みtweetのjavascriptが悪さするとは思ってもいませんでした。

twitter側で対策されるまでの間は、今回ご紹介したスニペットで一時的に全ての記事から<script>タグを削除して様子を見たいと思います。

twitter側で対策がされたらスニペットを削除すれば元に戻ります。

参考：https://www.dayonepatch.com/topic/15105-please-always-spoiler-tag-sensitive-content-twitter-posts-crashes-the-entire-page-for-many-ios-users-otherwise/