Closed TheodoreGC closed 6 months ago
Thanks for the issue! This issue has been labeled as holiday triage
. With the winter holidays quickly approaching, much of the Stencil Team will soon be taking time off. During this time, issue triaging and PR review will be delayed until the team begins to return. After this period, we will work to ensure that all new issues & PRs are properly triaged.
In the meantime, please read our 2023 Winter Holiday Triage Guide for information on how to ensure that your issue is triaged correctly.
Thank you!
Hey @TheodoreGC 👋
Thanks for the report! It looks like this was created using an older version of our bug report template. Can you please add the following information to the issue summary for me? This helps us triage/understand issues much more efficiently.
npx stencil info
, browser (e.g. does this only apply to Chrome?), versions of affected browser, and any other environment information you think is important hereThanks!
Thanks for the issue! This issue has been labeled as needs reproduction
. This label is added to issues that need a code reproduction.
Please reproduce this issue in an Stencil starter component library and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.
If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.
For a guide on how to create a good reproduction, see our Contributing Guide.
Hey @rwaskiewicz 👋,
Thank you for the guidance. I've updated the bug report with the additional information you requested. Here's a quick summary:
npx stencil info
which details my development environment.Thanks again for your assistance!
Hey @TheodoreGC - can you please provide some additional information for us?
Thanks!
Hey @rwaskiewicz,
Thanks for reaching out. I've updated the GitHub repository to include the full project of the web component. This should give a clearer picture.
Additionally, I've revised the README to provide detailed instructions on how to install the component. This will help in setting up the environment for testing and reproducing the issue.
Regarding the browsers, I've tested this behaviour on the following:
I hope this information helps. Let me know if you need anything else.
Thanks!
Thanks! I've validated that this is a bug, and I've ingested this into our backlog. I'll see if we can get the PR reviewed soon - there's a couple mixed usages of innerHTML
and textContent
that I want us (the team) to verify/validate everything works as expected. Thanks again!
Hey @TheodoreGC, just set your PR to merge, so it will be included in the next release of Stencil. We'll be sure to ping here when that gets released!
A fix for this has been published in v4.12.3.
Stencil version:
Current behavior: When attempting to inject a web component, built using Stencil, into a webpage via a browser extension's content script, an error is encountered:
Expected behavior: The process of injecting a Stencil-generated web component into a webpage through a browser extension's content script should occur seamlessly, without triggering any errors related to content security policies or HTML trust requirements.
Other information: This issue arises due to Stencil's bootstrap process for components, which relies on the
innerHTML
method. This method can be considered unsafe in the context of Chrome extensions, leading to stricter security checks and the resulting error.https://github.com/ionic-team/stencil/blob/a69b4d619ebf4f65f54e7ad35c24b28f2416d9c8/src/runtime/bootstrap-lazy.ts#L197 https://github.com/ionic-team/stencil/blob/a69b4d619ebf4f65f54e7ad35c24b28f2416d9c8/src/runtime/bootstrap-lazy.ts#L202
The error encountered indicates a conflict with the Content Security Policy (CSP) typically enforced in browser extensions. CSP aims to mitigate risks associated with cross-site scripting (XSS) and data injection attacks, which are particularly sensitive in the context of extensions that have elevated access to the user's browser.
As a proposed solution, replacing innerHTML with textContent in these contexts could mitigate the issue. textContent is generally considered a safer alternative and aligns well with the security requirements of browser extensions. An example substitution could be as follows:
Rationale for prefering
textContent
overinnerHTML
here:<style>
Elements: In the case of appending CSS to<style>
elements, the switch frominnerHTML
totextContent
carries no functional drawbacks for classical web applications. Since the content being manipulated is CSS (a form of text), and not HTML, there are no functional disadvantages to usingtextContent
overinnerHTML
. Both methods effectively achieve the same result when used to update the content of<style>
elements.In the specific scenario of appending CSS to
<style>
elements within Stencil's component initialisation process, the adoption oftextContent
is not only a security enhancement but also aligns with best practices for performance and code clarity. This change would positively impact both browser extensions and traditional web applications, without any loss of functionality or capability.System Info:
Code Reproduction URL:
Stencil Bug Reproduction Repository
Steps to Reproduce:
The steps to reproduce the issue can be found here