Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow CSS `var(--xxx)` function in style sanitizer? #23485

Closed
iceberg-young opened this issue Apr 21, 2018 · 3 comments

Comments

@iceberg-young
Copy link

@iceberg-young iceberg-young commented Apr 21, 2018

I'm submitting a ... (check one with "x")

[x] bug report
[ ] feature request

Current behavior
A style binding with a CSS variable will get stripped out by the style sanitizer.

For example, when I try to use Bootstrap provided variables

<span style="color: var(--primary)">Primary</span>
and
<span [style.color]="'var(--secondary)'">Secondary</span>
and
<span style="color: var({{colorVar}})">Dynamic</span>

The render result in browser will be

<span style="color: var(--primary)">Primary</span>
and
<span>Secondary</span> <!-- <<< Note this one -->
and
<span style="">Dynamic</span> <!-- <<< and this one -->

Expected behavior
Since I'm very likely to use CSS variables in dynamic way, I think they should not be stripped out.


P.S.

const CSS3_FNS = '(?:calc|attr)';

Is it the correct place to modify?

- const CSS3_FNS = '(?:calc|attr)';
+ const CSS3_FNS = '(?:calc|attr|var)';

Could (or will) var belongs to CSS3 from a Candidate Recommendation?

@ericmartinezr

This comment has been minimized.

Copy link
Contributor

@ericmartinezr ericmartinezr commented Apr 21, 2018

related #9343

@ngbot ngbot bot added this to the needsTriage milestone Apr 24, 2018
@alxhub alxhub added type: feature and removed type: bug/fix labels Apr 24, 2018
@ngbot ngbot bot modified the milestones: needsTriage, Backlog Apr 24, 2018
@sandangel

This comment has been minimized.

Copy link

@sandangel sandangel commented May 11, 2018

I face this issue when using css repeat() function in inline style.

@benlesh

This comment has been minimized.

Copy link
Contributor

@benlesh benlesh commented Sep 18, 2018

Related google issue: http://b/115506288

IgorMinar added a commit to IgorMinar/angular that referenced this issue Nov 15, 2019
This change enables "var(--my-var)" to pass through the style sanitizer.

After consulation with our security team, allowing these doesn't create
new attack vectors, so the sanitizer doesn't need to strip them.

Fixes parts of angular#23485 related to the sanitizer, other use cases discussed
there related to binding have been addressed via other changes to the
class and style handling in the runtime.

Closes angular#23485
IgorMinar added a commit to IgorMinar/angular that referenced this issue Nov 15, 2019
This change enables "var(--my-var)" to pass through the style sanitizer.

After consulation with our security team, allowing these doesn't create
new attack vectors, so the sanitizer doesn't need to strip them.

Fixes parts of angular#23485 related to the sanitizer, other use cases discussed
there related to binding have been addressed via other changes to the
class and style handling in the runtime.

Closes angular#23485
alxhub added a commit that referenced this issue Nov 20, 2019
…er (#33841)

This change enables "var(--my-var)" to pass through the style sanitizer.

After consulation with our security team, allowing these doesn't create
new attack vectors, so the sanitizer doesn't need to strip them.

Fixes parts of #23485 related to the sanitizer, other use cases discussed
there related to binding have been addressed via other changes to the
class and style handling in the runtime.

Closes #23485

PR Close #33841
@alxhub alxhub closed this in 55748db Nov 20, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
6 participants
You can’t perform that action at this time.