Wie versteht JS Daten-URLs?

Wie versteht JS Daten-URLs?

Überblick

Canvas verfügt über eine sehr häufig verwendete Methode canvas.toDataURL(), die Canvas in das Format einer Daten-URL konvertiert.
Normalerweise ist die Daten-URL vom Typ Bild.
Schauen Sie sich das folgende Beispiel an:

<Leinwand-ID="Leinwand" Höhe="2" Breite="2"></Leinwand>

var Leinwand = document.getElementById('Leinwand');
var dataURL = canvas.toDataURL();
konsole.log(Daten-URL);
/*
* Daten: Bild/png; Base64, iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAADklEQVQYV2NkgAJGGAMAAC0AA03DhRMAAAAASUVORK5CYII =
*/

Was genau ist also diese Daten-URL, die mit data:[MIME-Typ];base64 beginnt?

Erste Schritte mit Daten-URLs

  • Eine Daten-URL ist ein spezielles URL-Format, dem das Präfix „Daten“ vorangestellt ist:
  • Daten-URLs ermöglichen es Inhaltserstellern, kleine Dateien in Dokumente einzubetten.
  • Früher als Daten-URIs bezeichnet, bis die WHATWG den Namen änderte in

Daten-URL(s)Was ist der Unterschied zwischen einer Daten-URL und einer herkömmlichen URL?

Moderne Browser behandeln Daten-URLs als eindeutige, undurchsichtige Ursprünge und nicht als URLs, die für die Navigation verantwortlich sind.
Wie verstehen Sie diesen Satz? Schauen Sie sich dieses Beispiel an:

// Daten-URL

Daten: Bild/png; Base64, iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAADklEQVQYV2NkgAJGGAMAAC0AA03DhRMAAAAASUVORK5CYII =

// Traditionelle URL

https://www.google.com

Aus den obigen Ergebnissen können wir Folgendes ersehen:

Daten-URLs unterscheiden sich von herkömmlichen URLs. Eine herkömmliche URL kann in die Adressleiste des Browsers eingegeben werden, um direkt zur Zieladresse zu navigieren; eine Daten-URL hingegen ist eine Daten-URL-Darstellung, die so verstanden werden kann, dass eine URL zur Darstellung von Daten verwendet wird.

In der Regel handelt es sich bei den hier angegebenen Daten um Bilder.

Wie sieht die Daten-URL aus, nachdem sie in die Adressleiste des Browsers eingegeben wurde?

Normalerweise können Sie das durch diese URL dargestellte Bild sehen.

<!DOCTYPE html>
<html lang="de">
  <Text>
    <Leinwand-ID="Leinwand"></Leinwand>
  </body>
  <Skript>
    var Leinwand = document.getElementById("Leinwand");
    var ctx = canvas.getContext("2d");
    ctx.font = "48px Serifen";
    ctx.fillText("Hallo Canvassssssssss", 0, 75 + 24);
    var dataURL = canvas.toDataURL();
    konsole.log(Daten-URL);
  </Skript>
</html>

Syntax der Daten-URL

Aus welchen vier Teilen besteht eine Daten-URL?

Daten:[<Medientyp>][;base64],<Daten>

Zusammensetzung Bedeutung
Daten: Präfix
[<Medientyp>] Der MIME-Typ stellt den Datentyp dar
[;base64] Optionaler Base64-Bezeichner
<Daten> Die Daten selbst

[<Medientyp>] Details

  • Medientyp ist eine Zeichenfolge, die einen MIME-Typ darstellt, beispielsweise „image/jpeg“.
  • Wenn es weggelassen wird, ist der Standard „text/plain;charset=US-ASCII“.
  • canvas.toDataURL() wird nicht ignoriert und der Standard-MIMIE-Typ ist „image/png“.

[;base64] und <data> Details

  • Wenn es sich bei den Daten um reinen Text handelt, können Sie den Text einfach einbetten (mithilfe der entsprechenden Entitäten oder Escapes, je nach Dokumenttyp).
  • Wenn die Daten kein einfacher Text sind, können sie als Base64 markiert und Base64-codierte Binärdaten eingebettet werden.

Allgemeine Daten-URL-Formate

  • Einfacher Text/einfache Daten
  • Base64-Format für einfache Text-/Palin-Daten
  • HTML-Ausschnitt: normale Tags
  • HTML-Fragment: Skript-Tag, das js ausführt

Einfacher Text/einfache Daten

Hallo Welt!

data:,Hallo%2C%20Welt! // Es gibt keinen MIME-Typ oder Base64, nur `:,` zwischen data und data

Beachten Sie die Prozentkodierung (URL-Kodierung) von Anführungszeichen und Leerzeichen.
Bei CSV-Daten („Text/CSV“) ist eine Prozentkodierung erforderlich, um die Zeilenenden beizubehalten, die die Tabellenzeilen trennen.

Base64-Format für einfache Text-/Palin-Daten

Hallo Welt!

Daten: Text/Plain;Base64,SGVsbG8sIFdvcmxkIQ==

HTML-Ausschnitt: normale Tags

<h1>Hallo Welt!</h1>

Daten: Text/HTML, %3Ch1 %3EHallo %2C %20Welt! %3C %2Fh1 %3E

HTML-Fragment: Skript-Tag, das js ausführt

<script>alarm('hallo');</script>

Daten: Text/html,<script>Alarm('hallo');</script>

Führen Sie das JS-Skript-Tag aus. Beachten Sie, dass das schließende Skript-Tag erforderlich ist.

Base64-Kodierung und -Dekodierung von Zeichenfolgen in mehreren Sprachen

  • Warum sollte Base64 zur Darstellung von <data> in der Daten-URL verwendet werden?
  • Die Base64-Zeichenfolge verwendet 64-Hexadezimalzahlen zur Darstellung binärer Daten. Es handelt sich um eine ASCII-Zeichenfolge.

Da die Base64-Zeichenfolge nur aus ASCII-Zeichen besteht, ist sie URL-sicher, sodass Base64 auf die <data> der Daten-URL angewendet wird.

Implementieren Sie die Base64-Kodierung in Unix, JavaScript, Node, Python, PHP, Java, .net

„[email protected]“

"Zm9vQGdtYWlsLmNvbQ=="

1. Unix

Dekodieren: echo "Zm9vQGdtYWlsLmNvbQ==" | base64 -D

Kodierung: echo "[email protected]" | base64

2.Javascript

var encodedData = window.btoa("[email protected]"); // Kodierung var decodedData = window.atob("Zm9vQGdtYWlsLmNvbQ=="); // Dekodierung console.log(encodedData,decodedData)

3.nodejs

//Base64-Kodierung var b = neuer Puffer("[email protected]");
var s = b.toString('base64')
console.log("E-Mail-Code:"+s)
//Base64-Dekodierung var b = neuer Puffer("Zm9vQGdtYWlsLmNvbQ==","base64")
var s = b.toString();
console.log("Mailbox-Dekodierung:"+s)

4. Python

Base64 importieren
base64.b64encode("[email protected]")
base64.b64decode("Zm9vQGdtYWlsLmNvbQ==")

5.php

<?php
$a = "[email protected]";
    $b = base64_encode($a); //kodieren echo $b;
    $c = base64_decode($b); //dekodieren echo $c;  
?>

6.java

Zeichenfolge str = "[email protected]";
String encodeStr = neuer String(Base64.encode(str.getBytes()));
System.out.println(encodeStr);
Zeichenfolge decodeStr = Base64.base64Decode(encodeStr);
System.out.println(decodeStr);

7..netz

statischer void Main(string[] args)
{
    Console.WriteLine("Eingabe:");
    var str = Console.ReadLine();
    //Verschlüsselung byte[] EncryptionByte = Encoding.UTF8.GetBytes(str);
    var EncryptionStr = Convert.ToBase64String(EncryptionByte);

    Console.WriteLine("Verschlüsselungsergebnis: " + EncryptionStr);

    //Entschlüsselung byte[] DecryptionByte = Convert.FromBase64String(EncryptionStr);
    var DecryptionStr = Encoding.UTF8.GetString(DecryptionByte);

    Console.WriteLine("Entschlüsselungsergebnis: " + DecryptionStr);

}

Sehen Sie sich die mehrsprachigen Implementierungen der Base64-Zeichenfolgenkodierung und -dekodierung an, um die Feinheiten der mehrsprachigen Base64-Implementierung zu verstehen.

Allgemeine Probleme mit Daten-URLs

Listet einige allgemeine Probleme beim Erstellen und Verwenden von Daten-URLs auf.

Daten:Text/HTML,viel Text...<p><a name%3D"bottom">unten</a>?arg=val

Tatsächlich bedeutet es:

viel Text...<p><a name="bottom">unten</a>?arg=val

  • Grammatik
  • Formatierung in HTML
  • Längenbeschränkung
  • Fehlende Ausnahmebehandlung
  • String-Abfrage wird nicht unterstützt
  • Sicherheitsfrage

Grammatik

Das Format einer Daten-URL ist sehr einfach und man kann leicht vergessen, vor den Daten ein Komma einzufügen, oder die Daten versehentlich im Base64-Format kodieren.

Formatierung in HTML

Eine Daten-URL stellt eine Datei innerhalb eines Dokuments bereit, das im Verhältnis zur Breite des umgebenden Dokuments sehr breit sein kann.
Als URL sollten die Daten über korrekt formatierte Leerzeichen (Zeilenumbrüche, Tabulatoren oder Leerzeichen) verfügen. Dies kann jedoch bei der Verwendung der Base64-Kodierung zu Problemen führen.

Längenbeschränkung

Obwohl Firefox Daten-URLs einer bestimmten Länge ohne ein bestimmtes Feld unterstützt, ist es für Browser nicht erforderlich, Daten einer bestimmten maximalen Länge zu unterstützen. Beispielsweise begrenzt Opera 11 die Länge von URLs auf 65535 und von Daten-URLs auf 65529 (65529 bezieht sich auf die Länge von <data> nach der Base64-Kodierung).

Gängige Browser begrenzen die Länge von Daten-URLs

  • Chrome – 2 MB für das aktuelle Dokument. Andernfalls ist das Limit das Speicherlimit im Arbeitsspeicher für beliebige Blobs: wenn x64 und NICHT ChromeOS oder Android, dann 2 GB; andernfalls total_physical_memory / 5 (Quelle).
  • Firefox - unbegrenzt
  • IE ≥ 9 und Edge – 4 GB

Quelle: Größenbeschränkungen für Datenprotokoll-URLs

Fehlende Ausnahmebehandlung

Ungültige Medienparameter oder „Base64“-Formatierungsfehler werden ignoriert, aber es wird kein Fehler gemeldet.

String-Abfrage wird nicht unterstützt

Der Datenteil einer Daten-URL ist undurchsichtig. Wenn Sie für die Abfrage also eine Abfragezeichenfolge (z. B. <URL>?Parameterdaten) verwenden, wird nur die Abfragezeichenfolge der URL in die Daten aufgenommen. Das heißt, auch wenn die Abfrage ungültig ist, wird die Abfrage als Teil der Daten betrachtet.

Sicherheitsfrage

Viele Sicherheitsprobleme, wie etwa Phishing, stehen im Zusammenhang mit Daten-URLs und der Navigation zu ihnen auf der obersten Ebene des Browsers.
Um diese Probleme zu beheben, wurde die Navigation der obersten Ebene zu data://-URLs in Firefox 59+ (veröffentlichte Versionen, beginnend mit 58) deaktiviert.

Oben finden Sie den detaillierten Inhalt der JS-Daten-URL. Weitere Informationen zu JS finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!

Das könnte Sie auch interessieren:
  • So geben Sie ein bestimmtes Bild basierend auf einer URL in node.js zurück
  • Node.js liest Datei über URL
  • js erhält die URL-Seiten-ID, die der letzte digitale Dateiname ist
  • Kehren Sie zur vorherigen URL zurück und aktualisieren Sie den JS-Code der Schnittstelle
  • Eine kurze Erläuterung der Eigenschaften des URL-Konstruktors in JavaScript, die Sie möglicherweise nicht kennen
  • Detaillierte Erläuterung des Beispielcodes zur Überwachung von URL-Änderungen ohne Aktualisierung in js
  • Zwei Methoden zum Abrufen von URL-Parametern basierend auf JavaScript
  • js konvertiert URL in hexadezimale Verschlüsselungs- und Entschlüsselungsfunktion
  • Verstehen Sie einfach, wie Sie eine URL mit JS öffnen
  • Lassen Sie uns darüber sprechen, was das URL-Objekt von JavaScript ist

<<:  Installationsprozess des mysql5.6.8-Quellcodes

>>:  Wie autorisiert man in Linux den gesamten Inhalt eines Ordners für einen bestimmten Benutzer?

Artikel empfehlen

Lösen Sie die Probleme, die bei der Installation der Mysql 8.0.17 Winx64-Version aufgetreten sind

1. Manuelles Erstellen und Hinzufügen der Datei m...

Lösung für das Problem ungültiger Breiteneinstellungen für Label und Span

Standardmäßig ist die Einstellung der Breite für B...

Detaillierte Erklärung des strikten Modus in JavaScript

Inhaltsverzeichnis Einführung Verwenden des strik...

Verwenden Sie jQuery, um das Problem mit ungültigen Seitenankerpunkten unter Iframe zu beheben

Das Anwendungsszenario ist: Die Iframe-Seite hat k...

Empfehlen Sie mehrere MySQL-bezogene Tools

Vorwort: Mit der kontinuierlichen Entwicklung der...

Detaillierte Diskussion der Speicherprinzipien: Werden Variablen in JS im Heap oder Stack gespeichert?

Inhaltsverzeichnis 1. Der Elefant, der nicht in d...

Nginx' praktische Methode zur Lösung domänenübergreifender Probleme

Trennen Sie Front- und Backend und lösen Sie domä...

Anweisungen zur Verwendung der MySQL-IndexOF-Funktion

Wie unten dargestellt: LOCATE(Teilzeichenfolge,Ze...

Vue implementiert die Bildfrequenzwiedergabe des Karussells

In diesem Artikelbeispiel wird der spezifische Co...

MySQL-Limit-Leistungsanalyse und -Optimierung

1. Fazit Syntax: Limit-Offset, Zeilen Schlussfolg...

Javascript, um den Effekt des Schließens von Anzeigen zu erzielen

Hier ist eine Fallstudie zu Ihrer Information, wi...

Diskussion über sinnvollere Erstellungsregeln für MySQL-String-Indizes

Vorwort In Bezug auf die Verwendung von MySQL-Ind...

Docker-Container wird nach der Ausführung beendet (wie kann man ihn weiter ausführen)

Phänomen Starten Sie den Docker-Container docker ...

Wann ist die Verwendung von dl, dt und dd sinnvoll?

dl: Definitionsliste Definitionsliste dt: Definiti...

So finden Sie die my.ini-Konfigurationsdatei in MySQL 5.6 unter Windows

Machen Sie sich eine Notiz, damit Sie später dara...