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.

Sign up for GitHub

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

Jump to bottom

scripts: Adding Attributes to Script Tags Generated from Script Templates #601

Closed
markkhoo opened this issue Mar 8, 2024 · 5 comments
Closed

scripts: Adding Attributes to Script Tags Generated from Script Templates #601

markkhoo opened this issue Mar 8, 2024 · 5 comments
Labels
enhancement New feature or request NeedsDecision Issue needs some more discussion so a decision can be made scripts

Comments

@markkhoo
Copy link

markkhoo commented Mar 8, 2024

Background

My script tags require a nonce attributed because a Content Security Policy is enforced. As an example:

templ head() {
  <head>
    <script src="/static/script/htmx.min.js" nonce={ ctx.Value("htmxNonce").(string) }></script>
  </head>
}

However, for some scripts I need to pass in go data. I can do that as mentioned in the docs:

package main

script graph(data []TimeValue) {
	const chart = LightweightCharts.createChart(document.body, { width: 400, height: 300 });
	const lineSeries = chart.addLineSeries();
	lineSeries.setData(data);
}

templ page(data []TimeValue) {
	<html>
		<head>
			<script src="https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.production.js"></script>
		</head>
		<body onload={ graph(data) }></body>
	</html>
}

Issue

Because of the Content Security Policy, scripts generated from the script template will never run because they don't have the nonce attribute with the correct value.

Request

Can there be some way to configure script attributes in the script template?
@michaelByrne
Copy link
Contributor

@a-h Would it be reasonable/worth it to add some configuration/rendering options to the ComponentScript template that could handle something like this? (Still new to the codebase some I'm probably reaching.)

@matthewspivey
Copy link
Contributor

As a workaround, html/template allows for a script element with both attributes and passing variables.

https://templ.guide/syntax-and-usage/using-with-go-templates#using-htmltemplate-in-a-templ-component

It'd be more convenient to be able to pass attributes, such as type, defer, and nonce.

@joerdav joerdav added enhancement New feature or request scripts NeedsDecision Issue needs some more discussion so a decision can be made labels May 14, 2024
@joerdav joerdav changed the title Adding Attributes to Script Tags Generated from Script Templates scripts: Adding Attributes to Script Tags Generated from Script Templates May 14, 2024
@joerdav
Copy link
Collaborator

joerdav commented May 14, 2024 •
edited
Loading

This sounds like a very valid use-case.

Are there any design suggestions?

As a complete alternative, it could be possible to add a nonce value to the context that gets added to all scripts? I've seen js frameworks take this approach. It could look as follows:

script graph(data []TimeValue) {
	const chart = LightweightCharts.createChart(document.body, { width: 400, height: 300 });
	const lineSeries = chart.addLineSeries();
	lineSeries.setData(data);
}

templ page(data []TimeValue) {
	<html>
		<head>
			<script src="https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.production.js"></script>
		</head>
		<body onload={ graph(data) }></body>
	</html>
}

func main() {
	nonce := generateNonce()
	ctx := templ.ContextWithNonce(nonce)
	page(getData()).Render(ctx, os.Stout)
}

@a-h a-h mentioned this issue May 15, 2024
Closed
@a-h
Copy link
Owner

a-h commented May 15, 2024

I've put together an example of using <script> elements to pass data to scripts instead of the script templates. Would like your feedback on it, see #739

@joerdav
Copy link
Collaborator

joerdav commented May 31, 2024

Also templ scripts can now be given a nonce so I think we can close this.

https://templ.guide/security/content-security-policy

@joerdav joerdav closed this as completed May 31, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement New feature or request NeedsDecision Issue needs some more discussion so a decision can be made scripts
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@matthewspivey @a-h @michaelByrne @joerdav @markkhoo