NC3 3.2.1.1を常時SSL化するとfacebookなどが埋め込めません

y-nakaさん、こんにちは。さくらインターネットでNetcommonsを利用しているmikimaruと申します。

いま実験してみましたが、わたしの環境では、Facebookは埋め込みできました。
ただ、以前から苦労しているのはTwitterですので、同じ方法でお役に立てればと、いちおう書いてみます。

SSLの保護下にあるどこかの階層にHTMLファイルを置き、そこにFacebook等から得られた正規のコードを書いておきます。

ソースコード画面からiframeのタグを使って、そのhtmlを読み込みます。

これだけです。もし可能なら、お試しください。

NC3  3.2.1.1をSSL化したサイトを構築中に先に進めない状況となっています。

さくらインターネットのSSLサーバ証明書（Let's Encrypt）を取得しNC3のhtaccessを修正、applicication.ymlのfukkBaseUrlをhttpsに書き換えて、使用を始めました。動作はよくアドレスに鍵マークがつきログインも正常にできます。

しかし・・・SSLでない場合に可能であった、facebook googlemap 他SNSが埋め込めません。iframeのスクリプトが消えて表示されません。ネットでいろいろ検索したのですが、現在のところどの方法もだめです。

また、古いブラウザでは表示ができない状態です。ただ、Yahooはhttpsでも表示されます。

SSLが何かもわからない初心者が質問させていただいていますので、初歩的なことであればお許しください。

何か対処方法がございましたら、ご教授ください。よろしくお願いいたします。

mikimaruさま、ありがとうございます。やってみましたが、おそらく方法が間違っていたのだと思われますが、htmlをどこに置いてもはじかれて表示ができませんでした。

mikimaruさまは、NC3をSSLで運用される際に、どのような設定をされましたか？

私は、htaccess と　baseURLの変更だけを行いました。

y-nakaさん、ふたたびこんにちは。

すみません、先ほどは記憶違いであやふやなことを書いてしまいました。
わたしがTwitterを埋めこんでいたのはiframeのプラグイン上からであり、こうした記事投稿の画面にあるソースコードの欄ではありませんでした。記事投稿の画面で同じ方法を使うと、うまくいきませんでした。

階層のどこか（どこでもいいです）に、HTMLファイルを置くというのは、

そして、ファイルのURLを、iframeのプラグインを設置してそこから呼ぶ、という意味です。

これでお考えのようなことが上手くいくかどうかはわからないのですが、少なくともわたしは、表示できています。

以下のURLにあるTwitter欄は、この方式で書いています。
https://www.mikimaru.net/daynight/

もしかしたら、お話が噛み合っていないかもしれないのですが、その場合は失礼いたしました。

mikimaru さま　ありがとうございます。

NC2で制作したサイトには、htmlのページを入れることが可能ですが、同じhtmlをNC3に入れてアクセスすると「このアカウントでは指定したURLにアクセスができません」と表示されます。SSL設定をしていないNC3でも同様の表示になります・・・。

y-nakaさん、なるほど、そういったご事情でしたか。

さくらインターネットは無料でサブドメインを複数持てますので、Netcommonsとは別のフォルダにhtmlを設置して、そのフォルダをさくらのサブドメインとして登録し、そこから呼びだす方法も、可能かもしれません。さくらのサブドメインも何ヶ月か前にSSL対応になりました。もしお時間が許すようなら、お金はかかりませんので、お試しになってみるのもよいかと思います。

わたしの場合はSSL対応のレンタルサーバなど複数の場所が利用可能なので、昨日ご紹介した事例では、同じ階層の内部から呼び出しはしていませんでした。

Facebookについては、わたしの環境では、普通に記事投稿にソースで埋めこみして表示されたので、もし上記の方法がうまくいってもいかなくても、原因はわからないままになりますね。ほかの方からもご意見がいただけるとよいのですが。

mikimaru さま　何度もありがとうございます。サブドメイン使用など参考にさせていただきます。

ただ・・・先ほど　SSL対応のNC3サイトで inframeを設定し、いろいろサイトを埋め込んでみたのですが、SSLで無いサイトも表示できませんでした。同様の内容でSSL対応でないサイトで試すと、表示されます。何か重要なものを触ってしまったのでしょうか？それとも　無料SSLでは無理なのでしょうか・・・みなさんも同様の現象であれば、残念ですが今回はSSL設定をはずすしか方法がないのではと思います。リビジョンアップを待ちます。よろしくお願いします！！！

途中からすみません。

エディ・ケイ　ささきと申します。

現在運用されているさくらでのサイトに普通のhtmlのページを表示させる場合は、

NC3のインストールディレクトリ/app/webrootの下に置けばよいかと思います。（直下に置くことも可能かと思いますがNCとは別の独自のものということでディレクトリを作成しその下に置けばと思います）

/app/webroot/aaaといった「aaa」のディレクトリを作成しその下にaaa.htmlといったhtmlページを追加すればhttps://サイト/aaa/aaa.html　でアクセス可能となります。

ちなみにさくらで運用しているわたしのデモサイトで試してみて問題なく表示されることを確認しました。

https://demo-nc3.eddy-k.jp/aaa/aaa.html

です。一度ご覧ください。

後はmikimaruさんの方法で期待されていることは可能となるのではと思います。

途中からすみませんでした。

また、ひょっとして的外れな返信になっていればお許しください。

mikimaru さま　ありがとうございます。

NC2で制作したサイトには、htmlのページを入れることが可能ですが、同じhtmlをNC3に入れてアクセスすると「このアカウントでは指定したURLにアクセスができません」と表示されます。SSL設定をしていないNC3でも同様の表示になります・・・。

エディ・ケイ　ささき　様

mikimaru　様 ありがとうございます。

実は、htaccessはエディ・ケイ様の情報をいただき使用しています、お世話になっています。

あとbaseURLの部分にhttpsとしています。

アドバイスいただいたようにapp/webrootの下にディレクトリを作りhtmlファイルをアップしました。

結果

facebook、Javaで作動するカウントダウン、通常のテキストが正常に表示されました。また、iframeでも表示されました。これで、mikimaru様のfacebook挿入方法が可能となりました。

ただ、新たな問題が生じています。

新しく、質問をするべきですが iframeにほかのサイトを直接埋め込むことができません。つまり、SSL設定をした場合、iframeのモジュールが使用できない状態です。私の制作するサイトに特有な現象なのでしょうか、またはサーバースペック等が関係しているのでしょうか

また、サポートの終了したChrome等でSSL設定サイトの表示ができません。貴社サイトも閲覧できない状況となっています。ただし、yahooのサイトは閲覧可能です。

SSL設定は、初心者には手ごわいです。お時間がございましたら、よろしくお願いいたします。

現在制作中のサイトは（クローズ中ですが） https://www.shiso-sports.jp です。

y-nakaさん

エディ・ケイ　ささきです。こんにちは！

エディ・ケイのサイト閲覧ありがとうございます。

ただ、SSL化の情報はわたしもgithubに上がっていた情報をもとに実施したので、情報提供者に感謝ですね。

っで、「iframeにほかのサイトを直接埋め込むことができません。つまり、SSL設定をした場合、iframeのモジュールが使用できない状態です。」とのことですが、デモサイトで動作の確認をしましたが、特に問題なく表示されています。

https://demo-nc3.eddy-k.jp/動作確認

にてy-nakaさんのサイトをiframeプラグインにて指定し表示できているので、問題ないと思うのですが・・・

どのようなディレクトリー構成でサイトを構築されているかわからないので、何とも言えませんが、ひとつのドメインに階層をつくりそのひとつにNCを導入されているのでしょうか？

それが原因かもしれませんね。ちょっとあやふやな回答となりますがお許しください。

また、サポート終了のChromeでの表示できない件はちょっと調べていないので返答もできません。

お許しください。

では、うまく公開できること楽しみにしています。

がんばってください！

エディ・ケイ　ささき　様

mikimaru　様 ありがとうございます。

実は、htaccessはエディ・ケイ様の情報をいただき使用しています、お世話になっています。

あとbaseURLの部分にhttpsとしています。

アドバイスいただいたようにapp/webrootの下にディレクトリを作りhtmlファイルをアップしました。

結果

facebook、Javaで作動するカウントダウン、通常のテキストが正常に表示されました。また、iframeでも表示されました。これで、mikimaru様のfacebook挿入方法が可能となりました。

 

ただ、新たな問題が生じています。

新しく、質問をするべきですが iframeにほかのサイトを直接埋め込むことができません。つまり、SSL設定をした場合、iframeのモジュールが使用できない状態です。私の制作するサイトに特有な現象なのでしょうか、またはサーバースペック等が関係しているのでしょうか

また、サポートの終了したChrome等でSSL設定サイトの表示ができません。貴社サイトも閲覧できない状況となっています。ただし、yahooのサイトは閲覧可能です。

SSL設定は、初心者には手ごわいです。お時間がございましたら、よろしくお願いいたします。

 

現在制作中のサイトは（クローズ中ですが） https://www.shiso-sports.jp です。

y-nakaさん、ひとまず前進されたようで、よかったですね。

さて、もしや、失礼なことを書いてしまうのかもしれませんが、お許しください。
iframeで読み込もうとしているサイト（外部）は、完璧にSSLでしょうか。相手のサイト上で、たとえひとつでもSSL外の画像を引っ張ってきていたら、URLがhttpsではじまっていても、iframe内に表示されないことは、考えられます。

相手のサイトを見て、そのサイトに鍵マークが付いているかどうか、ですね。
「一部（画像等）安全ではないものが混じっています」といった表示が出ている場合は、読み込めない可能性が極めて高いと思います。

mikimaru　さま　ご指摘をありがとうございます。

エディ・ケイさまが動作確認していただいたように、iframeに当方のSSLサイト　https://shiso-sports.jp を設定すると表示されました。エディ・ケイさまのサイトも表示できました。

しかし、yahooは鍵マークがありますが無理、気象庁のサイトなどもだめでした。mikimaruさまのご指摘のように、サイト内のコンテンツすべてにサーバー認証がとれないサイトは表示できないということですか・・・

inframe入りのhtmlをアップしてそれをinframeで表示？？？やってみます。

こんにちは、オープンソース・ワークショップの牟田口です。

> しかし、yahooは鍵マークがありますが無理、気象庁のサイトなどもだめでした。

試してみました。
nc2、nc3でも同様の結果でした。

yahoo（https://www.yahoo.co.jp/）：表示できない

気象庁（https://www.jma.go.jp/jma/index.html）：表示できる

これは、NetCommonsの問題ではなく、yahoo側でiframeを表示できない様、対策がされているためでした。

ご参考まで。

yahoo対策のヒント

https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q10139808640

Yahoo!などで使用されているX-Frame-Options レスポンスヘッダのことでしょうか？
https://developer.mozilla.org/ja/docs/HTTP/X-Frame-Options

このレスポンスヘッダで制御されている場合はiframeで直接表示することができません。

NC2 iframe試し

https://nc2default.opensource-workshop.jp/?page_id=33

NC3 iframe試し

https://mutaguchi.netcommons3.jp/page_20181231042335

Chrome（ブラウザ）の開発ツール（F11）エラー内容

> page_20181231042335:1 Refused to display 'https://www.yahoo.co.jp/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

mikimaru　さま　ご指摘をありがとうございます。

エディ・ケイさまが動作確認していただいたように、iframeに当方のSSLサイト　https://shiso-sports.jp を設定すると表示されました。エディ・ケイさまのサイトも表示できました。

しかし、yahooは鍵マークがありますが無理、気象庁のサイトなどもだめでした。mikimaruさまのご指摘のように、サイト内のコンテンツすべてにサーバー認証がとれないサイトは表示できないということですか・・・

inframe入りのhtmlをアップしてそれをinframeで表示？？？やってみます。

 

オープンソース・ワークショップ　牟田口　さま

ありがとうございます。初歩的な質問に申し訳ございません。勉強不足です。

気象庁のサイトはSSLの無いものを貼り付けようとしていました。https://はデモで表示していただいたように正しく表示されました。学校サイトでは、気象庁とgooglemapがiframeに埋め込めると使いやすいですね、みな様のおかげで、サイト制作に大きく前進できます。ありがとうございます。

y-nakaさま

オープンソース・ワークショップの牟田口です。

いえいえ、私も調べてみて初めてIFrame表示できない技術がある事を知りました。

気象庁のページも開けたようで良かったです。

ご連絡ありがとうございました。

それでは失礼します。 

オープンソース・ワークショップ　牟田口　さま

ありがとうございます。初歩的な質問に申し訳ございません。勉強不足です。

気象庁のサイトはSSLの無いものを貼り付けようとしていました。https://はデモで表示していただいたように正しく表示されました。学校サイトでは、気象庁とgooglemapがiframeに埋め込めると使いやすいですね、みな様のおかげで、サイト制作に大きく前進できます。ありがとうございます。