search

jackocnr / intl-tel-input

A JavaScript plugin for entering and validating international telephone numbers. React and Vue components also included.
https://intl-tel-input.com
MIT License
7.69k stars 1.95k forks source link

Avoid CSP-incompatible inline style attributes #1778

Closed aduth closed 2 months ago

aduth commented 2 months ago

Summary: Updates country container styling to apply left or right styles using DOM style properties, rather than applying styles through an inline style attribute.

Context:

When trying to upgrade to the latest version of intl-tel-input in our project, I started noticing the following errors in the console:

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'unsafe-inline' 'nonce-...'". Note that 'unsafe-inline' is ignored if either a hash or nonce value is present in the source list.

Our application enforces a content security policy (CSP), which disallows inline style attributes by default (see style-src unsafe-inline reference).

For the purpose of how intl-tel-input is applying these styles, it's simple enough to swap the style attribute with style property assignments.

From the above MDN resource:

styles properties that are set directly on the element's style property will not be blocked, allowing users to safely manipulate styles via JavaScript:

This also appears to be the only inline style attribute applied in the project, and there are several other instances of direct style property assignment (example).

Included are regression specs which pass before and after the change, included to increase confidence in changes.

jackocnr commented 2 months ago

Thanks for this. Released in v24.3.7.