HTML Security Attributes

Security

Security attributes reduce risk at the edges of a page.

HTML loads resources, opens links and embeds external content. Security-related attributes help control those boundaries.

They do not replace server security, content security policy or careful dependency choices. They are one layer in a larger defense.

Attribute group: rel, sandbox, integrity, crossorigin, referrerpolicy. Attributes that reduce risk when loading or linking external resources.

What belongs here

Learn attributes by purpose, not by memorizing random names.

`rel="noopener"`

Prevents a new tab from controlling the opener window.

`sandbox`

Restricts iframe capabilities.

`integrity`

Checks that a loaded resource matches an expected hash.

`crossorigin`

Controls cross-origin resource requests for certain elements.

`referrerpolicy`

Limits what referrer information is sent.

`download`

Can change navigation into file download behavior.

Syntax in context

Security attributes belong where trust boundaries exist.

Use them on external links, iframes, scripts, styles and resources loaded from outside your own origin.

<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  Open external site
</a>
<script src="cdn.js" integrity="sha384-..." crossorigin="anonymous"></script>

Good versus weak

Small attribute choices can change behavior, accessibility and security.

Good

<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  Open external site
</a>
<script src="cdn.js" integrity="sha384-..." crossorigin="anonymous"></script>

Weak

<a href="https://example.com" target="_blank">External</a>
<iframe src="https://unknown.example"></iframe>

Rules that matter

Use these rules before publishing real HTML.

Protect external tabs

target="_blank" should normally include rel="noopener".

Do not overtrust embeds

Sandbox iframes unless you know exactly why not.

Use SRI for CDN assets

Integrity helps detect unexpected third-party file changes.

Limit referrers where needed

Referrer policy can reduce accidental data leakage.

Production thinking

Attributes are tiny pieces of HTML with real product impact.

Why does this matter?

Attributes are small, but they change how an element works. A good attribute can make a link usable, an image understandable, a form easier to complete or a script safer to load.

Accessibility

Security attributes should not hide the purpose of links or embedded content. Users still need clear labels and context.

Production note

Security attributes are small but important hardening details, especially on pages with third-party content.

Live code lab

Change the code and run the example.

Edit the HTML or CSS, then use Run to refresh the preview. The preview is isolated, so links and forms stay inside this practice area.

Mini assignment

Try this now.

Change one tag, attribute or text value in the example.
Run the preview and describe exactly what changed.
Reset the lab and repeat the same change without looking at the original.

Practice assignment

Do this before moving to the next lesson.

Change one meaningful part of the HTML, not only the visible text.
Run the preview and check whether the result still makes semantic sense.
Explain why the element or attribute you changed belongs in this exact place.

HTML CSS

* { box-sizing: border-box; }
body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-content: center;
  padding: 24px;
  font-family: system-ui, sans-serif;
  background: #07111f;
  color: #ffffff;
}

.demo-card {
  width: min(760px, calc(100vw - 48px));
  border-radius: 24px;
  padding: 28px;
  background: rgba(8, 12, 20, 0.94);
  border: 1px solid rgba(140, 255, 193, 0.26);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.32);
}

.content-panel {
  margin-top: 18px;
  border-radius: 18px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.06);
}

.muted-card { color: #b8c4d6; }
.label, caption {
  color: #8cffc1;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

h1, h2, strong { color: #8cffc1; }
p, li, dd, figcaption { color: #d6deec; line-height: 1.65; }
a { color: #62d5ff; font-weight: 800; }
img, iframe, video, svg { max-width: 100%; border-radius: 18px; }
iframe { width: 100%; min-height: 180px; border: 1px solid rgba(255,255,255,0.16); }

label { display: block; margin-top: 14px; color: #d6deec; font-weight: 800; }
input, button {
  display: block;
  width: 100%;
  margin-top: 8px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 12px 14px;
  font: inherit;
}

button {
  margin-top: 16px;
  border: 0;
  background: #8cffc1;
  color: #07111f;
  font-weight: 900;
  cursor: pointer;
}

button:disabled { opacity: 0.56; cursor: not-allowed; }
table { width: 100%; border-collapse: collapse; }
th, td { border: 1px solid rgba(255, 255, 255, 0.16); padding: 12px 14px; }

Live preview

Self-check

Before you continue, prove that you own this lesson.

Intermediate

Do not only read this page. Answer these questions out loud or write the answers in your own notes. If one answer feels vague, revisit the examples before moving on.

Can you explain what problem this lesson solves in a real website?
Can you identify the most important tag or attribute from this lesson?
Can you name one accessibility mistake this lesson helps prevent?
Can you write one good example and one weak example without copying the page?
Can you explain when you would use this in production and when you would avoid it?