Security News
Research
Data Theft Repackaged: A Case Study in Malicious Wrapper Packages on npm
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
construct-style-sheets-polyfill
Advanced tools
Constructible style sheets/adopted style sheets polyfill
This package is a polyfill for the constructible style sheets/adopted style sheets specification. The full specificaiton is enabled by default in Google Chrome as of version 73.
Currently Mozilla is considering implementation of the feature, marking it as "worth prototyping" while Apple has not publically signaled, they have been active in the standards discussions surrounding it.
The constructible style sheets proposal is intended to allow for the dynamic creation and sharing of style sheets, even across shadow boundaries. By adopting a style sheet into a shadow root, the same sheet can be applied to multiple nodes, including the document.
This polyfill will create a new style element for every DocumentOrShadowRoot
into which the sheet is adopted. This is counter to the current proposal, but
updates to the style sheet using the replace
or replaceSync
methods should
update the relevant style elements with the updated content across all adopters.
No changes will occur in a browser that supports the feature by default.
This polyfill supports all modern browsers and IE 11.
For browsers that do not support the web components specification (currently IE 11 and Edge) only the document-level style sheets adoption works.
To make this polyfill work with IE 11 you need the following tools:
Symbol
polyfill (with support for Symbol.hasInstance
).instanceof
against CSSStyleSheet
.This package is available on npm
under the name construct-style-sheet-polyfill
and can be installed with npm,
yarn, unpkg
or however else you consume dependencies.
npm:
npm i construct-style-sheets-polyfill
yarn:
yarn add construct-style-sheets-polyfill
unpkg:
import 'https://unpkg.com/construct-style-sheets-polyfill';
const everythingTomato = new CSSStyleSheet();
everythingTomato
.replace(
`
* {
color: tomato;
}
`,
)
.then(console.log); // will log the CSSStyleSheet object
document.adoptedStyleSheets = [everythingTomato];
class TestEl extends HTMLElement {
constructor() {
super();
this.attachShadow({mode: 'open'});
this.shadowRoot.adoptedStyleSheets = [everythingTomato];
}
connectedCallback() {
this.shadowRoot.innerHTML = `<h1>This will be tomato colored, too</h1>`;
}
}
customElements('test-el', TestEl);
const testEl = new TestEl();
document.body.appendChild(testEl);
The polyfill will append new style
tags to the designated DocumentOrShadowRoot
.
Manually removing the style node will cause a re-insertion of the styles at the
designated root. To remove a style sheet, you must remove the style element
from the element.adoptedStyleSheets
array. The behavior here is supposed to
emulate a FrozenArray
, so modifying the array in question will have no effect
until the value is changed using a setter.
This packages doesn't necessarily follow semantic versioning. As the spec is still under consideration and implementation by browser vendors, the features supported by this package will change (generally following Chrome's implementation).
FAQs
Constructible style sheets/adopted style sheets polyfill
The npm package construct-style-sheets-polyfill receives a total of 67,504 weekly downloads. As such, construct-style-sheets-polyfill popularity was classified as popular.
We found that construct-style-sheets-polyfill demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.