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

Support style-src 'nonce' security policy #867

Closed
5 of 6 tasks
redallen opened this issue Dec 20, 2019 · 7 comments
Closed
5 of 6 tasks

Support style-src 'nonce' security policy #867

redallen opened this issue Dec 20, 2019 · 7 comments
Assignees

Comments

@redallen
Copy link

redallen commented Dec 20, 2019

Description

Inline styles are not applied and the following console error is thrown when using static get styles:

Content Security Policy: The page’s settings blocked the loading of a resource at inline (“style-src”).

Live Demo

https://stackblitz.com/edit/lit-element-example-qpfhsi?file=index.html

Steps to Reproduce

  1. Add <meta http-equiv="Content-Security-Policy" content="style-src 'nonce-2726c7f26c'" > to <head> in a browser that does not support constructable stylesheets such as Firefox. For more details on this security policy, see MDN.

Expected Results

You can pass a nonce to the css tagged template function so it creates <style nonce="2726c7f26c> when inserting the <style> tag into the document.

Actual Results

There's no API available to set a nonce using static get styles.

Browsers Affected

  • Chrome
  • Firefox
  • Edge
  • Safari 11
  • Safari 10
  • IE 11

Versions

  • lit-element: v2.2.1
  • webcomponents: v2.4.0
@redallen redallen changed the title Support adding nonce to inline style tag Support style-src 'nonce' security policy Dec 20, 2019
@sorvell sorvell self-assigned this Jan 22, 2020
@justinfagnani
Copy link
Contributor

I think we could handle this with a LitElement.styleNonce static that we apply to all injected <style> tags.

@mdownes
Copy link

mdownes commented Jul 6, 2021

Has there been any update on this? Or has the issue been fixed in the new lit repo? It's really stopping me adopt CSP while using lit-element

@samaniehsan
Copy link

samaniehsan commented Aug 13, 2021

has anybody found a reliable solution to this?

We have the same exact issues with lit elements.

We have an APP that consumes many lit elements as npm packages.

Those lit elements ship with their own incremental styles (in the shadow dom). (using style properties).

The app attaches nonce using a header and includes the nonce on all embedded styles and scripts.

however when lit components tries to add it's own style element the system blows due to unsafe style. as noted in this issue.

@sorvell
Copy link
Member

sorvell commented Sep 8, 2022

Fixed via lit/lit#2134

@sorvell sorvell closed this as completed Sep 8, 2022
@andy-blum
Copy link

@justinfagnani - Is there any chance the PR linked above could get back-ported to this repo? Our team is still running on lit-element@^2.5.1 and we're hitting this issue.

@justinfagnani
Copy link
Contributor

@andy-blum yeah, I think we can do that.

Is there any reason you haven't upgraded to LitElement 3.x yet? Things are mostly compatible, so I'm curious what incompatibilities you've run into.

@andy-blum
Copy link

I'm not 100% sure why we haven't upgraded, it may be in progress and it's just a long, deliberate process to ensure backwards compatibility. A minor/patch upgrade would likely be much quicker.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Archived in project
Development

No branches or pull requests

6 participants