Is it possible to shorten a data:text/html, link?

Question

I have been coding on a link called data:text/html, (if you write it in the adress bar, you could write any html and css after.) Does anyone know how to shorten this link, I have tried goo.gl and bitly, but it says it is not able to create the link. This is my code:

data:text/html, <!DOCTYPE html> <html lang="en-us"> <head> <title>Griffin Inc</title> <link rel="icon" href="https://docs.google.com/a/my.rbusd.org/drawings/d/1RbhLPr2Jq2WL-NCKn0lMKVkM3fPw-ZRUdFTurpLHkBk/pub?w=960&h=720"> <link href="https://preview.c9users.io/check222/new-tab/style.css" rel="stylesheet"> <script src="https://preview.c9users.io/check222/new-tab/main.js"></script> </head> <body id="body"> <marquee loop="-1" scrollamount="7" width="100%" id="google-search-engine-marquee"> <strong>Search Griffin Inc</strong> </marquee> <form action="https://www.google.com/search" method="get"> <input type="search" name="q" placeholder="Google" title="Search" id="search-bar"> <input type="submit" value="Search" id="search-button"> </form><p style="color: black">Color Picker:<input id="color_picker" type="color" onchange="showHex();"><p style="color: black">Type notes here: </p> <textarea id="notes"></textarea> <p></p> <button id="Google-Docs" class="pageContent" onclick="window.open('https://docs.google.com/document/u/0/?tgif=d')">Google Docs</button> <button id="Google-Drive" class="pageContent" onclick="window.open('https://drive.google.com/drive/my-drive')">Google Drive</button> <button id="Google-Slides" class="pageContent" onclick="window.open('https://docs.google.com/presentation/u/0/?tgif=d')">Google Slides</button> <button id="Google-Drawings" class="pageContent" onclick="window.open('https://docs.google.com/drawings/d/1YTlXmt29AVduvI2OnSfYYMKw1IrcB3LPFPBh6g1p6TI/edit')">Google Drawings</button> <iframe src="http://schneider7.weebly.com/homework--due-dates" width="100%" height="1000"/> </body> </html>

The link shortening services probably have a limit on the size of the links. Why do you need to put a whole HTML document directly in the link, instead of putting it on a server? — Barmar, Jun 09 '17 at 17:27
you need to copy that link from the url bar once it's navigated; as-shown it's invalid, but the url bar will escape it for you, and then it might work on some "tiny url" services. — dandavis, Jun 09 '17 at 17:28
Because it is not in a valid format. Either encode it or in goo.go, turn off the Front end validations and try — Sagar V, Jun 09 '17 at 17:33

BoltClock · Answer 1 · 2017-06-09T17:53:45.020

Is it possible to shorten a data:text/html, link?

Sure it is — if you can create a short URL that redirects to said data URI. As you have observed, many popular services don't support data URIs. There's nothing stopping you from making your own redirects, however.

Is it useful to shorten a data URI? I can't think of any reasonable use case for doing so. data:text/html URIs are meant for very small demos (in the order of two- or three-digit byte counts — here are a couple of examples) and for quick experimentation. No one in their right mind is going to put an entire HTML document in a data URI and expect end users to use it like a real document. Crucially, data URIs cannot be indexed by search engines, although of course depending on the use case this can be either a pro or a con.

Besides, Internet Explorer and Microsoft Edge don't support navigating to data URIs of any kind for security reasons, so even if you could create a short URL redirecting to a data URI, it's not going to work everywhere.

If you want "short URLs" that link to runnable/editable web snippets, there are tons of services made exactly for this purpose, such as JSFiddle, JS Bin, CodePen... the list goes on. These all generate URLs with reasonably short identifiers. Plus, they're all HTTP-based, and so they work in IE and Microsoft Edge.

The reason I use data URLs is it does not need internet. I use this as my new tab page. The reason I wanted to shorten it is if you look were it shows my link to the css, it has a link to a website. This does work, but does not work without internet, which I was going for. I found a solution by using the data:text/css, but it can be very long. I would use `` this is only an example. I don't want longer link than I already have. — The Gamer, Jun 09 '17 at 18:04
@The Gamer: Well, you're going to need an Internet connection to access the short URLs in order to reach your target data URIs anyway. — BoltClock, Jun 10 '17 at 02:39

score 2 · Answer 2 · edited Jun 20 '20 at 09:12

It kinda is ... but it won't do you much good, at least not if you want to "transfer" a complete HTML document via it - because not all browsers will allow this.

Try the following example: tinyurl.com/3maue6t

It will redirect to
data:text/html;charset=utf-8,However,%20data%20URI%20does%20the%20same%20without%20the%20server

(Not my example; found on https://news.ycombinator.com/item?id=2464213 after googling does any url shortener support data uris)

However, if you navigate to the above tinyurl in Chrome, you will get to see the following error message:

This site can’t be reached

The webpage at data:text/html;charset=utf-8,However,%20data%20URI%20does%20the%20same%20without%20the%20server might be temporarily down or it may have moved permanently to a new web address.

ERR_UNSAFE_REDIRECT

So this gets blocked, because it is considered unsafe. I expect other major browsers might react in a similar way.

Proof that this is not due to a somehow "faulty" Data URI is easy - the address bar is now showing the data URI, so move the cursor behind that and hit [enter] - and you will see the "HTML" document this data URI contains gets rendered.

I have not checked if things are treated differently if you f.e. used such a shortened URL that redirects to a data URI as the src of an image element or some other kind of embedded resource; but as a tool to "redirect" to a complete web page it does not seem to be suitable.

score 1 · Answer 3 · edited Jun 25 '17 at 09:33

Try react-google-url-shortner from here: https://www.npmjs.com/package/react-google-url-shortner.

Props:

url (Required) - Add url you want to shorten.
GOOGLE_API_KEY - Api Key created from google Project.

Usage:

import GoogleUrlShortner from 'react-google-url-shortner';

// ... 

class Foo extends Component {
    render() {
        return (
            <GoogleUrlShortner
              url="{example url here}" 
              GOOGLE_API_KEY="{YOUR project API key here}"
            />
        );
    }
}

score 1 · Accepted Answer · edited Apr 14 '19 at 17:45

I know this is old and this isn't the answer you probably want but you can use a base 64 encoding for example

data:text/html;base64,PGgxPkhlbGxvLCBXb3JsZDwvaDE+

your HTML could be encoded into

data:text/html;base64,ZGF0YTp0ZXh0L2h0bWwsIDwhRE9DVFlQRSBodG1sPiA8aHRtbCBsYW5nPSJlbi11cyI+IDxoZWFkPiA8dGl0bGU+R3JpZmZpbiBJbmM8L3RpdGxlPiA8bGluayByZWw9Imljb24iIGhyZWY9Imh0dHBzOi8vZG9jcy5nb29nbGUuY29tL2EvbXkucmJ1c2Qub3JnL2RyYXdpbmdzL2QvMVJiaExQcjJKcTJXTC1OQ0tuMGxNS1ZrTTNmUHctWlJVZEZUdXJwTEhrQmsvcHViP3c9OTYwJmg9NzIwIj4gPGxpbmsgaHJlZj0iaHR0cHM6Ly9wcmV2aWV3LmM5dXNlcnMuaW8vY2hlY2syMjIvbmV3LXRhYi9zdHlsZS5jc3MiIHJlbD0ic3R5bGVzaGVldCI+IDxzY3JpcHQgc3JjPSJodHRwczovL3ByZXZpZXcuYzl1c2Vycy5pby9jaGVjazIyMi9uZXctdGFiL21haW4uanMiPjwvc2NyaXB0PiA8L2hlYWQ+IDxib2R5IGlkPSJib2R5Ij4gPG1hcnF1ZWUgbG9vcD0iLTEiIHNjcm9sbGFtb3VudD0iNyIgd2lkdGg9IjEwMCUiIGlkPSJnb29nbGUtc2VhcmNoLWVuZ2luZS1tYXJxdWVlIj4gPHN0cm9uZz5TZWFyY2ggR3JpZmZpbiBJbmM8L3N0cm9uZz4gPC9tYXJxdWVlPiA8Zm9ybSBhY3Rpb249Imh0dHBzOi8vd3d3Lmdvb2dsZS5jb20vc2VhcmNoIiBtZXRob2Q9ImdldCI+IDxpbnB1dCB0eXBlPSJzZWFyY2giIG5hbWU9InEiIHBsYWNlaG9sZGVyPSJHb29nbGUiIHRpdGxlPSJTZWFyY2giIGlkPSJzZWFyY2gtYmFyIj4gPGlucHV0IHR5cGU9InN1Ym1pdCIgdmFsdWU9IlNlYXJjaCIgaWQ9InNlYXJjaC1idXR0b24iPiA8L2Zvcm0+PHAgc3R5bGU9ImNvbG9yOiBibGFjayI+Q29sb3IgUGlja2VyOjxpbnB1dCBpZD0iY29sb3JfcGlja2VyIiB0eXBlPSJjb2xvciIgb25jaGFuZ2U9InNob3dIZXgoKTsiPjxwIHN0eWxlPSJjb2xvcjogYmxhY2siPlR5cGUgbm90ZXMgaGVyZTogPC9wPiA8dGV4dGFyZWEgaWQ9Im5vdGVzIj48L3RleHRhcmVhPiA8cD48L3A+IDxidXR0b24gaWQ9Ikdvb2dsZS1Eb2NzIiBjbGFzcz0icGFnZUNvbnRlbnQiIG9uY2xpY2s9IndpbmRvdy5vcGVuKCdodHRwczovL2RvY3MuZ29vZ2xlLmNvbS9kb2N1bWVudC91LzAvP3RnaWY9ZCcpIj5Hb29nbGUgRG9jczwvYnV0dG9uPiA8YnV0dG9uIGlkPSJHb29nbGUtRHJpdmUiIGNsYXNzPSJwYWdlQ29udGVudCIgb25jbGljaz0id2luZG93Lm9wZW4oJ2h0dHBzOi8vZHJpdmUuZ29vZ2xlLmNvbS9kcml2ZS9teS1kcml2ZScpIj5Hb29nbGUgRHJpdmU8L2J1dHRvbj4gPGJ1dHRvbiBpZD0iR29vZ2xlLVNsaWRlcyIgY2xhc3M9InBhZ2VDb250ZW50IiBvbmNsaWNrPSJ3aW5kb3cub3BlbignaHR0cHM6Ly9kb2NzLmdvb2dsZS5jb20vcHJlc2VudGF0aW9uL3UvMC8/dGdpZj1kJykiPkdvb2dsZSBTbGlkZXM8L2J1dHRvbj4gPGJ1dHRvbiBpZD0iR29vZ2xlLURyYXdpbmdzIiBjbGFzcz0icGFnZUNvbnRlbnQiIG9uY2xpY2s9IndpbmRvdy5vcGVuKCdodHRwczovL2RvY3MuZ29vZ2xlLmNvbS9kcmF3aW5ncy9kLzFZVGxYbXQyOUFWZHV2STJPblNmWVlNS3cxSXJjQjNMUEZQQmg2ZzFwNlRJL2VkaXQnKSI+R29vZ2xlIERyYXdpbmdzPC9idXR0b24+IDxpZnJhbWUgc3JjPSJodHRwOi8vc2NobmVpZGVyNy53ZWVibHkuY29tL2hvbWV3b3JrLS1kdWUtZGF0ZXMiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMDAiLz4gPC9ib2R5PiA8L2h0bWw+

Is it possible to shorten a data:text/html, link?

4 Answers4