【SSL】証明書付きのサイトでもhttpのURLで画像を表示したい！【node.js】

必要なもの

・node.js
・Vue.js

証明書付きのサイトとは？

これを読んでいるということはご存知だとは思いますが・・・

このサイト含め、現在主流なサイトでは基本的に錠のマークがアドレスバーに表示されています。
アドレスバーをダブルクリックすると先頭にhttps://と書かれていると思います。
これらはすべてSSL証明書付きのサイトになります。SSL証明書付きのサイトはhttpsでアクセスすることが可能です。
httpとhttpsの話はここではしませんが、「httpsの方が安全なんだ！」程度の認識で大丈夫です。

保護されていない通信

逆にhttpによる通信が行われている場合は以下のように表示されます。

注意が必要で、SSL証明書が使われていて、https通信でページを表示していたとしても、保護されていない通信と表示される場合があります。
一番多い例はページ内でhttp接続をしている場合です。
例えば・・・

<img: src="http://2.bp.blogspot.com/-6HhC2AY0eps/XLAdB1LYatI/AAAAAAABSU8/6mvfk-9iyAA0mK8q8IKI4tNqTFt0Y1IDgCLcBGAs/s400/fantsy_haneinu.png">

上記のようにimgタグでhttpにより画像を引っ張ってこようとすると、保護されていない通信になります。

画像をリンクしつつ、通信も保護された状態にする

ここまで引っ張った割に、結論は簡単で、画像そのものをbase64変換して
imgタグのsrcとして利用しましょう。

https://www.npmjs.com/package/image-to-base64

上記のimage-to-base64を利用し、画像をbase64に変換し、
<img: src=”[base64の値]”>にすればよいのです。
以下が画像のリストをbase64に変換するコードです。
ただし、vueなどのscript部に書いてしまうとhttpアクセスが発生していることと同じなので、あくまでサーバサイドからのレスポンスとしてbase64の値を取得しましょう。

async base64 () {
  await Promise.all(this.imgUrlList.forEach(async imgUrl => {
    await image2base64(imgUrl).then(resp => {
      this.convertedImgUrlList.push('data:image/jpeg;base64,' + resp)
    }).catch(error => {
      throw error
    })
  }))
}