Not Secure Website Example · Basic Website Example

A not secure website is a site delivered over plain HTTP instead of encrypted HTTPS. Visit one in a modern browser and the address bar calls it out — usually with the words "Not secure" and a warning triangle. This page shows what that warning looks like, explains the difference between HTTP and HTTPS, why forms on insecure pages are risky, and how to check any site's protocol from the address bar. It is part of the website basics library.

What is an HTTP (not secure) website?

HTTP (Hypertext Transfer Protocol) is the original way browsers fetch pages. It carries the page from server to browser in plaintext — no encryption. HTTPS (Hypertext Transfer Protocol Secure) is the same protocol wrapped in TLS, which encrypts everything between the browser and the server, as MDN explains.

In plain terms, a "not secure" website is one that still uses HTTP, so the data travelling between you and the server can be read by anything on the network path.

plaintext

http://www.example.com/

A URL that starts with http:// uses the unencrypted protocol. The same site over https:// encrypts the connection. For more on how the protocol fits into a full web address, see the website URL examples page.

HTTP vs HTTPS at a glance

	HTTP	HTTPS
What it is	Hypertext Transfer Protocol	HTTP secured with TLS
Encryption	None — plaintext	Full connection encryption
Address bar	`http://` plus a "Not secure" warning	`https://` plus a padlock
Passwords and payment details	Sent unencrypted — readable in transit	Encrypted before leaving your browser
Modern browser features	Often unavailable	Required (for example geolocation, service workers)

HTTPS is the standard for the web today, and free certificates make it available to almost any site. As web.dev's "Why HTTPS matters" explains, HTTPS protects the integrity of a site (strangers cannot tamper with what you load), protects privacy and security (strangers cannot passively listen in), and is required for many powerful new browser features.

What the "Not secure" warning looks like

This is a controlled illustration of what a browser shows — the site's own mockup, not a real page to visit. On the left is a secure HTTPS connection; on the right is the same page over plain HTTP.

html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<style>
  body { margin: 0; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; background: #f3f4f6; padding: 24px; }
  .row { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; }
  .window { width: 360px; background: #fff; border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.12); overflow: hidden; }
  .titlebar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: #e5e7eb; }
  .dot { width: 10px; height: 10px; border-radius: 50%; }
  .r { background: #fca5a5; } .y { background: #fcd34d; } .g { background: #86efac; }
  .bar { display: flex; align-items: center; gap: 8px; padding: 12px 14px; font-size: 14px; border-bottom: 1px solid #e5e7eb; }
  .icon { width: 16px; height: 16px; flex: none; }
  .lock { color: #15803d; }
  .warn { color: #b45309; }
  .tag { font-weight: 700; }
  .tag-secure { color: #15803d; }
  .tag-insecure { color: #b45309; }
  .url { color: #374151; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .caption { padding: 10px 14px; font-size: 12px; color: #4b5563; }
</style>
</head>
<body>
  <div class="row">
    <div class="window">
      <div class="titlebar"><span class="dot r"></span><span class="dot y"></span><span class="dot g"></span></div>
      <div class="bar">
        <svg class="icon lock" viewBox="0 0 16 16" aria-hidden="true"><path fill="currentColor" d="M8 1a3 3 0 0 0-3 3v2H4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1h-1V4a3 3 0 0 0-3-3Zm2 5H6V4a2 2 0 1 1 4 0v2Z"/></svg>
        <span class="tag tag-secure">Secure</span>
        <span class="url">https://www.example.com/login</span>
      </div>
      <div class="caption">Secure — encrypted HTTPS connection</div>
    </div>
    <div class="window">
      <div class="titlebar"><span class="dot r"></span><span class="dot y"></span><span class="dot g"></span></div>
      <div class="bar">
        <svg class="icon warn" viewBox="0 0 16 16" aria-hidden="true"><path fill="currentColor" d="M8 1 15 14H1L8 1Zm0 4a.8.8 0 0 0-.8.8v3.4a.8.8 0 0 0 1.6 0V5.8A.8.8 0 0 0 8 5Zm0 6.5a1 1 0 1 0 0 2 1 1 0 0 0 0-2Z"/></svg>
        <span class="tag tag-insecure">Not secure</span>
        <span class="url">http://www.example.com/login</span>
      </div>
      <div class="caption">Not secure — unencrypted HTTP connection</div>
    </div>
  </div>
</body>
</html>

Reading the two address bars:

https:// plus a padlock — the connection is encrypted. Chrome, Firefox and Safari all show a lock icon in this state.
http:// plus "Not secure" — the connection is not encrypted. Since Chrome 68 (July 2018), Chrome has shown "Not secure" for all HTTP pages, not only pages with forms. Firefox and Safari use equivalent warnings.

The label sits in the address bar to the left of the URL. Some browsers hide the https:// part of the address to save space, so click or tap the address bar to reveal the full protocol.

Why browsers warn you about HTTP pages

The warning exists because an unencrypted connection exposes three things, all documented in web.dev's "Why HTTPS matters":

Integrity. Without encryption, a third party on the network can tamper with the page or inject their own content — scripts, ads, or a fake login box.
Privacy. Every HTTP request is readable in transit. Passwords, emails, messages and payment details are transmitted in plaintext.
Modern features. Powerful browser APIs — cameras, microphones, geolocation, offline service workers — require a secure context (HTTPS). An HTTP site cannot offer them.

This is why Chrome began marking every HTTP page as "Not secure" in July 2018: to help people recognise when a connection is not private, and to keep pushing the web toward HTTPS.

How to check a site's protocol from the address bar

You do not need any tools — the address bar is the indicator. Look at the start of the URL:

What you see	What it means	Example address
Padlock plus `https://`	Encrypted, secure connection	`https://www.google.com/`
"Not secure" plus `http://`	Unencrypted HTTP connection	`http://www.example.com/`
Padlock with an info or caution icon	A minor issue on an HTTPS page; click it to see details	`https://example.com/` with a small issue
Full-page "Your connection is not private"	Certificate is expired, invalid, or mismatched	Browsers block these pages unless you proceed
A form warning on the page	A password or payment form is being submitted over HTTP	`http://www.example.com/login`

A few practical rules:

Enter passwords and payment details only on https:// pages that show a padlock.
Treat "Not secure" as a red light whenever the page asks for personal information.
A full-page certificate warning is more serious — it usually means the certificate is expired or the site is not what it claims. Prefer closing the tab.
Watch for mixed content — an HTTPS page that loads scripts, images or fonts over HTTP. Browsers downgrade that content, so part of the page is not fully protected.

Why insecure forms are risky

A form on an HTTP page sends its data in plaintext. When you type a password, email address, credit-card number or phone number into a form on http://, that data travels the network unencrypted — anyone on the path (the Wi-Fi network, the internet provider, a compromised router) can read it. This is sometimes called a man-in-the-middle attack: the attacker does not need to break into the site; they only need to listen to the traffic.

Here is a mockup of a login form on an unencrypted page:

html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<style>
  body { margin: 0; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; background: #f3f4f6; padding: 24px; }
  .window { max-width: 420px; margin: 0 auto; background: #fff; border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.12); overflow: hidden; }
  .titlebar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: #e5e7eb; }
  .dot { width: 10px; height: 10px; border-radius: 50%; }
  .r { background: #fca5a5; } .y { background: #fcd34d; } .g { background: #86efac; }
  .bar { display: flex; align-items: center; gap: 8px; padding: 12px 14px; font-size: 14px; border-bottom: 1px solid #e5e7eb; }
  .tag { color: #b45309; font-weight: 700; }
  .url { color: #374151; }
  .form { padding: 20px; }
  .form h3 { margin: 0 0 4px; }
  .sub { margin: 0; font-size: 12px; color: #6b7280; }
  label { display: block; font-size: 12px; color: #6b7280; margin: 12px 0 4px; }
  input { width: 100%; box-sizing: border-box; padding: 9px 10px; font-size: 14px; border: 1px solid #d1d5db; border-radius: 6px; }
  button { margin-top: 16px; width: 100%; padding: 10px; font-size: 14px; font-weight: 700; color: #fff; background: #b45309; border: 0; border-radius: 6px; }
  .note { margin-top: 14px; padding: 10px 12px; font-size: 12px; color: #92400e; background: #fef3c7; border: 1px solid #fcd34d; border-radius: 6px; }
</style>
</head>
<body>
  <div class="window">
    <div class="titlebar"><span class="dot r"></span><span class="dot y"></span><span class="dot g"></span></div>
    <div class="bar"><span class="tag">Not secure</span><span class="url">http://www.example.com/login</span></div>
    <div class="form">
      <h3>Sign in</h3>
      <p class="sub">Illustration only — a password form on a plain HTTP page.</p>
      <label>Email</label>
      <input type="email" disabled />
      <label>Password</label>
      <input type="password" disabled />
      <button type="button" disabled>Sign in</button>
      <div class="note">On HTTP, the password is sent in plaintext — anyone on the network path can read it.</div>
    </div>
  </div>
</body>
</html>

Compare that with a form on an HTTPS page: the browser encrypts the data before it leaves your device, so what travels over the network is unreadable. That is why payment pages and password logins are overwhelmingly HTTPS today. For how real stores handle checkout securely, see the ecommerce website examples page.

How to spot the risk before you type (checklist)

Run through these checks before entering anything personal on a website:

The address starts with https://, not http://
A padlock or "connection is secure" message is visible in the address bar
The domain is exactly the site you intended — check for typos and lookalike names
No full-page "Your connection is not private" warning is showing
Any form that asks for a password or payment is on https://

Here is the same checklist in a copyable form:

markdown

# Before entering personal data on a website
- [ ] Address starts with https:// (not http://)
- [ ] Padlock or "connection is secure" is shown in the address bar
- [ ] Domain matches the site I intended (no typos, no lookalike names)
- [ ] No full-page "Your connection is not private" warning
- [ ] Password and payment forms are on https://

What site owners should do

If you run a site that still shows "Not secure", the fix is straightforward:

Get a TLS certificate. Free options such as Let's Encrypt cover most sites, and many hosting providers add one automatically.
Redirect HTTP to HTTPS so every visitor lands on the secure version of your pages.
Update internal links and assets to https:// URLs — avoid loading scripts, images or fonts over HTTP (mixed content).
Re-test. After the change, open your site in a fresh browser tab and confirm the padlock appears.

For a complete one-file website you can adapt, see the HTML website example. For how static sites are built and deployed over HTTPS, see the static website example.

FAQ

Frequently asked questions

What does 'Not secure' mean in a browser?

It means the page was loaded over HTTP instead of HTTPS, so the connection between your browser and the server is not encrypted. The browser flags it because anything sent over that connection could be read by others on the network.

What is a 'not secure' website example?

A site whose address starts with http:// instead of https://. The address http://www.example.com/ is an unencrypted (HTTP) connection; the reserved example.com domain is used here purely as an illustration, not a site to visit.

Does 'Not secure' mean the website is a scam?

Not necessarily. The warning is about the connection, not the content — some legitimate sites still use HTTP. But treat such a page as unsafe for passwords, payments and personal information.

What is the difference between HTTP and HTTPS?

HTTP sends data in plaintext; HTTPS encrypts it with TLS before it leaves your browser. HTTPS is the standard today and is required for many modern browser features.

Can I get hacked just by visiting a not-secure website?

Merely loading an HTTP page is low risk, but the page can be tampered with while it travels to you, and entering a password or payment details on it is genuinely dangerous.

Why do some websites still show 'Not secure'?

The site owner has not enabled HTTPS, or has not redirected old HTTP links to the HTTPS version. It is fixable with a free TLS certificate and a redirect.

What to do next

Now that you can read the protocol in the address bar, the website URL examples page shows every part of a web address, website structure examples shows how pages and paths are organised, and the HTML website example gives you a complete site to adapt — served over HTTPS.