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

„foo@gmail.com“

"Zm9vQGdtYWlsLmNvbQ=="

1. Unix

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

Kodierung: echo "foo@gmail.com" | base64

2.Javascript

var encodedData = window.btoa("foo@gmail.com"); // Kodierung var decodedData = window.atob("Zm9vQGdtYWlsLmNvbQ=="); // Dekodierung console.log(encodedData,decodedData)

3.nodejs

//Base64-Kodierung var b = neuer Puffer("foo@gmail.com");
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("foo@gmail.com")
base64.b64decode("Zm9vQGdtYWlsLmNvbQ==")

5.php

<?php
$a = "foo@gmail.com";
    $b = base64_encode($a); //kodieren echo $b;
    $c = base64_decode($b); //dekodieren echo $c;  
?>

6.java

Zeichenfolge str = "foo@gmail.com";
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

Detaillierte Erklärung des digitalen Puzzles CocosCreator Huarongdao

Inhaltsverzeichnis Vorwort Text 1. Panel 2. Huaro...

Methode zum Schreiben von bedingten Kommentaren und Beispielcode

Als Front-End-Ingenieure müssen wir mit dem IE ve...

7 coole dynamische Website-Designs zur Inspiration

Im Bereich Design gibt es jedes Jahr unterschiedl...

Detaillierte Erläuterung der Winkel-Zweiwegebindung

Inhaltsverzeichnis Bidirektionales Bindungsprinzi...

JavaScript-Implementierung des Verifizierungscode-Falls

In diesem Artikel wird der spezifische Code für J...

Details zur Verwendung regulärer Ausdrücke in MySQL

Inhaltsverzeichnis 1. Einleitung 2. Bereiten Sie ...

Border-Radius IE8-kompatible Verarbeitungsmethode

Laut canisue (http://caniuse.com/#search=border-r...

So deinstallieren Sie MySQL sauber (getestet und effektiv)

Wie deinstalliere ich Mysql vollständig? Befolgen...

Detaillierte Einführungshinweise zu Vue

Inhaltsverzeichnis 1. Einleitung 2. Erster Eindru...

So verwenden Sie Vue zum Entwickeln öffentlicher Account-Webseiten

Inhaltsverzeichnis Projekthintergrund Start Erste...

Eine detaillierte Einführung in primitive Werte und Wrapper-Objekte in JavaScript

Inhaltsverzeichnis Vorwort Text Primitive Typen P...

Detaillierte Erklärung der Verwendung und Unterschiede zwischen Indizes und Ansichten in MySQL

Vorwort Dieser Artikel stellt hauptsächlich die V...

Implementierungsprinzip und Nutzungsanalyse des Apache Bench-Stresstest-Tools

1: Durchsatz (Anfragen pro Sekunde) Eine quantita...

So legen Sie in Linux eine feste IP fest (getestet und effektiv)

Öffnen Sie zunächst die virtuelle Maschine Öffnen...

Detaillierte Erklärung von COLLATION-Beispielen in MySQL, die Sie möglicherweise übersehen haben

Vorwort Die Zeichenfolgentypen der MySQL-Datenban...