Skip to content

Lock down CSP in “.html” files to prove we can. #289

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

Merged
merged 1 commit into from
Mar 19, 2025
Merged

Lock down CSP in “.html” files to prove we can. #289

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion demo/chess/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta charset="utf-8">
<meta http-equiv="content-security-policy" content="default-src 'self';">
<link rel="stylesheet" href="index.css">
<script type="module" src="index.js"></script>
</head>
Expand Down
3 changes: 2 additions & 1 deletion demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta charset="utf-8">
<meta http-equiv="content-security-policy" content="default-src 'self';">
<link rel="stylesheet" href="index.css">
<script type="module" src="index.js"></script>
</head>
Expand Down
17 changes: 11 additions & 6 deletions demo/lit-html/demo-lit-html.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,17 @@
import BaseElement from './base-element.js';

export default class DemoLitHtml extends BaseElement {
static get styles() {
const styleSheet = new CSSStyleSheet();
styleSheet.replaceSync(`
#container[emoji]::before {
content: " " attr(emoji);
font-size: 2rem;
}
`);
return [styleSheet];
}

static get properties() {
return {
emoji: {
Expand All @@ -16,12 +27,6 @@ export default class DemoLitHtml extends BaseElement {
static template(html, { ifDefined }) {
return ({ emoji, message }) => {
return html`
<style>
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Simply changing this inline <style> tag usage so we can have a stricter content security policy on this particular demo. To be clear, this is not production code.

#container[emoji]::before {
content: " " attr(emoji);
font-size: 2rem;
}
</style>
<div id="container" emoji="${ifDefined(emoji)}">Rendered &ldquo;${message}&rdquo; using <code>lit-html</code>.</div>
`;
};
Expand Down
3 changes: 2 additions & 1 deletion demo/lit-html/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta charset="utf-8">
<meta http-equiv="content-security-policy" content="default-src 'self'; script-src 'self' 'sha256-vpd4e6Q2EYlXOAcBOCPYNRqOSK1caV1iPamby7fBE30=' https://esm.sh/[email protected]/;">
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Because an import map is necessarily an inlined script (at least for now), we need to explicitly allow it. The browser actually makes this super easy since the CSP error will log out the hash in the console and you can just copy-paste it here. I was worried that this might be a maintenance burden, but it’s actually not bad at all.

Copy link
Collaborator

Choose a reason for hiding this comment

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

that's actually horribleawesome

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Ha. I agree. I had the same emotional journey.

<script type="importmap">
{
"imports": {
Expand Down
5 changes: 4 additions & 1 deletion demo/performance/default.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta charset="utf-8">
<!-- We use “unsafe-eval” below because we need to trick the browser into
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Where we loosen our policy — I added explanatory commentary.

not caching tagged template string objects to test interpretation. -->
<meta http-equiv="content-security-policy" content="default-src 'self'; script-src 'self' 'unsafe-eval';">
<link rel="stylesheet" href="./index.css">
</head>
<body>
Expand Down
3 changes: 2 additions & 1 deletion demo/performance/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta charset="utf-8">
<meta http-equiv="content-security-policy" content="default-src 'self';">
<link rel="stylesheet" href="./index.css">
</head>
<body>
Expand Down
5 changes: 4 additions & 1 deletion demo/performance/lit-html.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta charset="utf-8">
<!-- We use “unsafe-eval” below because we need to trick the browser into
not caching tagged template string objects to test interpretation. -->
<meta http-equiv="content-security-policy" content="default-src 'self'; script-src 'self' 'unsafe-eval' 'sha256-2gPcHEAV/bRWIxMnz3UA5z6w2m9RdFis8ZAa8Y/EZVg=' https://esm.sh/[email protected] https://esm.sh/[email protected]/;">
<script type="importmap">
{
"imports": {
Expand Down
7 changes: 6 additions & 1 deletion demo/performance/react.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,12 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta charset="utf-8">
<!-- TODO: The react library has a bunch of dependencies which makes the CSP
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Where we were forces to loosen our policy more than we’d like… I added a TODO comment. Here, for example, it’s brutal to try and enumerate all the individual esm.sh urls for transitive dependencies of React. So, I just allow any package there via https://esm.sh/. This is just a demo, so I’m not terribly worried about it, but I think it’s good to call out when integration is cumbersome.

By contrast, the lit-html policy was actually a breeze as it doesn’t have dependencies (at least not for our usage in the demo).

Copy link
Collaborator

Choose a reason for hiding this comment

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

working as intended!

unwieldy. Rather than enumerate them all, a blanket rule is encoded
below to allow any access to https://esm.sh/. You wouldn’t want to do
that on a production site, this is just for the demo. -->
<meta http-equiv="content-security-policy" content="default-src 'self'; script-src 'self' 'sha256-HVRkfAW4ErWhOQ71jSlHDwiHtimNBYSzVw0wcuf6XwA=' https://esm.sh/;">
<script type="importmap">
{
"imports": {
Expand Down
9 changes: 8 additions & 1 deletion demo/performance/uhtml.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,14 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta charset="utf-8">
<!-- TODO: The uhtml library has a bunch of dependencies which makes the CSP
unwieldy. Rather than enumerate them all, a blanket rule is encoded
below to allow any access to https://esm.sh/. You wouldn’t want to do
that on a production site, this is just for the demo. -->
<!-- We use “unsafe-eval” below because we need to trick the browser into
not caching tagged template string objects to test interpretation. -->
<meta http-equiv="content-security-policy" content="default-src 'self'; script-src 'self' 'unsafe-eval' 'sha256-tqJYP2BfE6OLuQk1TacH2iYQga16y7fS413atm5uM9o=' https://esm.sh/;">
<script type="importmap">
{
"imports": {
Expand Down
7 changes: 6 additions & 1 deletion demo/react/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,12 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta charset="utf-8">
<!-- TODO: The react library has a bunch of dependencies which makes the CSP
unwieldy. Rather than enumerate them all, a blanket rule is encoded
below to allow any access to https://esm.sh/. You wouldn’t want to do
that on a production site, this is just for the demo. -->
<meta http-equiv="content-security-policy" content="default-src 'self'; script-src 'self' 'sha256-HVRkfAW4ErWhOQ71jSlHDwiHtimNBYSzVw0wcuf6XwA=' https://esm.sh/;">
<script type="importmap">
{
"imports": {
Expand Down
17 changes: 11 additions & 6 deletions demo/uhtml/demo-uhtml.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,17 @@
import BaseElement from './base-element.js';

export default class DemoUhtml extends BaseElement {
static get styles() {
const styleSheet = new CSSStyleSheet();
styleSheet.replaceSync(`
#container[emoji]::before {
content: " " attr(emoji);
font-size: 2rem;
}
`);
return [styleSheet];
}

static get properties() {
return {
emoji: {
Expand All @@ -16,12 +27,6 @@ export default class DemoUhtml extends BaseElement {
static template(html) {
return ({ emoji, message }) => {
return html`
<style>
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Simply changing this inline <style> tag usage so we can have a stricter content security policy on this particular demo. To be clear, this is not production code.

#container[emoji]::before {
content: " " attr(emoji);
font-size: 2rem;
}
</style>
<div id="container" emoji="${emoji}">Rendered &ldquo;${message}&rdquo; using <code>µhtml</code>.</div>
`;
};
Expand Down
7 changes: 6 additions & 1 deletion demo/uhtml/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,12 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta charset="utf-8">
<!-- TODO: The uhtml library has a bunch of dependencies which makes the CSP
unwieldy. Rather than enumerate them all, a blanket rule is encoded
below to allow any access to https://esm.sh/. You wouldn’t want to do
that on a production site, this is just for the demo. -->
<meta http-equiv="content-security-policy" content="default-src 'self'; script-src 'self' 'sha256-tqJYP2BfE6OLuQk1TacH2iYQga16y7fS413atm5uM9o=' https://esm.sh/;">
<script type="importmap">
{
"imports": {
Expand Down
3 changes: 2 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta charset="utf-8">
<meta http-equiv="content-security-policy" content="default-src 'self';">
<meta http-equiv="refresh" content="0; url=/demo">
</head>
<body></body>
Expand Down
7 changes: 6 additions & 1 deletion test/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,13 @@
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="content-security-policy" content="default-src 'self'; script-src 'self' 'sha256-RVXBMfHRdgc8777jps6ngyVOY4g0I7LMQ7IUzGv2lbA=';">
<script type="importmap">
{ "imports": { "@netflix/x-test/": "../node_modules/@netflix/x-test/" } }
{
"imports": {
"@netflix/x-test/": "../node_modules/@netflix/x-test/"
}
}
</script>
</head>
<body>
Expand Down
7 changes: 6 additions & 1 deletion test/test-analysis-errors.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,13 @@
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="content-security-policy" content="default-src 'self'; script-src 'self' 'sha256-RVXBMfHRdgc8777jps6ngyVOY4g0I7LMQ7IUzGv2lbA=';">
<script type="importmap">
{ "imports": { "@netflix/x-test/": "../node_modules/@netflix/x-test/" } }
{
"imports": {
"@netflix/x-test/": "../node_modules/@netflix/x-test/"
}
}
</script>
</head>
<body>
Expand Down
7 changes: 6 additions & 1 deletion test/test-attribute-changed-errors.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,13 @@
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="content-security-policy" content="default-src 'self'; script-src 'self' 'sha256-RVXBMfHRdgc8777jps6ngyVOY4g0I7LMQ7IUzGv2lbA=';">
<script type="importmap">
{ "imports": { "@netflix/x-test/": "../node_modules/@netflix/x-test/" } }
{
"imports": {
"@netflix/x-test/": "../node_modules/@netflix/x-test/"
}
}
</script>
</head>
<body>
Expand Down
7 changes: 6 additions & 1 deletion test/test-basic-properties.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,13 @@
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="content-security-policy" content="default-src 'self'; script-src 'self' 'sha256-RVXBMfHRdgc8777jps6ngyVOY4g0I7LMQ7IUzGv2lbA=';">
<script type="importmap">
{ "imports": { "@netflix/x-test/": "../node_modules/@netflix/x-test/" } }
{
"imports": {
"@netflix/x-test/": "../node_modules/@netflix/x-test/"
}
}
</script>
</head>
<body>
Expand Down
7 changes: 6 additions & 1 deletion test/test-computed-properties.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,13 @@
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="content-security-policy" content="default-src 'self'; script-src 'self' 'sha256-RVXBMfHRdgc8777jps6ngyVOY4g0I7LMQ7IUzGv2lbA=';">
<script type="importmap">
{ "imports": { "@netflix/x-test/": "../node_modules/@netflix/x-test/" } }
{
"imports": {
"@netflix/x-test/": "../node_modules/@netflix/x-test/"
}
}
</script>
</head>
<body>
Expand Down
7 changes: 6 additions & 1 deletion test/test-default-properties.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,13 @@
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="content-security-policy" content="default-src 'self'; script-src 'self' 'sha256-RVXBMfHRdgc8777jps6ngyVOY4g0I7LMQ7IUzGv2lbA=';">
<script type="importmap">
{ "imports": { "@netflix/x-test/": "../node_modules/@netflix/x-test/" } }
{
"imports": {
"@netflix/x-test/": "../node_modules/@netflix/x-test/"
}
}
</script>
</head>
<body>
Expand Down
7 changes: 6 additions & 1 deletion test/test-element-upgrade.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,13 @@
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="content-security-policy" content="default-src 'self'; script-src 'self' 'sha256-RVXBMfHRdgc8777jps6ngyVOY4g0I7LMQ7IUzGv2lbA=';">
<script type="importmap">
{ "imports": { "@netflix/x-test/": "../node_modules/@netflix/x-test/" } }
{
"imports": {
"@netflix/x-test/": "../node_modules/@netflix/x-test/"
}
}
</script>
</head>
<body>
Expand Down
7 changes: 6 additions & 1 deletion test/test-initial-properties.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,13 @@
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="content-security-policy" content="default-src 'self'; script-src 'self' 'sha256-RVXBMfHRdgc8777jps6ngyVOY4g0I7LMQ7IUzGv2lbA=';">
<script type="importmap">
{ "imports": { "@netflix/x-test/": "../node_modules/@netflix/x-test/" } }
{
"imports": {
"@netflix/x-test/": "../node_modules/@netflix/x-test/"
}
}
</script>
</head>
<body>
Expand Down
7 changes: 6 additions & 1 deletion test/test-initialization-errors.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,13 @@
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="content-security-policy" content="default-src 'self'; script-src 'self' 'sha256-RVXBMfHRdgc8777jps6ngyVOY4g0I7LMQ7IUzGv2lbA=';">
<script type="importmap">
{ "imports": { "@netflix/x-test/": "../node_modules/@netflix/x-test/" } }
{
"imports": {
"@netflix/x-test/": "../node_modules/@netflix/x-test/"
}
}
</script>
</head>
<body>
Expand Down
7 changes: 6 additions & 1 deletion test/test-internal-properties.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,13 @@
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="content-security-policy" content="default-src 'self'; script-src 'self' 'sha256-RVXBMfHRdgc8777jps6ngyVOY4g0I7LMQ7IUzGv2lbA=';">
<script type="importmap">
{ "imports": { "@netflix/x-test/": "../node_modules/@netflix/x-test/" } }
{
"imports": {
"@netflix/x-test/": "../node_modules/@netflix/x-test/"
}
}
</script>
</head>
<body>
Expand Down
7 changes: 6 additions & 1 deletion test/test-listeners.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,13 @@
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="content-security-policy" content="default-src 'self'; script-src 'self' 'sha256-RVXBMfHRdgc8777jps6ngyVOY4g0I7LMQ7IUzGv2lbA=';">
<script type="importmap">
{ "imports": { "@netflix/x-test/": "../node_modules/@netflix/x-test/" } }
{
"imports": {
"@netflix/x-test/": "../node_modules/@netflix/x-test/"
}
}
</script>
</head>
<body>
Expand Down
7 changes: 6 additions & 1 deletion test/test-observed-properties.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,13 @@
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="content-security-policy" content="default-src 'self'; script-src 'self' 'sha256-RVXBMfHRdgc8777jps6ngyVOY4g0I7LMQ7IUzGv2lbA=';">
<script type="importmap">
{ "imports": { "@netflix/x-test/": "../node_modules/@netflix/x-test/" } }
{
"imports": {
"@netflix/x-test/": "../node_modules/@netflix/x-test/"
}
}
</script>
</head>
<body>
Expand Down
7 changes: 6 additions & 1 deletion test/test-parser.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,13 @@
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="content-security-policy" content="default-src 'self'; script-src 'self' 'sha256-RVXBMfHRdgc8777jps6ngyVOY4g0I7LMQ7IUzGv2lbA=';">
<script type="importmap">
{ "imports": { "@netflix/x-test/": "../node_modules/@netflix/x-test/" } }
{
"imports": {
"@netflix/x-test/": "../node_modules/@netflix/x-test/"
}
}
</script>
</head>
<body>
Expand Down
Loading