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

fix: csp nonce injection when no closing tag (#16281) #16282

Merged
merged 3 commits into from Mar 31, 2024

Conversation

gregtwallace
Copy link
Contributor

@gregtwallace gregtwallace commented Mar 26, 2024

Not all html elements have an ending tag, for example:

<link rel="stylesheet" href="/roboto.css" />

In such cases, the current injection func injects the nonce after the forward slash, instead of before it current result:

<link rel="stylesheet" href="/roboto.css" / nonce="abc123">

this patch corrects the behavior to:

<link rel="stylesheet" href="/roboto.css"  nonce="abc123"/>

Copy link

stackblitz bot commented Mar 26, 2024

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

@sapphi-red sapphi-red linked an issue Mar 29, 2024 that may be closed by this pull request
7 tasks
@sapphi-red sapphi-red added the p3-minor-bug An edge case that only affects very specific usage (priority) label Mar 29, 2024
Copy link
Member

@sapphi-red sapphi-red left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The tests seem to be failing please have a look

Not all html elements have an ending tag, for example:
<link rel="stylesheet" href="/roboto.css" />
In such cases, the current injection func injects the nonce after the forward slash, instead of before it
current result:
<link rel="stylesheet" href="/roboto.css" / nonce="abc123">

this patch corrects the behavior to:
<link rel="stylesheet" href="/roboto.css"  nonce="abc123"/>
Change fix method due to the way some tags are manipulated elsewhere.

For example, the csp playground contains:
<link rel="stylesheet" href="./linked.css" />

Which is then transformed into this prior to nonce injection:
<link rel="stylesheet" crossorigin href="/assets/index-BTAfrA7H.css">

There is no endTag, but the startTag no longer ends in `/>`. This is likely not ideal but this fix works around that issue.
@gregtwallace
Copy link
Contributor Author

Fixed. The way the HTML is manipulated in the playground vs. how it is manipulated when running npx vite doesn't appear to be the same. The new method should handle all variants gracefully.

I'm not sure what the remaining error is being caused by, but it appears unrelated.

Copy link
Member

@sapphi-red sapphi-red left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks!

@patak-dev patak-dev merged commit 3c85c6b into vitejs:main Mar 31, 2024
10 checks passed
patak-dev pushed a commit that referenced this pull request Apr 5, 2024
Co-authored-by: 翠 / green <green@sapphi.red>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
p3-minor-bug An edge case that only affects very specific usage (priority)
Projects
None yet
Development

Successfully merging this pull request may close these issues.

CSP Injects Incorrectly on Elements Without Closing Tag
3 participants