jQueryを使ってTwitterのWidgetのHeadに外部化したCSSファイルを適用する。

Question

前提・実現したいこと

jQueryを使ってTwitterのWidgetのHeadに外部化したCSSファイルを適用しようと試みました。

まずはホスティングの段階から苦戦し、FirebaseでのCSSファイルの外部化は諦めました。Github PagesでCSSファイルの外部化をすることにしました（これは以前も使っていたことがあり成功）。

ちなみに貼り付けるTwitterのWidgetはhttps://publish.twitter.comで作成しました。配置する数は2つで1つは@IDのWidget、もう1つはリストのWidgetです。どちらもタイムライン形式を選択しました。

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

Refused to apply style from 'https://raw.githubusercontent.com/*ID*/*ID*.github.io/master/widget.css' because its MIME type ('text/plain') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Google Chromeで確認したところ、上のエラーメッセージが出ていました。要素の検証では下のようにWidgetのHead部分の中に<link>が埋め込まれてはいました。

<link href="https://raw.githubusercontent.com/*ID*/*ID*.github.io/master/widget.css" rel="stylesheet" type="text/css">

しかしTwitterのWidgetには何ら外部化ファイルの内容が反映されていませんでした。

該当のソースコード

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<a class="twitter-timeline" data-lang="ja" data-height="600" data-theme="light" data-link-color="#E81C4F" href="*Widget1*">Widget1</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<a class="twitter-timeline" data-lang="ja" data-height="600" data-link-color="#E81C4F" href="*Widget2*">Widget2</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<script>
function changeTwitterWidgetDesign(){
  var $twitter_widget = $('iframe.twitter-timeline');
  var $twitter_widget_contents = $twitter_widget.contents();
  
  if ($twitter_widget.length > 0 && $twitter_widget[0].contentWindow.document.body.innerHTML !== ""){
    $twitter_widget_contents.find('head').append('<link href="https://raw.githubusercontent.com/*ID*/*ID*.github.io/master/widget.css" rel="stylesheet" type="text/css">');
  }
  else {
    setTimeout(function(){
      changeTwitterWidgetDesign();
    }, 350);
  }
}

changeTwitterWidgetDesign();
</script>

試したこと

Googleでエラーメッセージを検索しました。type="text/css"を書き忘れており、それを書いたら直ったというやりとりは見つかりましたが、ソースコードの通り記載されているので解決しませんでした。
TwitterのWidgetが廃止になる前に私自身が作成したTwitterのWidgetには、今もまだ外部化ファイルのCSSが適用されており、デザインも反映されています。しかし外部化したCSSファイルを適用するという原理は変わらないので関係ないのではないかと思います（素人なのでわかりません）。

エラーメッセージから素人なりに考えたところ、外部化されたCSSファイルを「text/plain」として認識しているためにスタイルが適用されていないのだと思います。しかし「text/css」と指定しているのに何故でしょうか？また、「text/plain」というのもわかりません。

因みに外部化したCSSファイルの中身は圧縮してあります（オンラインサービスを利用）。

iframeのHeadに外部化したCSSファイルを適用するコード

余談です。気になるので良かったら教えていただきたいです。以下のコードでiframe（TwitterのWidget）に外部化したCSSファイルを適用しようとしたところ、要素の検証ではHeadに<link>が埋め込まれませんでした。これは何故でしょうか？上に貼り付けてある（埋め込みに成功している）コードと何が違うのでしょうか？

jQueryはおろかJavascriptの知識も皆無といっていいのでさっぱりわかりません。

上のコードは何かを条件として適用させようとしているものと推測しています（Timeoutは待ち時間で繰り返す？）。下のコードは有無を言わせずにシンプルにHeadに埋め込むものだと思います。何故下のコードではHeadに埋め込むことすらできないのかが知りたいです。

<script>
$(window).load(function(){
	$('iframe.twitter-timeline').contents().find('head').append('<link href="(URL)" rel="stylesheet" type="text/css" media="all" />');
}
</script>

Answer 1

raw.githubusercontent.com が配信しているファイルが text/plain、いわゆる普通のテキストファイルの形式の MIME タイプをレスポンスヘッダーに付けて配信していますので、CSS ファイルとして解釈されません。

また <link> タグに type="text/css" を付けても、最近はブラウザのセキュリティの関係で弾かれます。

解決策ですが、Github ページを使ってらっしゃるので、

https://****.github.io/widget.css

を使えば外部向けの URL として良いと思います。また、Github ページでないリポジトリのファイルを使いたい場合は、RawGit を利用すると良いですよ。

---

iframe の中身を JavaScript で操作するには、基本的に親ページと iframe 内のページが同一ドメインでなければなりません。これもまたセキュリティの関係で、Same-Origin Policy に違反して弾かれてしまうのが理由です。

Comments

[退会済みユーザー]

凄く申し訳ないのですが、前半部分で仰っていることが理解できません・・・。
もちろん私の知識不足によるものです。

しかし、頂いたアドバイスの通りに外部向けのURLを置き換えたところ、無事に反映されました！
本題はこれで解決してしまいました・・・。
Githubについての知識もかなり薄いのが原因だったみたいですね。

もしも良ければですが、余談の部分にも答えていただけないでしょうか？
できるだけコードをシンプルにしたくて・・・使っているソースコードは最適解でしょうか？

[退会済みユーザー]

重ねて申し訳ないのですが、CSSのURLはマスクしていただけないでしょうか？
マスクし忘れていたのが原因ですが、公開する気が無かったのも事実です。
同じエラーで見る人もわかる形の範囲で、マスクしていただけると助かります。

[yhg]

あれ、というか Twitter のウィジェットの中身の iframe って操作できるものなんですか。CORS どうなってんだろう。

要素の検証というと、デベロッパーツールのコンソールに直打ちした場合ということでしょうか？いまいち私も分かりませんが CORS とかのセキュリティー周りが関係してるのかもしれませんね。