1

I am making a data URL generator, and the last part of this project is the "open in new tab" button. But when I clicked the "open in new tab" button, it opens about:blank. I looked in the inspect panel, and an error was thrown.

Not allowed to navigate top frame to data URL: <data url here>

Here is my open in new tab code:

let dataurl = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNTAwIiBoZWlnaHQ9IjUwMCI+CjxjaXJjbGUgY3g9IjI1MCIgY3k9IjI1MCIgcj0iMjEwIiBmaWxsPSIjZmZmIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iOCIvPgo8L3N2Zz4K"; // Sample url

document.querySelector("#newtab").addEventListener("click", function () {
  const newWindow = window.open(dataurl);
});
:root {
  --theme-color-light: #3d5afe;
  --theme-color: #364fe1;
  --theme-color-dark: #2039c8;
  font-family: sans-serif; 
}

button {
  background-color: var(--theme-color-light);
  border: none;
  color: white;
  padding: 5px 7px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

button:hover {
  background-color: var(--theme-color);
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

button:active {
  background-color: var(--theme-color-dark);
}

span {
  margin-left: 5px;
}
<button id="newtab">
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    stroke="white"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
  >
    <path d="M14 6L6 6L6 18L18 18 L18 10"></path>
    <path d="M12 12L22 2L22 10M22 2L14 2"></path>
  </svg>
  <span>Open in new tab</span>
</button>

Although the above snippet may not open anything at all, that's just because the snippet is in an iframe. In real-life, it just opens about:blank and throws the error in the about:blank URL. So my question is, what can I do to avoid this data URL not allowed error?. Other answers like this one to this question put the data URL in an iframe, but the URL just stays on about:blank.

Note: I am using Microsft edge 103

Caleb Liu
  • 627
  • 5
  • 18
  • 2
    https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs#common_problems: _"A number of security issues (for example, phishing) have been associated with data URLs, and navigating to them in the browser's top level. To mitigate such issues, top-level navigation to data: URLs is blocked in all modern browsers. See [this blog post from the Mozilla Security Team](https://blog.mozilla.org/security/2017/11/27/blocking-top-level-navigations-data-urls-firefox-59/) for more details."_ – CBroe Jul 07 '22 at 12:26
  • Chrome lists a reason for this behavior in the development console: *"js:59 Blocked opening '...' in a new window because the request was made in a sandboxed frame whose 'allow-popups' permission is not set."* – Peter Krebs Jul 07 '22 at 12:27
  • Why not simply set the `href=` attribute of the link rather than try to navigate programatically – mousetail Jul 07 '22 at 12:28
  • `location.href` doesn't work either – Caleb Liu Jul 07 '22 at 12:33
  • according to https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs#browser_compatibility all browsers but IE and android webview block data url navigating..... sad – Caleb Liu Jul 07 '22 at 12:34
  • I am sure you can imagine it only takes one malicious sites to ruin the fun for everyone. Alternatively, you can always open a URL to that resource directly or create a page were that image is shown full-screen. – Peter Krebs Jul 07 '22 at 12:39

1 Answers1

-2

The problem might be, that you're trying to open a data: link.

Have you tried with http/https links?

nuke7
  • 19
  • 7
  • Unfortunately, I am making a *data url* generator, and the "open in new tab" button will open the *data url* equivalent of the file they put in. I am not fetching files from the internet. – Caleb Liu Jul 07 '22 at 12:54
  • 1
    as others said: "...top-level navigation to data: URLs is blocked in all modern browsers." – nuke7 Jul 07 '22 at 13:58
  • 2
    Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jul 08 '22 at 06:42