きな粉もち.net

.NET関連仕事に携わっています。OSSのソースを読んで気がついたことを中心に呟いたりブログに投稿したりしています。最近はUiPathを使ったRPAも研究中。気軽にフォローやツッコミよろしくおねがいします! Gitはここを使っています https://github.com/kinakomotitti

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

この記事の目的

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


本題

★どんな現象?

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

以下の手順で現象を再現できます。
1)SlideShareでEmbedのリンク先をコピーする
f:id:kinakomotitti:20181117212857p:plain
2)画面Aのテキストボックスに、Slideshareのリンク先を貼り付ける
f:id:kinakomotitti:20181117212903p:plain
3)画面Bへ遷移する。※画面BのViewには、@Html.Raw("画面Aで入力したSlideshareのリンク")としてSlideshareを表示させる
Chromeを使っている場合、以下のように表示される。
f:id:kinakomotitti:20181117212911p:plain
Edgeを使った場合以下のように正常に表示される。
f:id:kinakomotitti:20181117212918p:plain


★原因は?

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

ご利用中のブラウザ(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側でブロックされているようです。

★対応は?

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

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


まとめ

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