How does JS understand data URLs?

Overview
Getting started with data URLs
data URL Syntax
Base64 encoding and decoding of strings in multiple languages

1. Unix
2.javascript
3.nodejs
4. Python
5.php
6.java
7..net

Common data URL issues

Overview

Canvas has a very commonly used method canvas.toDataURL(), which converts canvas into the format of a data URL.
Usually the data URL is of type image.
Take a look at the following example:

<canvas id="canvas" height="2" width="2"></canvas>

var canvas = document.getElementById('canvas');
var dataURL = canvas.toDataURL();
console.log(dataURL);
/*
* data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAADklEQVQYV2NkgAJGGAMAAC0AA03DhRMAAAAASUVORK5CYII=
*/

So what exactly is this data URL that starts with data:[MIME type];base64?

Getting started with data URLs

A data URL is a special URL format that is prefixed with data:
Data URLs allow content creators to embed small files in documents.
Previously called data URIs until the WHATWG changed the name to

data URL(s)What is the difference between a data URL and a traditional URL?

Modern browsers treat data URLs as unique opaque origins, not URLs responsible for navigation.
How do you understand this sentence? Take a look at this example:

// data URL
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAADklEQVQYV2NkgAJGGAMAAC0AA03DhRMAAAAASUVORK5CYII=
// Traditional URL
https://www.google.com

From the above results we can see that:

Data URLs are different from traditional URLs. A traditional URL can be entered in the browser address bar to directly navigate to the target address; while a data URL is a data URL representation, which can be understood as using a URL to represent data.

Usually, the data here refers to pictures.

What does the data URL look like after it is entered into the browser address bar?

Normally, you can see the image represented by this URL.

<!DOCTYPE html>
<html lang="en">
  <body>
    <canvas id="canvas"></canvas>
  </body>
  <script>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    ctx.font = "48px serif";
    ctx.fillText("Hello Canvassssssssss", 0, 75 + 24);
    var dataURL = canvas.toDataURL();
    console.log(dataURL);
  </script>
</html>

data URL Syntax

What are the four parts of a data URL?

data:[<mediatype>][;base64],<data>

composition	meaning
data:	Prefix
[<mediatype>]	MIME type represents the type of data
[;base64]	Optional base64 identifier
<data>	The data itself

[<mediatype>] Details

mediatype is a string representing a MIME type, such as 'image/jpeg'.
If omitted, the default is "text/plain;charset=US-ASCII".
canvas.toDataURL() is not ignored and the default MIMIE type is "image/png".

[;base64] and <data> details

If the data is plain text, you can simply embed the text (using appropriate entities or escapes depending on the document type).
If data is not plain text, it can be marked as base64 and embed base64-encoded binary data.

Common data URL formats

Simple text/plain data
Base64 format of simple text/palin data
HTML snippet: normal tags
HTML fragment: script tag that executes js

Simple text/plain data

Hello World!

data:,Hello%2C%20World! // There is no MIME type or base64, only `:,` between data and data

Note the percent-encoding (URL-encoding) of quotes and spaces.
For CSV data ("text/csv"), percent-encoding is needed to preserve the line endings that separate spreadsheet rows.

Base64 format of simple text/palin data

Hello World!

data:text/plain;base64,SGVsbG8sIFdvcmxkIQ==

HTML snippet: normal tags

<h1>Hello, World!</h1>

data:text/html,%3Ch1%3EHello%2C%20World!%3C%2Fh1%3E

HTML fragment: script tag that executes js

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

Execute the js script tag, note that the closing script tag is required.

Base64 encoding and decoding of strings in multiple languages

Why use base64 to represent <data> in data URL?
The base64 string uses 64-hexadecimal to represent binary data. It is an ASCII string.

Since it is composed only of ASCII characters, the base64 string is URL-safe, so base64 is applied to the <data> of the data URL.

Implement base64 encoding in unix, JavaScript, node, python, php, java, .net

"[email protected]"
"Zm9vQGdtYWlsLmNvbQ=="

1. Unix

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

Encoding: echo "[email protected]" | base64

2.javascript

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

3.nodejs

//base64 encoding var b = new Buffer("[email protected]");
var s = b.toString('base64')
console.log("Email code:"+s)
//base64 decoding var b = new Buffer("Zm9vQGdtYWlsLmNvbQ==","base64")
var s = b.toString();
console.log("Mailbox decoding:"+s)

4. Python

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

5.php

<?php
$a = '[email protected]';
    $b = base64_encode($a); //encode echo $b;
    $c = base64_decode($b); //decode echo $c;  
?>

6.java

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

7..net

static void Main(string[] args)
{
    Console.WriteLine("Input:");
    var str = Console.ReadLine();
    //Encryption byte[] EncryptionByte = Encoding.UTF8.GetBytes(str);
    var EncryptionStr = Convert.ToBase64String(EncryptionByte);

    Console.WriteLine("Encryption result: " + EncryptionStr);

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

    Console.WriteLine("Decryption result: " + DecryptionStr);

}

Check out the multiple language implementations of base64 string encoding and decoding to understand the ins and outs of base64 multi-language implementation.

Common data URL issues

Lists some common issues when creating and using data URLs.

data:text/html,lots of text...<p><a name%3D"bottom">bottom</a>?arg=val

In fact, it means:

lots of text...<p><a name="bottom">bottom</a>?arg=val

grammar
Formatting in HTML
Length Limit
Lack of exception handling
String query is not supported
Security Question

grammar

The format of a data URL is very simple, and it is easy to forget to add a comma before the data, or to mistakenly encode the data in base64 format.

Formatting in HTML

A data URL provides a file within a document, which may be very wide relative to the width of the enclosing document.
As a URL, data should have whitespace formatted properly (newlines, tabs, or spaces), but this can have some problems when using base64 encoding.

Length Limit

Although Firefox supports data URLs of a certain length without a specific field, browsers are not required to support data of any maximum specific length. For example, Opera 11 limits the length of URLs to 65535 and data URLs to 65529 (65529 refers to the length of <data> after base64 encoding).

Mainstream browsers limit the length of data URLs

Chrome - 2MB for the current document. Otherwise the limit is the in-memory storage limit for - arbitrary blobs: if x64 and NOT ChromeOS or Android, then 2GB; otherwise, total_physical_memory / 5 (source).
Firefox - unlimited
IE ≥ 9 & Edge - 4GB

Source: Data protocol URL size limitations

Lack of exception handling

Invalid media parameters or 'base64' formatting errors are ignored but no error is reported.

String query is not supported

The data portion of a data URL is opaque, so if you use a query string (such as <url>?parameter-data) to query it, only the URL's query string will be included in the data. That is to say, even if the query is invalid, the query will be considered as part of the data.

Security Question

Many security issues, such as phishing, are related to data URLs and navigating to them at the top level of the browser.
To address these issues, top-level navigation to data:// urls has been disabled in Firefox 59+ (released versions, starting with 58).

The above is the detailed content of JS data URL. For more information about JS, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in:

How to return a specified image based on a URL in node.js
Node.js read file through url
js gets the url page id, which is the last digital file name
Return to the previous URL and refresh the interface js code
A brief discussion of the properties of the URL constructor in JavaScript that you may not know
Detailed explanation of sample code for monitoring URL changes without refreshing in js
Two methods to obtain URL parameters based on JavaScript
js converts URL to hexadecimal encryption and decryption function
Simply understand how to open URL with JS
Let's talk about what JavaScript's URL object is

<<: mysql5.6.8 source code installation process

>>: How to authorize all the contents of a folder to a certain user in Linux?