Chrome × 「このページは動作していません」エラー × 自分なりに対応してみた

この記事の目的

この記事では、
「chromeでslidesareのリンクがうまく表示出来なかった」問題に対する調査結果のまとめ
を目的としています。

本題

★どんな現象？

---

Chromeを使って、Slideshareのリンクを@Html.Raw("Slideshareのリンク")で表示しようとすると、次のようなエラー画面が表示される。


以下の手順で現象を再現できます。
１）SlideShareでEmbedのリンク先をコピーする

２）画面Aのテキストボックスに、Slideshareのリンク先を貼り付ける

３）画面Bへ遷移する。※画面BのViewには、@Html.Raw("画面Aで入力したSlideshareのリンク")としてSlideshareを表示させる
Chromeを使っている場合、以下のように表示される。

Edgeを使った場合以下のように正常に表示される。

★原因は？

---

以下のサイトに詳しい情報がありました。
以下抜粋

ご利用中のブラウザ（Chromeバージョン57から）の仕様により、SSL化されていないURLが送信先に指定されている個人情報の入力ページは、原則表示されないよう変更されたことによる影響と思われます。

www.y-ml.com

今回、貼り付けていたリンクは以下のようになっています。

<iframe src="//www.slideshare.net/slideshow/embed_code/key/u6WNbsR5worSzC" width="595" height="485" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe> <div style="margin-bottom:5px"> <strong> <a href="//www.slideshare.net/EdurekaIN/what-is-artificial-intelligence-artificial-intelligence-tutorial-for-beginners-edureka" title="What is Artificial Intelligence | Artificial Intelligence Tutorial For Beginners | Edureka" target="_blank">What is Artificial Intelligence | Artificial Intelligence Tutorial For Beginners | Edureka</a> </strong> from <strong><a href="https://www.slideshare.net/EdurekaIN" target="_blank">Edureka!</a></strong> </div>

iframeタグのsrc="//www.slideshare.net/slideshow/embed_code/key/u6WNbsR5worSzC" となっているところが、SSL化されていないURLとして認識されたため、Chrome側でブロックされているようです。

★対応は？

---

考えられる対応は２つかなと思います。
１）あきらめてChrome以外のブラウザを利用する
→Edge、IEでは動作することが確認できました。

２）サーバ側でリンクを取得してViewに埋め込む。
→サーバサイドで埋め込む分には問題なく動作することを確認しました。

まとめ

ブラウザの動作ではまるとは思っていませんでした。ブラウザの仕様を把握することも大切ですね( ﾟДﾟ)