Data URI Schemeの画像を`window.open`で開いたときの挙動が、ブラウザごとに異なる

環境

• Firefox 60.0.2 (64 ビット)
• Google Chrome 67.0.3396.87（Official Build） （64 ビット）
• Internet Explorer 11 (11.112.17134.0)
• Microsoft Edge 42.17134.1.0

やりたいこと

img要素をクリックしたら、img要素の画像を別タブウィンドウで表示したいです。
画像を拡大して閲覧するためです。
img要素には、<input type="file">で選択した画像ファイルのプレビューが表示されます。

具体的には、以下のようなコードです。
画像ファイルをbase64形式（Data URI Scheme)で読み込み、img要素src属性に設定しています。

<input id="image-file" type="file" accept="image/*">
<img id="preview-image" style="width:100px;" class="clickable" alt="preview">

//「画像ファイルを選択したらプレビュー表示する」イベントを設定
document.getElementById("image-file").addEventListener("change", function(e) {
    const file = e.target.files[0];

    // Only process image files.
    if (!file.type.match('image.*')) {
        return false;
    }

    const reader = new FileReader();
    reader.onload = (function(theFile) {
        return function(e) {
            const imgElm = document.getElementById("preview-image");
            imgElm.src = e.target.result;
        }    
    })(file);
 
    // Read in the image file as a data URL.
    reader.readAsDataURL(file);

}, false);

//「プレビュー画像をクリックしたら、別タブウィンドウで開く」イベントを設定
document.getElementById("preview-image").addEventListener("click", function(e) {
    const imgElm = e.target;
    window.open(imgElm.src);
}, false);

See the Pen 選択した画像ファイルをプレビュー表示する。 by yuji38kwmt (@yuji38kwmt) on CodePen.

https://ja.wikipedia.org/wiki/Data_URI_scheme
https://www.html5rocks.com/ja/tutorials/file/dndfiles/ 参考
https://codepen.io/yuji38kwmt/pen/ERQwYz?editors=1111 参考

問題

上記のコードは、Firefoxでは動作しましたが、それ以外のブラウザでは動作しませんでした。

今回は、この現象についてまとめます。

調査した結果

window.openでData URI Schemeの画像を開くことができるか

各ブラウザで、上記のコードが動くかどうかを、CodePen上で確認しました。

ブラウザ	結果
Firefox	OK
Chrome	NG
Edge	NG
IE11	NG

• NGの場合は、空白のページが別タブで開きました。
• Chromeでは空白ページのコンソールに、以下のメッセージが表示されました。

pen.js:39 Not allowed to navigate top frame to data URL: data:image/jpeg;base64,...
(anonymous) @ pen.js:39

このメッセージはセキュリティ関係のもので、Chromeのセキュリティが強化されたことにより、このメッセージが出る様になったそうです。

https://stackoverflow.com/questions/45493234/jspdf-not-allowed-to-navigate-top-frame-to-data-url
https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/GbVcuwg_QjM%5B101-125%5D

Data URI Schemeをブラウザで直接開く

そもそも、Data URI Schemeの画像を、ブラウザで直接開くことができるのでしょうか？
以下のURLを、ブラウザのアドレスバーに入力して、画像（小さな赤い丸）が表示されるかどうかを確認しました。

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==

ブラウザ	結果
Firefox	OK
Chrome	OK
Edge	NG
IE11	NG

まとめ

• IE11, EdgeはData URI Schemeの画像を、ブラウザで直接開くことができない
• Chromeではセキュリティ制限のため、Data URI Schemeの画像を、window.openで開くことができない
• Firefoxは、Data URI Schemeの画像を、window.openで開くことができる

Chromeはセキュリティ制限のために動作しないことを考えると、Firefoxもその内、動作しなくなるかもしれませんね。
そもそも、「ユーザが選んだ画像なんだから、拡大表示しなくてもいいのでは？」という感じもあります。

補足

コンテキストメニュの「画像だけを表示」

Firefox, Chromeでは、コンテキストメニュに「画像だけを表示」という項目がありました。
Edge, IE11にはありませんでした。
「Data URI Schemeの画像、直接開ける/開けない」に関係する？

Data URI Schemeに関する参考サイト

https://tools.ietf.org/html/rfc2397
https://developer.mozilla.org/ja/docs/data_URIs