S3の静的ウェブサイトホスティングの罠

S3の静的ウェブサイトホスティングの罠

現象

Clipboard API を検証しようとして、S3で「静的ウェブサイトホスティング」を使用したところ、https接続できず検証できなかった。

画像をクリップボードにコピーするコード

async function writeClipImg(imgUrl) {
    try {
        const data = await fetch(imgUrl);
        const blob = await data.blob();

        await navigator.clipboard.write([
            new ClipboardItem({[blob.type]: blob})
        ]);
        console.log('Fetched image copied.');
    } catch (err) {
        console.error(err.name, err.message);
    }
}

const targets = document.getElementsByClassName("copyable");
for(let i = 0; i < targets.length; i++){
    targets[i].addEventListener('click', () => {
        writeClipImg(targets[i].getAttribute("src"));
    }, false);
}

対応

https://s3-ap-northeast-1.amazonaws.com/<バケット名>/index.htmlの形式でアクセスするように変更した。

参考

1) https://s3-ap-northeast-1.amazonaws.com/<バケット名>/sample1.jpg (デフォルト(「REST APIエンドポイント」)で使える、パス形式のバケットへのアクセス方法) 2) https://<バケット名>.s3-ap-northeast-1.amazonaws.com/sample1.jpg (デフォルト(「REST APIエンドポイント」)で使える、仮想ホスト型式のバケットへのアクセス方法) 3) http://<バケット名>.s3-website-ap-northeast-1.amazonaws.com/sample.html（ウェブサイトエンドポイントを構成をした時のみ使える)

この内3)のドメインフォーマットでは、https 通信が使えません。

https://qiita.com/Yuhkih/items/1754ac9caf3f12d75946

感想

「静的ウェブサイトホスティング」でしかhtmlの公開ができないのかと思い込んでいた。

Clipboard APIの方はChromeではimage/jpegに対応していないようだったので、使用しないことにした。（サポートしているMIME TYPEのリストは探したが見つからなかった。）