aタグを使ってJavaScriptで生成したQRコードのdownloadを行いたい

Question

特定のURLをQRコード画像化して、リンクをワンクリックするだけで特定の名称でダウンロードされるようにしたいと考えております。

a href downloadで検索して出てきたサイトの次のサンプルでは目的通りにダウンロードされることが確認できました。

<a href="../../image/design/tagindex_mini.gif" download="TAGindex.gif">ダウンロード</a>

しかし次のようにJavaScriptで生成したURLの場合、リンクをクリックすると通常のリンクのようにページを移動してしまいます。
また、右クリックからリンク先を保存とするとpngで保存することは出来ますが、ファイル名は引き継がれません。

<script type="text/javascript">
    document.write('<a href="https://api.qrserver.com/v1/create-qr-code/?data=google.com" download="グーグルのHP.png">(DL-QRcode)</a>');
</script>

どのようにしたらワンクリックでダウンロード出来るようになるのでしょうか。

なお、対応させる必要があるブラウザはPC版のGoogle Chromeのみです。

以上、よろしくおねがいします。

追記

JavaScriptを使用せずに試した結果、次の例ではただのリンクになってしまいました。

<a href="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" download="あああ.png">あああをダウンロード</a>

次の例ではワンクリックでダウンロードできました。

<a href="qrcode.png" download="QRコード.png">QRコードをダウンロード</a>

同一のホストでないと動作しないような制限があるのかもしれません。

Answer 1

お察しの通り、同一オリジンでないと動作しない様ですね。
（HTMLを返したホストと、ダウンロード要求先のホストが同じでないとだめ）

<a>: アンカー要素 | MDN

参考情報
Google Chrome ver60からa要素のdownload属性が同一オリジンポリシーに厳密になった

Comments

[退会済みユーザー]

参考URL読ませていただきました。有難うございます。簡単に回避する方法があれば良いのですが、とりあえず外部のAPIを使わずにQRコードを生成する方向で少し調べてみようと思います。

Answer 2

追記のとおりのようですね。
ドキュメントとリンク先のoriginが一致しない場合は、HTMLの仕様では(ブラウザ毎のやり方で)悪質なダウンロードから保護する、ということになっているようです。
https://html.spec.whatwg.org/multipage/links.html#downloading-hyperlinks

Comments

[退会済みユーザー]

回答有難うございます。セキュリティ上の都合で止む終えない仕様なのですね。