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属性に設定しています。


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

```javascript
//「画像ファイルを選択したらプレビュー表示する」イベントを設定
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);
```

<p data-height="265" data-theme-id="0" data-slug-hash="ERQwYz" data-default-tab="js,result" data-user="yuji38kwmt" data-embed-version="2" data-pen-title="選択した画像ファイルをプレビュー表示する。" class="codepen">See the Pen <a href="https://codepen.io/yuji38kwmt/pen/ERQwYz/">選択した画像ファイルをプレビュー表示する。</a> by yuji38kwmt (<a href="https://codepen.io/yuji38kwmt">@yuji38kwmt</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


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