JavascriptでTwitterに外部サイトからの画像の要素を追加したいです。

Tampermonkey(JS)でTwitterに外部サイトからの画像の要素を追加したいです。

twitterのサイトに外部サイトの画像を用いた要素を追加したい。
もしできないなら理由を詳しく知りたい。
もしできないなら代案をいただきたい。

前提

JavascriptでTwitterの背景をh‌ttps://onimai.jp/episode/img/01_02.jpgの画像にしたいです。サイトの最背面にサイトの横幅に合わせた要素を追加しています。
Twitter以外のサイトでは背景の画像になる要素を追加できますが、TwitterではTwitter以外の外部のサイトの画像が取得できないようです。
ソースコードは以下のようになっています。Twitter内部の画像は取得できるようです。

発生している問題・エラーメッセージ

Twitterで、Tampermonkeyにより実行されるJavascriptにより外部サイトから画像を取得しようとすると、失敗する。

Refused to load the image 'https://onimai.jp/episode/img/03_06.jpg' because it violates the following Content Security Policy directive: "img-src 'self' blob: data: https://.cdn.twitter.com https://ton.twitter.com https://.twimg.com https://analytics.twitter.com https://cm.g.doubleclick.net https://www.google-analytics.com https://maps.googleapis.com https://www.periscope.tv https://www.pscp.tv https://media.riffsy.com https://.giphy.com https://media.tenor.com https://c.tenor.com https://.pscp.tv https://.periscope.tv https://prod-periscope-profile.s3-us-west-2.amazonaws.com https://platform-lookaside.fbsbx.com https://scontent.xx.fbcdn.net https://scontent-sea1-1.xx.fbcdn.net https://.googleusercontent.com".

該当のソースコード

javascript
1
2var img = document.createElement("img");
3img.src = "https://onimai.jp/episode/img/03_06.jpg";
4img.style.width = "100%";
5img.style.position = "fixed";
6img.style.top = "0";
7img.style.left = "0";
8img.style.zIndex = "-1";
9document.body.appendChild(img);

試したこと

画像を別の外部サイトのものに変えましたが、直りません。
画像をTwitter内部のものに変えたら、直りました。

補足情報（FW/ツールのバージョンなど）

ソースコード(JS)をTampermonkeyで実行しています。
他のサイトでも同様に動きます。

...

2023/02/02 11:28

失礼な質問申し訳ありません。ご指摘ありがとうございます。恐縮ながらこのサイトを利用するのが初めてで、不足している点が分かりません。改善可能な点をより具体的にご指摘いただけると非常にありがたいです…。また、試すべきことの方向性を示していただければ、できる限りの修正をしていきたいと考えておりますので、ご教示賜りたいと思います。

行動規範の内容に同意します

回答1件

ベストアンサー

エラーメッセージの通り CSP の img-src で画像のロード元が制限されています。通常の JavaScript ではこの制限を外すことはできません。
Chrome extension の chrome.webRequest.onHeadersReceived などを使って Content-Security-Policy ヘッダを書き換えれば可能になるかもしれません。

投稿2023/02/02 21:30

int32_t

総合スコア20845

...

2023/02/03 09:50

回答ありがとうございます。初心者で、エラーメッセージの読み方がわからないのに加え、CSPというものがあるというのを知らず、Twitterの何らかのソースコードの一部と競合して動かないのかと思っていました。拡張機能で治すことも考えましたが、CSPの理解が足りていないので、とりあえずはTwitterにも同様の画像があったので、Twitterの画像を使うことにしました。またJavaScriptやHTMLへの理解が進んだら色々やってみようかと思います。

行動規範の内容に同意します