All resources
Application Security8 min read

Stop clickjacking without breaking legitimate embeds

How to use frame policies, embedding inventories, and UI tests to protect sensitive actions from invisible overlays.

A practical PingFlow guide for developers working at the boundary between systems.

At a glance

Key takeaways

  • Start with the boundary
  • Model the system before choosing a tool
  • Design for failure, misuse, and change
In this guide

Start with the boundary

Stop clickjacking without breaking legitimate embeds is easiest to get right when the boundary is named before the implementation begins. Decide which system owns the decision, which inputs are trusted, what the caller can observe, and what must remain private. That framing prevents a local optimization from quietly becoming an undocumented protocol.

Clickjacking tricks a user into activating a control they cannot see or interpret. A destructive button, account approval, or payment confirmation can be framed by an attacker even when the application itself has no script injection. The right defense starts by deciding which pages, if any, are intentionally embeddable and by protecting high-risk actions independently.

Model the system before choosing a tool

Set Content-Security-Policy `frame-ancestors` for modern browsers and use `X-Frame-Options` as a compatibility layer where appropriate. Keep an inventory of legitimate embedding partners and routes. Never allow a broad wildcard for authenticated or sensitive pages. SameSite cookies and frame policies complement each other; neither replaces authorization or user-intent checks.

Write the model down as a small state diagram or table before selecting a library. Identify the durable state, the derived state, and the transitions that may be retried. This makes it easier to compare a managed service with an in-process implementation and to explain why a particular trade-off is acceptable for this workload.

Design for failure, misuse, and change

A policy applied only to the homepage can leave checkout or account settings exposed. A partner allowlist that accepts arbitrary subdomains may be broader than intended. UI overlays can also happen without framing through malicious browser extensions or compromised content, so sensitive actions need clear confirmation and server-side authorization.

A resilient design assumes that inputs are incomplete, dependencies are slow, operators make mistakes, and requirements will change. Put limits at the boundary, return errors that a caller can act on, and preserve enough context to distinguish a bad request from an unavailable dependency. Avoid broad fallbacks that make an unsafe state look successful.

Implementation example

Start with deny-by-default framing and add exact trusted origins only when a measured product requirement exists. Separate embeddable read-only widgets from authenticated mutation pages, and avoid sharing cookies with a frame unless the flow requires it. Include the frame policy in every response path, including errors and redirects.

Keep the first implementation narrow enough to review line by line. Make inputs, outputs, authorization context, and failure behavior explicit instead of hiding them behind a convenience helper. The example should be safe to run with synthetic data, emit a correlation identifier, and leave a durable artifact that another engineer can inspect after the request has finished.

http
Content-Security-Policy: frame-ancestors 'self' https://partner.example
X-Frame-Options: SAMEORIGIN

Verify and troubleshoot

Test each sensitive route in an iframe from an untrusted origin, a trusted partner origin, and an origin with a lookalike hostname. Inspect response headers on redirects and error pages. Confirm an embedded read-only widget cannot invoke a mutation and that the UI still works in supported partner contexts.

Use a small test matrix that covers the ordinary path, an empty or missing input, a duplicate request, a timeout, a permission failure, and a version mismatch. Assert both the response and the side effects. When a test fails, compare the observed transition with the model rather than adding a retry or widening a timeout without evidence.

Operations and recovery

Monitor policy violations and partner embed requests. Review the allowlist during domain changes, acquisitions, and vendor migrations. Keep a rollback that narrows framing immediately if a partner breaks. Document the product owner for each approved origin and the exact data and actions exposed through it.

Give the operator a bounded recovery action: replay a safe event, rebuild a derived view, rotate a credential, drain a queue, or roll back a compatible revision. Record the owner, retention period, alert threshold, and rollback condition next to the implementation. A runbook is useful only when it can be followed without reconstructing the design from production logs.

A practical decision guide

For a small service, prefer the design with the fewest hidden states that still meets the application security requirement. Add a managed dependency when it removes a failure mode you can measure, not simply because it is popular. Keep the interface replaceable by isolating provider-specific code behind a narrow adapter and by testing the behavior your users depend on.

Revisit the decision when traffic shape, data sensitivity, team ownership, or recovery objectives change. A design that is excellent for a single tenant or a low-volume internal tool can be the wrong design for a public multi-tenant path. Record the assumptions so the next change starts with evidence rather than folklore.

An implementation checklist

Before publishing a change related to stop clickjacking without breaking legitimate embeds, write down the input contract, authorization context, state transitions, limits, and user-visible errors. Identify the smallest synthetic dataset that demonstrates the normal path and the smallest dataset that demonstrates the dangerous path. Add a correlation ID to the example, make retries deliberate, and decide which artifacts can be retained for support without copying secrets or unnecessary personal data. This checklist is deliberately boring: repeatable release evidence is more valuable than a clever demo.

Use a disposable environment to exercise the implementation with realistic concurrency and a dependency failure. Compare the observed result with the contract, then record the measured latency, resource use, and recovery action. If a managed service or library is involved, pin its version and capture the relevant configuration. Ship behind a reversible change when the behavior is new, and schedule a follow-up review after real traffic reveals assumptions that a test fixture could not.

References and further reading

Use the OWASP Clickjacking Defense Cheat Sheet, CSP Level 3 guidance, and the browser documentation for frame-ancestors and X-Frame-Options. Test the actual response headers at the edge rather than relying on an application middleware assumption.

Prefer primary protocol specifications, vendor security documentation, and measured behavior from a disposable environment. Read the failure and deprecation sections, not only the happy-path quick start. A short reference list attached to the code gives future maintainers a way to distinguish an intentional constraint from an accidental implementation detail.

Keep exploring