Yes. Even with a safe link, user-supplied CSS can restyle a link into a transparent box over your login button, which is clickjacking. Vue refuses to render style tags in templates, and recommends the object syntax for style bindings, so users control only specific, safe properties.
The attack in plain terms
The Vue security guide gives a clear example. A link has a sanitized URL, so it cannot run JavaScript. But its style attribute is bound to a value users supply. A malicious user can supply CSS that turns the link into an invisible box laid over the "Log in" button of your own page. If that link leads to a page the attacker built to look like your login form, a visitor who thinks they are clicking your button lands on a fake and may hand over real credentials.
No script runs, so script focused defenses, such as filtering javascript: or blocking inline script, do not stop it. This is why the guide treats style injection as its own category next to HTML, URL and JavaScript injection.
What Vue does and does not do
The guide says Vue prevents rendering of style tags inside templates. Letting users control a whole style element would give them full control over how the entire page looks, which is a much bigger problem. Style attribute bindings are not blocked. If you bind a whole string from users to style, that string is theirs.
Safer ways to offer customization
Vue's guidance is to use the object syntax and let users provide values only for specific properties that are safe for them to control, such as a color or a background.
const style = {
color: userProvidedColor,
background: userProvidedBackground
}
Even then, validate the values. Accept only colors in formats you expect, for example a fixed set of hex patterns, and reject anything else. Never let a value carry extra declarations or a url reference to an outside file.
| Approach | Risk |
|---|---|
| Bind a raw user string to style | High: arbitrary CSS, overlay and clickjacking |
| Render a user supplied style tag | Very high: control of the whole page, and Vue blocks it |
| Object syntax with named properties, validated | Low: user controls only chosen values |
| Fixed theme choices picked from a list | Lowest: user selects, you supply the CSS |
| Fully custom CSS inside a sandboxed iframe | Contained, the guide's recommendation for full control |
Review steps
- Search for style bindings that take data from users, profiles, themes, widgets or CMS fields.
- Check whether the value is a string or an object.
- If it is a string, replace it with named properties or a list of presets.
- Add framing protections as a backstop. A frame ancestors rule in your content security policy stops others from framing your pages, though it does not stop overlays within your own page.
- Test with a style that positions an element absolutely over a key button.
Why this belongs in a dependency review too
UI component libraries that accept style props can forward user strings into style attributes. When you vet a component, test that path as well.
Quick check
Does sanitizing the URL stop this attack?
No. The link can be a perfectly valid URL. The danger comes from the style, which changes what the user sees and clicks.
Is object syntax enough?
It limits which properties users can set. You should still validate the values to expected formats.
Safeguard's free scan at gold.safeguard.sh/scan checks the dependencies behind your UI components.
Sources
Last reviewed: 19 October 2026.
