はじめに

こちらの記事は実務ではなく、趣味アプリを開発していた際に気づいたことです。
何かより良い解決策をご存知の方がいらしたら、ご教示お願いします。

【11/4追加】
バック側で解決する方法を書きました。
https://qiita.com/yuki82511988/items/075508793119d90783b1
https://qiita.com/yuki82511988/items/62acd438e4420ec01be3

環境

Nuxt.js * RailsAPI(gem twitter使用)

こんなよく分からないタイトルの記事をみていただきありがとうございます。
TwitterAPI を使って趣味の Web アプリを開発していた際、あらかたの開発が終わって cerbot を使ってページを https 化しました。

------しかし、Chrome に「安全ではありません」と言われてしまいました。
console に警告が出ていたので見てみると（すみませんコピーしていませんでした）

画像のパスが http だから危険かもしれない
みたいなことが書いてありました。

画像・・・？と気になって調べたところ、twitterAPI から取得してきている画像のパスが、なんとhttp://から始まっていたのです！どうやらこれが問題でした。びっくりしました。

原因のコード

controller.rb

    client = Authorization.init
    @data = client.search("#hashtag", result_type: "recent").take(4).collect do |tweet|
      {
        "image": "#{tweet.user.profile_image_url}",

ここで取得している url が http でした。この段階では文字列になっておらず、本来バック側に変換の処理を書くべきですが今回はフロントに次のようなコードを書いて解決しました。

対応策

front.vue

  response.data.tweet.forEach(
    (element) => {
      console.log(element.image)
      const str = element.image
      const replaced = str.replace('http', 'https');
      element.image = replaced;
      }

もっといい方法があるし、文字列を変えただけなので「ええんか・・・」という感じでしたが、これで画像も表示されたまま警告も消えました。

まとめ

検証ツールで http の部分を https にした時に画像が消えなかったのでこちらの方法を取りましたが、果たして良かったのでしょうか。。。取り急ぎ解決しましたが、もっと良い方法をご存知の方がいらしたら教えてください。