safari – Bram.us

Exploiting IndexedDB API information leaks in Safari 15

There’s a pretty nasty exploit in Safari 15, where sites/tabs that interact with an IndexedDB database leak that name to other tabs.

In Safari 15 on macOS, and in all browsers on iOS and iPadOS 15, the IndexedDB API is violating the same-origin policy. Every time a website interacts with a database, a new (empty) database with the same name is created in all other active frames, tabs, and windows within the same browser session. Windows and tabs usually share the same session, unless you switch to a different profile or open a private window.

As some sites — such as Google’s properties — include a unique identifier in the database name, that information can be used to identify a user.

I feel sorry for the WebKit/Safari Engineers that this got published just before the weekend, but on the other hand the security bug was reported in November already and has gone left unhandled. (Because it was filed a security bug, it’s not publicly accessible).

Do note that due to all browsers on iOS being forced to use the same MobileSafari WebKit build, all browsers on that platform are affected.

Exploiting IndexedDB API information leaks in Safari 15 →
Safari 15 IndexedDB Leaks →
Safari 15 IndexedDB Leaks Code →

How to prevent scrolling the page on iOS Safari 15

Rik Schennink:

If we show a modal on iOS we need to prevent events inside the modal from interacting with the page behind the modal. On a previous episode of “Fun with Safari” we could use preventDefault() on the touchmove event but on iOS 15 that no longer works. Here we go.

The solution lies in preventing pointermove while the modal is shown.

Using Rik’s code, here’s a demo on CodePen:

See the Pen
How to prevent scrolling the page on iOS Safari 15 by Bramus (@bramus)
on CodePen.

In the near future we should be able to drop Rik’s code, and simply use the overscroll-behavior CSS property (which I’ve covered here before back in 2017) for this. And by “near future” I really do mean soon: there’s been some active movement in the relevant WebKit bug since early December. Perhaps Safari 16 will include it? 🤞

How to prevent scrolling the page on iOS Safari 15 →

New WebKit Features in Safari 15

If you’re looking for a technical roundup of what’s new in Safari 15, head over to the WebKit blog

With the release of Safari 15 for macOS Monterey, iPadOS 15, iOS 15, and watchOS, as well as macOS Big Sur and macOS Catalina, WebKit brings significant advancements in privacy and security, improved interoperability, and a host of new features for web developers. Take a look.

Very glad to see aspect-ratio and WebGL2 now being available in all modern browsers.

On the JS-side of things, top level await is a very welcome addition.

UX-wise autocomplete=one-time-code on <input> will save users a lot of time.

New WebKit Features in Safari 15 →

Achoo — iOS Safari Extension to view HTML Source

Quickly view the HTML for a given page in Safari on iOS/iPadOS 15. Customizable, beautiful, easy to use, and you can tweak the page too!

When tapping the “Edit” button it activates contenteditable on the page. Costs $0.99.

Achoo HTML Viewer →

Chrome is the new Safari. And so are Edge and Firefox.

Niels Leenheer also shares his views on the whole “all browsers on iOS are WebKit because Apple says it needs to be”-thing:

Apple requires browsers to use WebKit. In fact, it must use the system-provided WebKit framework. Even though WebKit is open-source, you can’t modify or improve that version and use that in your app. No.

[…]

Safari has fallen behind and struggles to keep up with where the web platform is heading. […] It’s not just one browser that falls behind. It’s all browsers on iOS. The whole web on iOS falls behind. And iOS has become so important that the entire web platform is being held back as a result.

Chrome is the new Safari. And so are Edge and Firefox. →

Why WebKit supports AVIF but Safari does not

Jon Henshaw, writing for Coywolf:

WebKit added support for the AVIF image format in April 2021, but it’s still unavailable in Safari. Its absence is because Apple chose an unconventional method for decoding images in its browser.

Long story short: Safari does not decode images using WebKit — its underlying rendering engine — but delegates that task to macOS/iOS. Therefore it only supports the image formats the OS supports.

Why WebKit supports AVIF but Safari does not →

“For developers, Apple’s Safari is crap and outdated”

Perry Sun:

Safari is very good web browser, delivering fast performance and solid privacy features.

But at the same time, the lack of support for key web technologies and APIs has been both perplexing and annoying at the same time.

The enormous popularity of iOS makes it all the more annoying that Apple continues to hold back developers from being able to create great experiences over the web that work across all platforms.

Well, can’t say I disagree there …

Thankfully there’s people like Jen Simmons working at Apple, actively asking what should change (you can find my response here). Let’s hope she and the other bright folks who work on Webkit/Safari can have an impact there …

For developers, Apple’s Safari is crap and outdated →

WWDC: Meet Safari 15

In this video from the most recent WWDC, Jen Simmons (Web Technologies Evangelist) and Myles Maxfield (Safari and WebKit Engineer) introduce Safari 15.

Meet Safari 15: redesigned and ready to help people explore the web. Discover how you can approach designing websites and apps for Safari, and learn how to incorporate the tab bar in your designs. We’ll also take you through features like Live Text and accessibility best practices, explore the latest updates to CSS and Form Controls, and learn how to use the aspect-ratio property in CSS to create incredible websites.

Great to see that things like CSS aspect-ratio and Individual Transform Properties will ship with this release. Also nice that sites like CSS-Tricks and Resilient Web Design make a cameo in there.

I’ve quickly tested bram.us in Safari 15, and the top bar nicely takes over the set CSS background-color, without manually specifying any theme-color at all.

There’s no real need to set it, unless you want control over it of course. If you’re very eager you could even animate it 😅

interval loop in the contrast color sweet spot for Safari 126 to go through the color wheel with HSL 🙂

“`js
let scheme = document
.querySelector('meta[name="theme-color"]')
let hue = 0

setInterval(() => {
scheme.setAttribute('content', `hsl(${hue+=5} 50% 30%)`)
}, 50)
“` pic.twitter.com/a9hx9s9Mo7

— Adam Argyle (@argyleink) June 24, 2021

This nice example where the theme-color reflects the form’s error state als put a smile on my face:

I've been experimenting with theme-color in Safari TP.

In this demo the tab bar changes color when there are errors in the form or when the form has been submitted successfully.

CodePen: https://t.co/EHCk2d4is3 pic.twitter.com/sgFQpQKStX

— Manuel Matuzović (@mmatuzo) June 24, 2021

The new “A tab is also the address bar”-approach is pretty jumpy though, as shown in this video:

Everything is moving around 🥴

I mean it looks good, but it can be potentially confusing.

I don’t want to harp on something that others have worked hard on, but I hope the team could reconsider the placement of the URL input field.

Maybe something like what IE used to do? pic.twitter.com/EDNUoGl5Hu

— ؜ (@jkspn) June 8, 2021

Let’s hope Apple also considers this an issue before shipping Safari 15.

Design for Safari 15 →

Viewport Unit Based Typography vs. Safari

A common thing to do regarding font-sizing is to use Viewport Unit Based Typography, nowadays often combined with CSS min() or clamp():

:root {
  font-size: min(calc(1em + 1vw), 4em);
}

However, as Sara Soueidan details, Safari doesn’t co-operate here:

In Safari on macOS, the fluid text wasn’t really fluid—resizing the viewport did nothing to the font size, even though the latter is supposed to respond to the change in viewport width.

It’s a bug, slated to be fixed in the next version of Safari (Safari TP already has the fix). In the meantime there’s an easy workaround we can use.

More details + demo on Sara’s blog.

Working around the viewport-based fluid typography bug in Safari →

Re-reading that Viewport Unit Based Typography post from 2016 I now see that it also mentions that Safari doesn’t play nice with it. Let this underline the importance of filing bugs: because Sara filed a bug the Safari team came to know about the bug and fixed it (very fast too).

Inspecting Safari on iPhone using the Safari (on desktop) DevTools

Harry Roberts explains how to inspect pages from MobileSafari (on your iDevice) using the Safari (on your Mac) DevTools.

It’s been a while since I’ve done this, but if I recall correctly you can — once set up — also debug pages in MobileSafari without needing a physical USB connection. It’ll run over Bluetooth.

Measuring Network Performance in Mobile Safari →