FC2ブログAOSSL化後の外部直リンク画像はどうなる?

FC2ブログのあれこれ
2017/05/30
12
vanillaice (Akira)
vanillaice (Akira)
AOSSLSSL

推測・予測ですけど (´・ω・`)
外部直リンク画像というのは簡単に言うと FC2ブログの画像サーバーにアップロードされていない画像 を表示させている場合がそれにあたります。

例えば

  • 他ブログサービスにアップロードした画像をそのままのアドレスで掲載する。
  • 画像ホスティングサービスにアップロードした画像を〜以下同文。

1は良くないですよ (´・ω・`)
これは非常識と言っても良い。各ブログサービスは画像を保存するためにサーバーを貸しているわけではありませんので、単に画像保存目的で開設、記事は別サービスで、といった使い方は凍結されても文句言えない。まして他の方の所有する画像をそのまま直リンクなどもってのほか(いずれもYahoo!ブロガーにめっちゃ多い)

ここでは「正しい直リンク」って言うんでしょうか。最低でも「自分が契約しているホスティングサービスへリンク」に限定して話しをすすめます。他人の画像を勝手に直リンクしてるとか、知らんわそんなやつ

本記事の「リンク」とは「画像」「スクリプト」などのファイルを指し、「他者サイト」は意味しません。

今後の基本は「内部リンク」

今まではブログが https スキームを有していることの方が稀でしたので、乱暴な言い方をすれば直リンクし放題というか。ところが現在ではいろんなサービスがSSL化を進めているわけで、SSL化した暁には httpスキームの画像表示は原則として不可 となります。

ブログサービス運営は自社のサーバーにある画像の面倒はみるでしょう。SSL化に伴う準備として、これまでアップロードされた画像のスキームを自動で置き換えるとか。あるいはスキームを省略するとか(FC2の選択はこちらのもよう)
でも外部サービスの画像に対して責任を持つ道理が無い。ですから「外部の画像が表示されなくなった。FC2クソが。」とかはやめましょう。そういうことを言う人は「バカ」です。単なる知恵足らずのバカ (´・ω・`)
ワタクシはその手の「バカ」が大嫌いです (▪⌔▪)

Amebaの例を挙げますが、どうやらあちら様は外部直リンク画像を SSL対応プロキシを一旦経由させることで表示を行っている ようです。親切ですねぇ (´・ω・`)
アホじゃね?って思ったことは内緒だよ…(ボソ)
個人的にはそんなことしなくて良いと思うなぁ。そんなことに労力割くぐらいなら自社サービスの充実に尽力して欲しいです。お伝えしておきますが、私はこのブログ内でホスティング直リンクめっちゃしてます(笑)
だけれどもFC2さんにそれをカバーしてもらおうとは思いません。地道に書き換えます。はい(笑)

直リンクを許可している画像ホスティングサービスでSSL化しているところは今のところ発見できません。DropboxやGoogle Driveなんかは https: ですがホスティング機能は削除されているようですし(外部に参照表示させるのが不可、保存に特化、という意味です)
直リンク掲載の有名どころ photobucket を始めとするこの系列のサービスは今後どうなるのか。そちらも気になるところ。

FC2で使う画像はFC2サーバーにアップロードする、というごくごく当たり前のことを当たり前にすれば良いだけです。FC2は画像の受付についても他社サービスと比べてかなり有利というか。強制的にサイズが縮小されることもありませんし、許可容量についても10GBですか?確か(調べろよ)
プロアカウントについては無制限と破格な内容ですのでよほど問題ないと思います。

混在コンテンツの「アクティブ」と「パッシブ」

画像については「利用サービスのサーバーへアップロード」して使う、というのが基本だとして。
画像の掲載というのは <img> だけではないんですね。backgroundというのもあります。backgroundにはhtmlの background属性 とCSSの backgroundプロパティ あるいは background-imageプロパティ の2つがあります。<img> というのはhtmlタグ(html要素)です。

画像のアドレスが http:スキームのままだと 混在コンテンツ という大変よろしくない状態になるわけですけども。混在コンテンツというのは安全通信内に非安全通信が紛れ込んでいる状態のことで、平たく言うと ページ(ブログ)自体は https だけど、そこに掲載されている一部内容(画像など)が http アクセス指定されている ということです。

ここで注意ですが、外部サイトへのリンクとかありますよね。外部サイトへ行くということは、現在ページから退出することになります。その場合には「混在コンテンツ」として扱われません。何故ならそれは他所様の事情であって、現滞在サイトとは無関係。そしてそこへ訪れるかどうかは閲覧者の意思に委ねられます。ですが 画像 やプラグインを動かすための スクリプトファイル などは、ページを開いた時点で既に表示あるいは動作しなければいけないですよね。ということは、閲覧者の意思とは無関係にページ表示時点で既に非安全通信を行わなければいけなくなります。こういう場合が 混在コンテンツ に相当します。

混在コンテンツは大別して2通りあります。

パッシブ混在コンテンツ(受動)

https通信ページ内でhttp通信できるコンテンツ。
対象情報の差し替えや対象監視(盗聴)による他情報内容を推察される恐れ。

主な要素

<img> <video> <audio> <object>

など

アクティブ混在コンテンツ(能動)

https通信ページ内でhttp経由からページ内容全て、あるいは一部のDOMにアクセスできる。
ページ動作の変更、機密性の高い情報の窃取も可能。
パッシブな混在コンテンツの脅威に加え、より危険の高い状態となる。

主な要素
url値 を持つ全て (background掲載の画像はここに含まれます)

<script> <iframe>

など

アクティブの方はscriptが含まれてます。何かしらのJS系プラグインを導入しようと思った時に、外部ファイルが http であった場合にはアクティブ。SSL化した後にはスクリプトファイルがhttpsであるか否か要確認です。

----- 追記 2017.6.1 -----

ブログカード について
このページでも利用しています。ブログカードとは他者コンテンツの 引用及びリンク に用いるものですが、以下の注意点があります。

  • 引用ページでOGP設定が行われていることが前提
  • SSLについてチェックするべきは2項目

後者の「2項目」は

  • スクリプトファイルがhttpsになっているか
  • 引用するサイトがhttpsページになっているか

はてなブログカード は https ではありません。当該ページで利用している Embedly は、サイト自体は非SSLのhttpですが、提供ファイルは https なので利用できます。あとは引用先がhttpsであるかを確認します。これらブログカードは iframe での掲載がほとんどですので、相手方の通信プロゥトコルの確認も必須です。

----- 追記 ここまで -----

画像をimgではなくbackgroundとして掲載するのはどんな時かというと、みなさんがページ全体に 背景画像を敷いたり、ヘッダーに背景を付けたり と、そんな場合です。よほど無いとは思いますが、ヘッダーに画像を…と思った時にFC2ブログ画像サーバーではなく、他サイトからの直リンクでしかもそのサイトがhttpだった場合にはアクティブ。ちなみにYahoo!ブログでいわゆる「壁紙」を利用している方で、枠の画像が一つでも外部直リンクになっている場合、超アクティブ(笑)
Yahoo!ブログ運営はbackground掲載された画像については対策を行っていません。何故ならYahoo!は元々「htmlが自由に使えます。」とは一言も言ってない。ユーザーが勝手にやっているのだからYahoo!の責にはなりません。

まとめ

SSL化対策というとどうしても「img掲載画像」に目が行きがちですが、実際にはそれだけでは足りず、あらゆるsrc属性をチェックする必要があります。

スクリプトファイルについては例えばjQueryなどのプラグインで cdn を利用した配布が有る場合。提供アドレスが相対になっている場合にはまず https も http も双方でアクセスできる状態になってます。httpsサーバーは https通信でもhttp通信でもファイル提供できますが、httpサーバーはそうはいきません。だってhttpsの方は基本は費用がかかるわけですし。このあたりの理屈屁理屈は説明するまでもないかと思います。

一番手っ取り早いのはやはり「画像やスクリプトなどのファイルは掲載先のサービスサーバーにアップロードする」ことでしょうかね (´・ω・`)
FC2がSSL化したらYahoo!ユーザーが画像保管庫的に使うようになるんだろうな。直リンク専用って感じで。たぶん。Yahoo!には何故かフラッシュに執着するユーザーがすごく多いので。え。いまさら?! ( ̄∀ ̄;) って感じだけど。年齢層が関係するんでしょうかね(笑)
そういうのはどんどん凍結しちゃって良いと思う次第。他ブログユーザーから不利益を被るのは(・A・)イクナイ

Related post

Comments  12

ぼっちん
2017/06/01 (Thu) 12:34

To Akiraちゃん

記事タイトルの「FC2ブログAOSSL化後の外部直リンク画像はどうなる?」の件ですけど、真っ先に「ブログカードが使えなくなってしまうんだろうか?」って部分が私の一番の心配のタネ(爆)
最近は私も「はてぶろカード」はやめて、Akiraちゃんも使い始めてる?(笑)「Embedly」を自分なりにカラフルにカスタマイズすることに凝り始めてるんですけどね~。
Embedlyっていまは無料利用だと非SSLですからその部分からも「使えなくなってしまうの?」って (^_^; アハハ…

まぁ、傍観するしかないですかね~ (^^ゞポリポリ

Akira
2017/06/01 (Thu) 12:49

To ぼっちんさん

こんにちは (●'0'●)/

ブログカードのことも追記した方が良さそうですね。
はてなはアウトです(笑)
embedlyの方はサイト自体は非SSLだけれども、動かすスクリプトファイルはSSLなんですよね。
なので問題なしです。使えます ╭( ・ㅂ・)و
問題ははてなの方の書き換え(笑)

ちょっとこれから学校の修学旅行説明会とやらに行ってきます。
ってゆーか、うちもう3人目だから説明聞く必要ないんだけど ( ̄∀ ̄;)
でも娘が来てって言うからー (´・ω・`)
戻ったら追記します。
いってきま (´・ω・)ノシ

ぼっちん
2017/06/01 (Thu) 15:30

To Akiraちゃん

やっぱりね~(笑)
私はもうだいぶEmbedlyに書き換えが進んで来てる(笑)けど、Akiraちゃんはいっぱいはてぶろカードがあるから大変ですね~(^_^; アハハ…
置換スクリプトでも作らなくちゃ(笑)

ただ、Embedlyのデザインカスタマイズやってて気がついたんですけど、1記事内に複数貼っても全て「同じデザイン」になってしまうみたいでびっくりです。
たとえば同一記事内に3種類のデザインCSSのEmbedlyカードを貼ったとして、最後に貼ったデザインCSSで全部同じ表示になってしまう(笑)
そう言う仕様になってるみたいですよね。

> ちょっとこれから学校の修学旅行説明会とやらに行ってきます。

ハーイ(^O^")/ 行ってらっしゃい、お気を付けて~。

Akira
2017/06/01 (Thu) 16:26

To ぼっちんさん

スマホからざっと記事内容を拝見しました ( ゚Д゚)ノ
で、解決法…というか、今とりあえず頭に浮かんだものはあるのですが。
なにせ今スマホなもので(笑)
夜改めてCSS仕様の説明と解決できそうな方法をお伝えしますね。
またのちほど ヾ(*'-'*)

ってゆーか!
ぼっちんさん、はてなの書き換えもうやってるの?
わー。私全然手付かず。
どうしよう(笑)

ぼっちん
2017/06/01 (Thu) 16:44

To Akiraちゃん

あっ 素早いお返事をありがとうございます ^^

> で、解決法…というか、今とりあえず頭に浮かんだものはあるのですが。

えっえっ? デザインCSSを別々に切り分け出来るんですか? なんとも嬉しいそのお言葉 ^^
では、楽しみにさせて戴きます~ o(^o^)oウキウキ

> ってゆーか!
> ぼっちんさん、はてなの書き換えもうやってるの?

ハーイ(^O^")/ もう予期してました「はてぶろ」のはダメってことで(爆)
でも「どこにはてぶろカード載せたっけ?」って探すのが大変で(^_^; アハハ…
まぁ、私のは数は少ないからなんとかなるでしょう(爆)

Akira
2017/06/01 (Thu) 20:57

To ぼっちんさん

次男とデートしておりました。
バスケのお高いシューズを買わされただけですが o(`ω´*)o

長くなります、と最初にお伝えしておきますね。
難解かどうかは、たぶんぼっちんさんにとってはさほどでもないと思われる。

【styleタグとstyle属性の違い】
まず
> 1記事内に複数貼っても全て「同じデザイン」になってしまう〜
これはembedlyの仕様ではないんです。
CSSの特性であり、styleタグの特性でもあります。
ちょっとややこしいですが、style属性とstyleタグというのは別ものです。

style属性
<div style="ここにCSS内容"></div>

styleタグ
<style>ここにCSS内容</style>

styleタグの方は「タグ」ですから開始タグ・終了タグがあります。
その内容はスタイルシートに記すのと同じ書き方です。
例)
<style>
.test {
font-size: 13px;
}
</style>

で、このstyleタグなんだけども、通常は<head>〜</head>内、つまりhead情報内に書くものです。
html5では<body>内に書けるようになった、とドラフトにありましたが、実際にはそのまま書くと構文エラーです。
scoped属性があるのが正式… というか、後述。

styleタグに書かれた内容というのは、その直近の要素に「だけ」作用するものではありません。
逆にstyle属性というのは記述された要素「だけ」にダイレクトに作用します。

例えばembedlyが記事内に2つあるとします。

<div class="embedly-card">
一つ目内容
</div>
<div class="embedly-card">
二つ目内容
</div>

そして例えばそれぞれにstyleタグを書いたとします。

<div class="embedly-card">
一つ目内容
</div>
<style>
.embedly-card {
background-color: red;
}
</style>
<div class="embedly-card">
二つ目内容
</div>
<style>
.embedly-card {
background-color: blue;
}
</style>

一つ目は赤背景、二つ目は青背景、というつもりで書いたとします。
ところが実際は両者共に青背景になります。
何故なら、styleタグ内の
.embedly-card
というクラス名は両者に共通だからです。
そしてこのクラス名はユーザーが任意でつけているわけでなく、embedly側のスクリプトでもってあらかじめ設けられているもの。
つまりユーザーが変更することはできません。

何故赤背景が破棄されるかというと、CSSの基本は上書きだからです。
重複した場合、より後方にある指定が前方のそれを「上書き」します。

<div class="test">あいうえお</div>
<div class="test">かきくけこ</div>
<style>
.test {
color: black;
}
</style>
<style>
.test {
color: white;
}

上記の場合、「あいうえお」も「かきくけこ」も「白」文字になります。

一旦投稿します。

Akira
2017/06/01 (Thu) 21:17

To ぼっちんさん②

仮にembedlyでstyleタグではなくstyle属性が使えるとしたら、以下のようになります。

<div class="embedly-card" style="background-color: red;">
一つ目内容
</div>
<div class="embedly-card" style="background-color: blue;">
二つ目内容
</div>

この場合は一つ目背景は「赤」に。二つ目背景は「青」にすることができます。
何故なら指定要素にダイレクトアタックだから。

これが「同じスタイルになってしまう」理由です。

---------

【style属性は使えません】
embedly利用時にstyle属性は使えません。
何故ならスクリプトでもってhtml内容を書き出しているからです。
embedlyで書き出されるhtml内容は以下の通り。

<div class="pair-bd">
<div class="art-bd">
<a target="_blank" href="リンク先" class="" style="padding-bottom: 46.8553%; background-color: rgb(255,255,255);">
<img class="art-bd-img" src="画像アドレス&width=横幅" style="opacity: 1;">
</a>
</div>
<div class="txt-bd">
<h1 class="title">
<a target="_blank" href="リンク先">
タイトル
</a>
</h1>
<p class="description">
概要
</p>
<a class="action" target="_blank" href="リンク先">
この記事を***で読む >
</a>
</div>
</div>

でもこれ、embedlyでの取得コードに出てないですよね。
提供されるのは以下の通り。

<a class="embedly-card" href="リンク先">タイトル</a>
<script async src="//cdn.embedly.com/widgets/platform.js" charset="UTF-8"></script>

こんな風に、タイトルとスクリプトしか出てきません。
そしてこのスクリプトにアクセスすることでhtmlが生成されてます。
コード取得時にhtmlが出てきているものならばなんとでもなりますが、JSでのinnerHTMLという方法ですのでユーザーからはhtml内容に対し不可侵。

なので「style属性は使えない」という点が重要。

---------

【styleタグを記事内に書くと…】
構文エラーです(笑)
バリデートにあまりこだわりがなければ、まぁ良いのかな、と思う。

html5でのstyleタグ(style要素)というのは

<style scoped="scoped">〜</style>

上記のような書き方で、CSSスタイリングを与えたい「親要素」に挟まれる形で書くことによって、styleタグでは基本的には「できない」ダイレクト指定ができるようになります。
ですがブラウザ側が全然実装してない(笑)
現状だとFirefoxのみだと思います。
ってゆーかね、このscoped属性ってすごく嫌われているので(デザイナー, 技術者, Googleセンセ)、たぶんそのうち廃止されると思う(笑)
html5.2のドラフトをまだ読んでないんだけど、もしかしたら既に…?

というわけで、styleタグで特定要素だけにスタイリング、というのはできないと思った方が良いですね。
もちろん「embedlyが複数の場合は」という但し書きつきで。
構文エラーについてはぼっちんさんがどう考えるかによりますが、私ならやっぱり記事内でなくスタイルシートの方に書くかなぁ (´・ω・`)
使わない時は無駄になってしまうけど。

一旦投稿。

vanillaice (Akira)
Akira
2017/06/01 (Thu) 21:29

To ぼっちんさん③

【スタイルを変えるには】
肝心なここです。
● CSSの nth-of-type というのを使うのが一つの方法。
● クラスを追加する。
● embedlyを入れるブロックを一つ増やすこと。
おすすめは一番最初のやつ。なのでそちらを説明しますね。

まず、記事内に二つあると仮定します。

<script async src="//cdn.embedly.com/widgets/platform.js" charset="UTF-8"></script>
<a class="embedly-card" href="リンク先①">タイトル①</a>
<a class="embedly-card" href="リンク先②">タイトル②</a>

こうですよね。
スクリプトは一つで良いので、上記のような形になると思います。
styleは2つ要ります

<style>一つ目内容</style>
<style>二つ目内容</style>

これは1個にまとめます。そして1つ目のembedlyへのスタイルと、2つ目のそれへのスタイルを明示します

<style>
.embedly-card:first-of-type {内容}
.embedly-card:nth-of-type(2) {内容}
</style>

これで分けることができます。
3つ目以降は
.embedly-card:nth-of-type(何番目){内容}
を追加します。
これが一番良いと思いますよ。
一度お試しくださいね。
私の方では動作確認済みですが、SEO embed のタイプだとhtml内容が違いますのでこれではダメです。
とりあえずこんなところで。
長くなった ^^;

* 省略してしまいましたが、クラス名は
.embedly-card
ではなく
div.embedly-card
って書いてくださいね。
でないとa要素にも同じクラス名がついてますのでおかしなことになります。

ぼっちん
2017/06/01 (Thu) 22:41

To Akiraちゃん

なんと、大変ご丁寧にかつ解りやすい解説をしてくださって、ほんとにありがとうございます ^^
全て「なるほど、なるほど、うんうん(^-^)」ってスパッスパッと私のボケ気味な脳みそに刺激が突き刺さって来て、心地よさまで感じてしまいました ^^
けっしてM性じゃないんですけど(爆)

バリデートエラー(笑)については分かってましたけど、無視こいてました (^_^; アハハ…
HTML5では「書けちゃう」から無視も起きるなんちゃって(笑)

つい先日にスタイルシートの勉強をしてた時に
------------
<style>
first-of-type {内容}
nth-of-type(2) {内容}
</style>

nth-of-type(5)
------------
くらいまで書いてあるソースをチラっと見て「おや、この書き方ってなんだろ~? 後で勉強してみよう!」って思ったままになってたんですけど、ここでまた目にするとは(笑)

はやく「自分の知識」として吸収出来るように勉強致して、動作確認も取れるようにします。
素晴らしいご教示をほんとにありがとうございます、感謝感謝です m(_ _)m

■ 追記させて戴きますね 2017/06/02

ご教示戴きました方法で完成致しました ^^
ほんとにありがとうございました。
ただ、やっぱり同一記事内でデザインの異なるブログカードを複数載せる意味(笑)に、いまになって「何故そんなこと考えたんだろ~ (^_^; アハハ…」なんて思うようになってしまいました。
Akiraちゃんのご指導のおかげでやっと実現して、実物を客観的に眺めてたら「なんだこりゃ(爆)」って異様な眺めになっちゃってたんです (^^ゞポリポリ

従って、素直に同一記事内でのデザイン混在をやめることに致しました。
いまは、スタイルシートはhead内記述にしてありますが、バリデートエラーは無視(笑)してでも記事内記述も「なかなかおつな使い方も出来るねぇ」ってのが本音です(笑)

大変なお時間を割いて下さってご教示戴いたのに、申し訳ないオチになってしまったようでほんとに申し訳ございません。
お詫び申し上げます m(_ _)m

vanillaice (Akira)
Akira
2017/06/03 (Sat) 10:56

To ぼっちんさん

> 申し訳ないオチに〜

いえいえ。私の方は一向に構いません (●'0'●)/
例えばAサイトから引用2件、Bサイトから3件、といった場合にサイト毎に背景色を変えておくと閲覧者にはわかりやすいかもしれないですよね。
1ページ内でたくさん使う場合には。
なので覚えておいて損はないです :)

> スタイルシートはhead内記述に〜

これは単なるアドバイスですので、さほど重要視しなくても良いです、という前置きで(笑)
htmlのhead情報内にCSSを書く時というのは、ファーストビュー対策であることがほとんどです。
ページが表示される際に目に見える範囲だけをとにかく素早く整形したい、という場合ですね。
そしてhead内でインライン化したCSS(<style>〜</style>)をhead内に、残りはlinkでJSを利用して</body>の直前に、という方法になるのですが。
ぼっちんさんが<style>〜</style>という形のままhead内に入れたのであればそれは「インラインスタイル」です。
目に入る部位だけ素早く整えて表示しておけば全体の読み込みが「速い」ように感じるという、まぁ、錯覚でもありますけれど。
で、embedlyはそもそもスクリプトでもって描画するものなので元々の描画自体が遅いんです。
ですからCSSはインラインでheadに入れずともスタイルシート内で十分というか、もっと言えばスタイルシート末尾で良いのではないかと。
わざわざ小分けしてheadに入れるのはちょっともったいないかな、という気がします。

ぼっちん
2017/06/04 (Sun) 13:41

To Akiraちゃん

いろいろとご教示をありがとうございました。
もうもう、AkiraちゃんブログはWebデザイン知識の宝の山でございます ^^
毎日「今日も何か目新しいことが載ってるかな~♪」なんてo(^-^)oワクワクしながら覗かせて戴いてるんですから(笑)

今回Embedlyをネタにご教示戴きましたCSS知識、今後に於いても活用させて戴きます。
日常的にお忙しい中でこんなにもご親切にご教示下さってほんとにありがとうございました。
改めて御礼申し上げます m(_ _)m

Akira
2017/06/04 (Sun) 17:35

To ぼっちんさん

いえー。こちらこそお勉強になります。
いつもありがとうございます ヽ(`▽´)/

コメントに関する注意事項
  • テンプレートに関するご質問は各テンプレート専用記事でのみ受付致します。また、よくある質問をまとめているページも事前にご参照ください。
  • 専門的なご質問の場合、記事内容と明らかに関連の無い内容はお控えください(雑談の場合はその限りではありません)
  • 第三者が不快と感じる内容や論調でのコメントはお控えください(性的,高圧的,暴力的など)