JS はデータ URL をどのように理解するのでしょうか?

概要

Canvas には、キャンバスをデータ URL の形式に変換する、非常によく使用されるメソッド canvas.toDataURL() があります。
通常、データ URL は画像タイプです。
次の例を見てください。

<キャンバスid="キャンバス" 高さ="2" 幅="2"></キャンバス>

var キャンバス = document.getElementById('キャンバス');
var dataURL = canvas.toDataURL();
console.log(データURL);
/*
* データ:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAACCAYAAABytg0kAAAADklEQVQYV2NkgAJGGAMAAC0AA03DhRMAAAAASUVORK5CYII=
*/

では、data:[MIME type];base64 で始まるこのデータ URL とは一体何なのでしょうか?

データ URL の使用を開始する

データ URL は、データで始まる特別な URL 形式です。
データ URL を使用すると、コンテンツ作成者はドキュメントに小さなファイルを埋め込むことができます。
以前はデータURIと呼ばれていましたが、WHATWGによって名前が変更されました。

データ URL データ URL と従来の URL の違いは何ですか?

最新のブラウザは、データ URL をナビゲーションを担当する URL ではなく、一意の不透明なオリジンとして扱います。
この文章をどう理解しますか？次の例を見てください:

// データ URL
データ:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAACCAYAAABytg0kAAAADklEQVQYV2NkgAJGGAMAAC0AA03DhRMAAAAASUVORK5CYII=
// 従来の URL
https://www.google.com

上記の結果から次のことがわかります。

データ URL は従来の URL とは異なります。従来の URL は、ブラウザのアドレスバーに入力して、ターゲットアドレスに直接移動できます。一方、データ URL はデータ URL 表現であり、URL を使用してデータを表すものと理解できます。

通常、ここでのデータは画像を指します。

ブラウザのアドレスバーに入力した後、データ URL はどのように表示されますか?

通常、この URL で表される画像を見ることができます。

<!DOCTYPE html>
<html lang="ja">
  <本文>
    <キャンバスid="キャンバス"></キャンバス>
  </本文>
  <スクリプト>
    var キャンバス = document.getElementById("キャンバス");
    var ctx = canvas.getContext("2d");
    ctx.font = "48px セリフ";
    ctx.fillText("こんにちはキャンバス", 0, 75 + 24);
    var dataURL = canvas.toDataURL();
    console.log(データURL);
  </スクリプト>
</html>

データURL構文

データ URL の 4 つの部分は何ですか?

データ:[<メディアタイプ>][;base64],<データ>

構成	意味
データ：	プレフィックス
[<メディアタイプ>]	MIMEタイプはデータのタイプを表します
[;base64]	オプションのbase64識別子
<データ>	データ自体

[<mediatype>] 詳細

mediatype は、「image/jpeg」などの MIME タイプを表す文字列です。
省略した場合、デフォルトは「text/plain;charset=US-ASCII」です。
canvas.toDataURL() は無視されず、デフォルトの MIMIE タイプは "image/png" です。

[;base64] と <data> の詳細

データがプレーンテキストの場合は、テキストを埋め込むだけです (ドキュメントの種類に応じて適切なエンティティまたはエスケープを使用します)。
データがプレーンテキストでない場合は、base64 としてマークし、base64 でエンコードされたバイナリデータを埋め込むことができます。

一般的なデータ URL 形式

シンプルなテキスト/プレーンデータ
シンプルなテキスト/パリンデータのBase64形式
HTML スニペット: 通常のタグ
HTMLフラグメント: jsを実行するスクリプトタグ

シンプルなテキスト/プレーンデータ

「こんにちは世界」

data:,Hello%2C%20World! // MIME タイプや base64 はなく、データとデータの間には `:,` のみがあります

引用符とスペースのパーセントエンコード (URL エンコード) に注意してください。
CSV データ ("text/csv") の場合、スプレッドシートの行を区切る行末を保持するにはパーセントエンコードが必要です。

シンプルなテキスト/パリンデータのBase64形式

「こんにちは世界」

データ:text/plain;base64,SGVsbG8sIFdvcmxkIQ==

HTML スニペット: 通常のタグ

<h1>こんにちは、世界！</h1>

データ:text/html、%3Ch1%3Eこんにちは%2C%20世界!%3C%2Fh1%3E

HTMLフラグメント: jsを実行するスクリプトタグ

data:text/html,<script>alert('hi');</script>

js スクリプトタグを実行します。終了スクリプトタグが必要であることに注意してください。

複数言語の文字列のBase64エンコードとデコード

データ URL で <data> を表すために base64 を使用するのはなぜですか?
base64 文字列は、64 進数を使用してバイナリデータを表します。これは ASCII 文字列です。

base64 文字列は ASCII 文字のみで構成されているため URL セーフであり、データ URL の <data> に base64 が適用されます。

Unix、JavaScript、Node、Python、PHP、Java、.NET で Base64 エンコードを実装する

「[email protected]」
"Zm9vQGdtYWlsLmNvbQ=="

1. Unix

デコード: echo "Zm9vQGdtYWlsLmNvbQ==" | base64 -D

エンコード: echo "[email protected]" | base64

2.JavaScript

var encodingData = window.btoa("[email protected]"); // エンコード var decodedData = window.atob("Zm9vQGdtYWlsLmNvbQ=="); // デコード console.log(encodedData,decodedData)

3.ノード

//base64 エンコーディング var b = new Buffer("[email protected]");
var s = b.toString('base64')
console.log("メールコード:"+s)
//base64 デコード var b = new Buffer("Zm9vQGdtYWlsLmNvbQ==","base64")
var s = b.toString();
console.log("メールボックスのデコード:"+s)

4. パイソン

base64をインポート
base64.b64encode("[email protected]")
base64.b64デコード("Zm9vQGdtYWlsLmNvbQ==")

5.php

<?php
$a = '[email protected]';
    $b = base64_encode($a); //エンコード echo $b;
    $c = base64_decode($b); // デコード echo $c;  
?>

6.ジャワ

文字列 str = "[email protected]";
文字列 encodeStr = 新しい文字列(Base64.encode(str.getBytes()));
System.out.println(encodeStr);
文字列 decodeStr = Base64.base64Decode(encodeStr);
System.out.println(デコードStr);

7..ネット

静的void Main(文字列[] 引数)
{
    Console.WriteLine("入力:");
    var str = Console.ReadLine();
    //暗号化バイト[] EncryptionByte = Encoding.UTF8.GetBytes(str);
    var EncryptionStr = Convert.ToBase64String(EncryptionByte);

    Console.WriteLine("暗号化結果: " + EncryptionStr);

    //復号化バイト[] DecryptionByte = Convert.FromBase64String(EncryptionStr);
    var DecryptionStr = Encoding.UTF8.GetString(DecryptionByte);

    Console.WriteLine("復号化結果: " + DecryptionStr);

}

base64 の複数言語実装の詳細を理解するには、base64 文字列エンコードとデコードの複数言語実装を確認してください。

一般的なデータ URL の問題

データ URL の作成および使用時に発生する一般的な問題をいくつか示します。

data:text/html、たくさんのテキスト...<p><a name%3D"bottom">bottom</a>?arg=val

実際、それは次のことを意味します:

たくさんのテキスト...<p><a name="bottom">bottom</a>?arg=val

文法
HTML での書式設定
長さ制限
例外処理の欠如
文字列クエリはサポートされていません
秘密の質問

文法

データ URL の形式は非常に単純なので、データの前にコンマを追加することを忘れたり、誤ってデータを base64 形式でエンコードしたりすることが起こりがちです。

HTML での書式設定

データ URL はドキュメント内のファイルを提供しますが、そのファイルは、囲んでいるドキュメントの幅に比べて非常に幅が広くなる場合があります。
URL として、データには空白 (改行、タブ、またはスペース) が適切にフォーマットされている必要がありますが、base64 エンコードを使用する場合は問題が発生する可能性があります。

長さ制限

Firefox は特定のフィールドのない特定の長さのデータ URL をサポートしていますが、ブラウザは特定の最大長のデータをサポートする必要はありません。たとえば、Opera 11 では、URL の長さが 65535 に制限され、データ URL の長さは 65529 に制限されます (65529 は、base64 エンコード後の <data> の長さを示します)。

主流のブラウザはデータURLの長さを制限している

Chrome - 現在のドキュメントの場合は 2MB。それ以外の場合、制限は任意の BLOB のメモリ内ストレージ制限です。x64 で ChromeOS または Android でない場合は 2GB、それ以外の場合は total_physical_memory / 5 (ソース)。
Firefox - 無制限
IE ≥ 9 および Edge - 4GB

出典: データプロトコル URL サイズの制限

例外処理の欠如

無効なメディアパラメータまたは 'base64' フォーマットエラーは無視されますが、エラーは報告されません。

文字列クエリはサポートされていません

データ URL のデータ部分は不透明であるため、クエリ文字列 (<url>?parameter-data など) を使用してクエリを実行すると、URL のクエリ文字列のみがデータに含まれます。つまり、クエリが無効な場合でも、クエリはデータの一部と見なされます。

秘密の質問

フィッシングなどの多くのセキュリティ問題は、データ URL と、ブラウザの最上位レベルでのその URL への移動に関連しています。
これらの問題に対処するため、Firefox 59 以降 (リリースバージョン 58 以降) では、data:// URL へのトップレベルナビゲーションが無効になっています。

上記はJSデータURLの詳しい内容です。JSの詳細については、123WORDPRESS.COMの他の関連記事にも注目してください！

以下もご興味があるかもしれません: