Twitterの`ref_url`トラッキングパラメータによりツイートの動画再生ができないのでどうにかした

公開日:2019-04-11
最終更新:2019-05-30

はじめに

Webページに埋め込まれたツイートをクリックすると、そのツイートをtwitter.com上で見ることができます。
その時、ref_urlというクエリパラメータで、どのサイトから来たのかがトラッキングできるようになっています。
そのref_urlの値がとても長かった場合、つまり埋め込んだWebページのURLがとても長かった場合、twitter.com上のツイートに添付された動画が、The media could not be played.エラーで再生できなくなるというバグがあります。
(まぁ今回の場合はその値が1400文字もあるので想定外なのは当然ですが…)

これをユーザースクリプトで防いだ話です。

原因

Webブラウザのコンソールでネットワークを監視してみた結果、API呼び出しで431 Request Header Fields Too Largeが起きていました。
Refererリクエストヘッダーが長過ぎるがゆえのようです。

対処

対処法は簡単。ref_urlというクエリパラメータを削除するだけです。
ユーザースクリプトで削除するようにしてあげます。

// ==UserScript==  
// @name         Kill Twitter `ref_url`  
// @namespace    https://okayu.qrunch.io/entries/w6yW37a2mEHuL4AT  
// @version      1.0.0  
// @description  `ref_url`というクエリ文字列が長すぎた場合に発生する動画再生ができなくなるバグを防ぐため削除する  
// @author       okayu  
// @match        https://twitter.com/*?*ref_url=*  
// @grant        none  

// @run-at       document_start  
// ==/UserScript==  

(function() {  
    'use strict';  

    const searchParams = new URLSearchParams(location.search);  
    searchParams.delete('ref_url');  
    location.search = searchParams.toString();  
})();  

特記事項は特にありません。
@run-atdocument_startにすることで即座にスクリプトを実行するようにしています。

おわりに

URLSearchParams便利。

記事が少しでもいいなと思ったらクラップを送ってみよう!
0
+1
@okayuの大して技術的ではないブログ

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする