Imagine you see an advertisement for awesomeservice.com. It is a subscription-based SaaS platform and you have never heard of it before. You decide to try it. You click the “Subscribe” button, and it redirects you to stripe.com.

That’s good, because you are 100% sure that you are entering your credit card details on Stripe.

Now imagine another situation. You click the Subscribe button and see a credit card form embedded on the awesomeservice.com website.

When you enter your card details, what happens to them? Maybe the form is an iframe from stripe.com and your card number is sent directly there. Or maybe your details are sent to awesomeservice.com/payment endpoint, and they store them in their own database (because they are scammers). You cannot tell the difference just by looking at the page.

A small browser feature could help users understand whether an area is an iframe. We need an iframe attribute that visually shows the scope of the iframe area and it’s origin domain.

<iframe src=”https://stripe.com/cardEmbed” showDomain=true>

When a user moves the mouse over that area, a visual container will appear. In the bottom-right corner, the iframe’s origin domain will be displayed.

There will also be an info icon. When the user clicks the icon, the browser will show details about the iframe, similar to how it shows TLS certificate information.

Having this browser feature would make me feel more confident when subscribing to services I haven’t heard of before.