> ## Documentation Index
> Fetch the complete documentation index at: https://dub.co/llms.txt
> Use this file to discover all available pages before exploring further.

# How to use link cloaking on Dub?

> Learn how to use link cloaking on Dub to mask your destination URL with your short link.

export const ImageLink = ({src, alt, href, cta, className = ""}) => <div className="image-link-card group relative rounded-xl overflow-hidden border border-zinc-950/10 dark:border-white/10 not-prose">
    <style>{`
      @media (hover: hover) and (pointer: fine) {
        .image-link-card .image-link-card-btn:hover {
          --tw-drop-shadow: drop-shadow(0 8px 12px #222A350d) drop-shadow(0 32px 80px #2f30370f);
          filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
        }
      }
    `}</style>
    <a href={href} target="_blank" rel="noopener noreferrer" className="block">
      <img src={src} alt={alt} className={`w-full h-auto transition-all duration-300 group-hover:scale-105 ${className}`} />
      <div className="absolute inset-0 flex items-center justify-center bg-white/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300" style={{
  "--tw-backdrop-blur": "blur(8px)",
  WebkitBackdropFilter: "var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)",
  backdropFilter: "var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)"
}}>
        <span className="image-link-card-btn inline-block rounded-full border border-gray-200 bg-white px-8 py-2 transition-shadow cursor-pointer font-medium text-sm text-zinc-950 dark:text-zinc-950">
          {cta}
        </span>
      </div>
    </a>
  </div>;

<Tip>
  This feature is only available on [Pro plans and
  above](https://dub.co/pricing).
</Tip>

With Dub, you can mask your destination URL with your short link.

To enable link cloaking, click on the more options button `...` in the link builder and select the **Add Link Cloaking** option.

<Frame>
  <img src="https://assets.dub.co/help/link-cloaking.png" alt="Toggling the 'Link Cloaking' switch in the link builder" />
</Frame>

This is useful when you want to show your brand or custom domain instead of the actual destination URL.

When this is enabled, your short link will be shown in your users' browser address bar when they visit your link instead of the destination URL.

<Frame>
  <img src="https://assets.dub.co/changelog/link-cloaking.png" alt="Masking 'steventey.com' with 'stey.me'" />
</Frame>

## Link cloaking caveats

A few caveats for the link cloaking feature:

1. For link cloaking to work, make sure you use `https` for your destination URL. If your destination URL is `http`, the browser will show a "Not Secure" warning, and link cloaking will not work.
2. Link cloaking might not work for certain websites that have security measures in place to prevent this:

* `X-Frame-Options` header set to `DENY`
* `content-security-policy` header set to `frame-ancestors 'none'`

## Link cloaking with security headers

If you have control over the destination URL that you are cloaking, you can leverage security headers to enable link cloaking on Dub while also disabling iframe embedding everywhere else.

### Adding security headers to your destination URL

To do this, you need to whitelist your [Dub short domain](/help/article/how-to-add-custom-domain) as an allowed origin on your site by adding the following response headers to your site:

```bash theme={null}
Content-Security-Policy: frame-ancestors 'self' [shortdomain.com]
```

For example, if your Dub short domain is `dub.sh`, you would need to add the following headers to your destination URL:

```bash theme={null}
Content-Security-Policy: frame-ancestors 'self' dub.sh
```

### Whitelisting multiple domains

You can also whitelist multiple domains by separating them with a space:

```bash theme={null}
Content-Security-Policy: frame-ancestors 'self' dub.sh otherdomain.com
```

This will ensure that your site cannot be embedded in third-party sites but can still be cloaked by your Dub short domain.

### Secure link cloaking demo

Here's a demo of how this works:

<ImageLink alt="Link cloaking with security headers demo" src="https://assets.dub.co/help/link-cloaking-security-demo.png" href="https://link-cloaking-security.vercel.app" cta="View demo site ↗" />

* Code example: [git.new/zAD0CkJ](https://git.new/zAD0CkJ)
* Demo site: [link-cloaking-security.vercel.app](https://link-cloaking-security.vercel.app)
* Demo short link (enabled): [dub.link/secure-cloak](https://dub.link/secure-cloak)
* Any other iframes (disabled): [iframetester.com/?url=https://link-cloaking-security.vercel.app](https://iframetester.com/?url=https://link-cloaking-security.vercel.app)
