Use browser.tabs.insertCSS everywhere #248
Description
- Browser: Firefox but probably not important
- Operating System: GNU/Linux but not important
Currently, Stylus applies styles to most pages by sending them in a message to a content script which creates a style element and inserts it into the page DOM.
(An exception to that is XML documents, for which the message gets reflected back to the background script and styles are applied via the browser.tabs.insertCSS API.)
As a result of injection being performed from a content script, the page’s own scripts see the style elements and can tamper with them. As a realistic example, a slowly loading page can unintentionally overwrite the injected styles.
Taken from the security point of view, this is an information disclosure vulnerability (page script has access to the userstyle source, can leak it to the site owner to fingerprint the user) and can be a tampering vulnerability (page script can deny the user’s right to customize site appearance).
I have made a proof-of-concept page.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test style injection detection</title>
<link rel="stylesheet" href="data:text/css,body%7Bbackground:%23faf0d7%7D" />
<script>
setInterval(function () {
var styles = document.querySelectorAll('style');
document.getElementById('n-styles').textContent = '' + styles.length;
styles.forEach(function (style) {
style.remove();
})
}, 1000);
</script>
</head>
<body>
<p>I see <span id="n-styles">no</span> styles in this page.</p>
</body>
</html>To reproduce:
-
Create a global style or a style that applies specifically to that URI. E.g.:
@-moz-document url-prefix("http://centaur.ath.cx/test-styles.html") { body { background: #e4ffc7 } } -
Navigate to that page. Observe that the page background is a pleasant light green, as specified by the user style.
-
Wait a second. Observe that the page script notices the user style and removes it, restoring its ugly brown background.
I have loaded the apply-css example extension that demonstrates the insertCSS API, and the style it injects is not detected by the page script.
Is there any reason why insertCSS should not be used for all pages which it is able to handle?