Skip to content

Commit 894037d

Browse files
theengineeartheengineear
committed
Lock down CSP in “.html” files to prove we can.
We want integrators to be able to enforce the strictest content security policies possible — this change set places strict CSPs in our own documents to keep us honest.
1 parent 4d610d7 commit 894037d

33 files changed

+188
-43
lines changed

‎demo/chess/index.html

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
<!doctype html>
22
<html>
33
<head>
4-
<meta charset="UTF-8">
4+
<meta charset="utf-8">
5+
<meta http-equiv="content-security-policy" content="default-src 'self';">
56
<link rel="stylesheet" href="index.css">
67
<script type="module" src="index.js"></script>
78
</head>

‎demo/index.html

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
<!doctype html>
22
<html>
33
<head>
4-
<meta charset="UTF-8">
4+
<meta charset="utf-8">
5+
<meta http-equiv="content-security-policy" content="default-src 'self';">
56
<link rel="stylesheet" href="index.css">
67
<script type="module" src="index.js"></script>
78
</head>

‎demo/lit-html/demo-lit-html.js

+11-6
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,17 @@
11
import BaseElement from './base-element.js';
22

33
export default class DemoLitHtml extends BaseElement {
4+
static get styles() {
5+
const styleSheet = new CSSStyleSheet();
6+
styleSheet.replaceSync(`
7+
#container[emoji]::before {
8+
content: " " attr(emoji);
9+
font-size: 2rem;
10+
}
11+
`);
12+
return [styleSheet];
13+
}
14+
415
static get properties() {
516
return {
617
emoji: {
@@ -16,12 +27,6 @@ export default class DemoLitHtml extends BaseElement {
1627
static template(html, { ifDefined }) {
1728
return ({ emoji, message }) => {
1829
return html`
19-
<style>
20-
#container[emoji]::before {
21-
content: " " attr(emoji);
22-
font-size: 2rem;
23-
}
24-
</style>
2530
<div id="container" emoji="${ifDefined(emoji)}">Rendered &ldquo;${message}&rdquo; using <code>lit-html</code>.</div>
2631
`;
2732
};

‎demo/lit-html/index.html

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
<!doctype html>
22
<html>
33
<head>
4-
<meta charset="UTF-8">
4+
<meta charset="utf-8">
5+
<meta http-equiv="content-security-policy" content="default-src 'self'; script-src 'self' 'sha256-vpd4e6Q2EYlXOAcBOCPYNRqOSK1caV1iPamby7fBE30=' https://esm.sh/[email protected]/;">
56
<script type="importmap">
67
{
78
"imports": {

‎demo/performance/default.html

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
<!doctype html>
22
<html>
33
<head>
4-
<meta charset="UTF-8">
4+
<meta charset="utf-8">
5+
<!-- We use “unsafe-eval” below because we need to trick the browser into
6+
not caching tagged template string objects to test interpretation. -->
7+
<meta http-equiv="content-security-policy" content="default-src 'self'; script-src 'self' 'unsafe-eval';">
58
<link rel="stylesheet" href="./index.css">
69
</head>
710
<body>

‎demo/performance/index.html

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
<!doctype html>
22
<html>
33
<head>
4-
<meta charset="UTF-8">
4+
<meta charset="utf-8">
5+
<meta http-equiv="content-security-policy" content="default-src 'self';">
56
<link rel="stylesheet" href="./index.css">
67
</head>
78
<body>

‎demo/performance/lit-html.html

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
<!doctype html>
22
<html>
33
<head>
4-
<meta charset="UTF-8">
4+
<meta charset="utf-8">
5+
<!-- We use “unsafe-eval” below because we need to trick the browser into
6+
not caching tagged template string objects to test interpretation. -->
7+
<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]/;">
58
<script type="importmap">
69
{
710
"imports": {

‎demo/performance/react.html

+6-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
<!doctype html>
22
<html>
33
<head>
4-
<meta charset="UTF-8">
4+
<meta charset="utf-8">
5+
<!-- TODO: The react library has a bunch of dependencies which makes the CSP
6+
unwieldy. Rather than enumerate them all, a blanket rule is encoded
7+
below to allow any access to https://esm.sh/. You wouldn’t want to do
8+
that on a production site, this is just for the demo. -->
9+
<meta http-equiv="content-security-policy" content="default-src 'self'; script-src 'self' 'sha256-HVRkfAW4ErWhOQ71jSlHDwiHtimNBYSzVw0wcuf6XwA=' https://esm.sh/;">
510
<script type="importmap">
611
{
712
"imports": {

‎demo/performance/uhtml.html

+8-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,14 @@
11
<!doctype html>
22
<html>
33
<head>
4-
<meta charset="UTF-8">
4+
<meta charset="utf-8">
5+
<!-- TODO: The uhtml library has a bunch of dependencies which makes the CSP
6+
unwieldy. Rather than enumerate them all, a blanket rule is encoded
7+
below to allow any access to https://esm.sh/. You wouldn’t want to do
8+
that on a production site, this is just for the demo. -->
9+
<!-- We use “unsafe-eval” below because we need to trick the browser into
10+
not caching tagged template string objects to test interpretation. -->
11+
<meta http-equiv="content-security-policy" content="default-src 'self'; script-src 'self' 'unsafe-eval' 'sha256-tqJYP2BfE6OLuQk1TacH2iYQga16y7fS413atm5uM9o=' https://esm.sh/;">
512
<script type="importmap">
613
{
714
"imports": {

‎demo/react/index.html

+6-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
<!doctype html>
22
<html>
33
<head>
4-
<meta charset="UTF-8">
4+
<meta charset="utf-8">
5+
<!-- TODO: The react library has a bunch of dependencies which makes the CSP
6+
unwieldy. Rather than enumerate them all, a blanket rule is encoded
7+
below to allow any access to https://esm.sh/. You wouldn’t want to do
8+
that on a production site, this is just for the demo. -->
9+
<meta http-equiv="content-security-policy" content="default-src 'self'; script-src 'self' 'sha256-HVRkfAW4ErWhOQ71jSlHDwiHtimNBYSzVw0wcuf6XwA=' https://esm.sh/;">
510
<script type="importmap">
611
{
712
"imports": {

‎demo/uhtml/demo-uhtml.js

+11-6
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,17 @@
11
import BaseElement from './base-element.js';
22

33
export default class DemoUhtml extends BaseElement {
4+
static get styles() {
5+
const styleSheet = new CSSStyleSheet();
6+
styleSheet.replaceSync(`
7+
#container[emoji]::before {
8+
content: " " attr(emoji);
9+
font-size: 2rem;
10+
}
11+
`);
12+
return [styleSheet];
13+
}
14+
415
static get properties() {
516
return {
617
emoji: {
@@ -16,12 +27,6 @@ export default class DemoUhtml extends BaseElement {
1627
static template(html) {
1728
return ({ emoji, message }) => {
1829
return html`
19-
<style>
20-
#container[emoji]::before {
21-
content: " " attr(emoji);
22-
font-size: 2rem;
23-
}
24-
</style>
2530
<div id="container" emoji="${emoji}">Rendered &ldquo;${message}&rdquo; using <code>µhtml</code>.</div>
2631
`;
2732
};

‎demo/uhtml/index.html

+6-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
<!doctype html>
22
<html>
33
<head>
4-
<meta charset="UTF-8">
4+
<meta charset="utf-8">
5+
<!-- TODO: The uhtml library has a bunch of dependencies which makes the CSP
6+
unwieldy. Rather than enumerate them all, a blanket rule is encoded
7+
below to allow any access to https://esm.sh/. You wouldn’t want to do
8+
that on a production site, this is just for the demo. -->
9+
<meta http-equiv="content-security-policy" content="default-src 'self'; script-src 'self' 'sha256-tqJYP2BfE6OLuQk1TacH2iYQga16y7fS413atm5uM9o=' https://esm.sh/;">
510
<script type="importmap">
611
{
712
"imports": {

‎index.html

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
<!doctype html>
22
<html>
33
<head>
4-
<meta charset="UTF-8">
4+
<meta charset="utf-8">
5+
<meta http-equiv="content-security-policy" content="default-src 'self';">
56
<meta http-equiv="refresh" content="0; url=/demo">
67
</head>
78
<body></body>

‎test/index.html

+6-1
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,13 @@
22
<html>
33
<head>
44
<meta charset="utf-8">
5+
<meta http-equiv="content-security-policy" content="default-src 'self'; script-src 'self' 'sha256-RVXBMfHRdgc8777jps6ngyVOY4g0I7LMQ7IUzGv2lbA=';">
56
<script type="importmap">
6-
{ "imports": { "@netflix/x-test/": "../node_modules/@netflix/x-test/" } }
7+
{
8+
"imports": {
9+
"@netflix/x-test/": "../node_modules/@netflix/x-test/"
10+
}
11+
}
712
</script>
813
</head>
914
<body>

‎test/test-analysis-errors.html

+6-1
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,13 @@
22
<html>
33
<head>
44
<meta charset="utf-8">
5+
<meta http-equiv="content-security-policy" content="default-src 'self'; script-src 'self' 'sha256-RVXBMfHRdgc8777jps6ngyVOY4g0I7LMQ7IUzGv2lbA=';">
56
<script type="importmap">
6-
{ "imports": { "@netflix/x-test/": "../node_modules/@netflix/x-test/" } }
7+
{
8+
"imports": {
9+
"@netflix/x-test/": "../node_modules/@netflix/x-test/"
10+
}
11+
}
712
</script>
813
</head>
914
<body>

‎test/test-attribute-changed-errors.html

+6-1
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,13 @@
22
<html>
33
<head>
44
<meta charset="utf-8">
5+
<meta http-equiv="content-security-policy" content="default-src 'self'; script-src 'self' 'sha256-RVXBMfHRdgc8777jps6ngyVOY4g0I7LMQ7IUzGv2lbA=';">
56
<script type="importmap">
6-
{ "imports": { "@netflix/x-test/": "../node_modules/@netflix/x-test/" } }
7+
{
8+
"imports": {
9+
"@netflix/x-test/": "../node_modules/@netflix/x-test/"
10+
}
11+
}
712
</script>
813
</head>
914
<body>

‎test/test-basic-properties.html

+6-1
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,13 @@
22
<html>
33
<head>
44
<meta charset="utf-8">
5+
<meta http-equiv="content-security-policy" content="default-src 'self'; script-src 'self' 'sha256-RVXBMfHRdgc8777jps6ngyVOY4g0I7LMQ7IUzGv2lbA=';">
56
<script type="importmap">
6-
{ "imports": { "@netflix/x-test/": "../node_modules/@netflix/x-test/" } }
7+
{
8+
"imports": {
9+
"@netflix/x-test/": "../node_modules/@netflix/x-test/"
10+
}
11+
}
712
</script>
813
</head>
914
<body>

‎test/test-computed-properties.html

+6-1
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,13 @@
22
<html>
33
<head>
44
<meta charset="utf-8">
5+
<meta http-equiv="content-security-policy" content="default-src 'self'; script-src 'self' 'sha256-RVXBMfHRdgc8777jps6ngyVOY4g0I7LMQ7IUzGv2lbA=';">
56
<script type="importmap">
6-
{ "imports": { "@netflix/x-test/": "../node_modules/@netflix/x-test/" } }
7+
{
8+
"imports": {
9+
"@netflix/x-test/": "../node_modules/@netflix/x-test/"
10+
}
11+
}
712
</script>
813
</head>
914
<body>

‎test/test-default-properties.html

+6-1
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,13 @@
22
<html>
33
<head>
44
<meta charset="utf-8">
5+
<meta http-equiv="content-security-policy" content="default-src 'self'; script-src 'self' 'sha256-RVXBMfHRdgc8777jps6ngyVOY4g0I7LMQ7IUzGv2lbA=';">
56
<script type="importmap">
6-
{ "imports": { "@netflix/x-test/": "../node_modules/@netflix/x-test/" } }
7+
{
8+
"imports": {
9+
"@netflix/x-test/": "../node_modules/@netflix/x-test/"
10+
}
11+
}
712
</script>
813
</head>
914
<body>

‎test/test-element-upgrade.html

+6-1
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,13 @@
22
<html>
33
<head>
44
<meta charset="utf-8">
5+
<meta http-equiv="content-security-policy" content="default-src 'self'; script-src 'self' 'sha256-RVXBMfHRdgc8777jps6ngyVOY4g0I7LMQ7IUzGv2lbA=';">
56
<script type="importmap">
6-
{ "imports": { "@netflix/x-test/": "../node_modules/@netflix/x-test/" } }
7+
{
8+
"imports": {
9+
"@netflix/x-test/": "../node_modules/@netflix/x-test/"
10+
}
11+
}
712
</script>
813
</head>
914
<body>

‎test/test-initial-properties.html

+6-1
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,13 @@
22
<html>
33
<head>
44
<meta charset="utf-8">
5+
<meta http-equiv="content-security-policy" content="default-src 'self'; script-src 'self' 'sha256-RVXBMfHRdgc8777jps6ngyVOY4g0I7LMQ7IUzGv2lbA=';">
56
<script type="importmap">
6-
{ "imports": { "@netflix/x-test/": "../node_modules/@netflix/x-test/" } }
7+
{
8+
"imports": {
9+
"@netflix/x-test/": "../node_modules/@netflix/x-test/"
10+
}
11+
}
712
</script>
813
</head>
914
<body>

‎test/test-initialization-errors.html

+6-1
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,13 @@
22
<html>
33
<head>
44
<meta charset="utf-8">
5+
<meta http-equiv="content-security-policy" content="default-src 'self'; script-src 'self' 'sha256-RVXBMfHRdgc8777jps6ngyVOY4g0I7LMQ7IUzGv2lbA=';">
56
<script type="importmap">
6-
{ "imports": { "@netflix/x-test/": "../node_modules/@netflix/x-test/" } }
7+
{
8+
"imports": {
9+
"@netflix/x-test/": "../node_modules/@netflix/x-test/"
10+
}
11+
}
712
</script>
813
</head>
914
<body>

‎test/test-internal-properties.html

+6-1
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,13 @@
22
<html>
33
<head>
44
<meta charset="utf-8">
5+
<meta http-equiv="content-security-policy" content="default-src 'self'; script-src 'self' 'sha256-RVXBMfHRdgc8777jps6ngyVOY4g0I7LMQ7IUzGv2lbA=';">
56
<script type="importmap">
6-
{ "imports": { "@netflix/x-test/": "../node_modules/@netflix/x-test/" } }
7+
{
8+
"imports": {
9+
"@netflix/x-test/": "../node_modules/@netflix/x-test/"
10+
}
11+
}
712
</script>
813
</head>
914
<body>

‎test/test-listeners.html

+6-1
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,13 @@
22
<html>
33
<head>
44
<meta charset="utf-8">
5+
<meta http-equiv="content-security-policy" content="default-src 'self'; script-src 'self' 'sha256-RVXBMfHRdgc8777jps6ngyVOY4g0I7LMQ7IUzGv2lbA=';">
56
<script type="importmap">
6-
{ "imports": { "@netflix/x-test/": "../node_modules/@netflix/x-test/" } }
7+
{
8+
"imports": {
9+
"@netflix/x-test/": "../node_modules/@netflix/x-test/"
10+
}
11+
}
712
</script>
813
</head>
914
<body>

‎test/test-observed-properties.html

+6-1
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,13 @@
22
<html>
33
<head>
44
<meta charset="utf-8">
5+
<meta http-equiv="content-security-policy" content="default-src 'self'; script-src 'self' 'sha256-RVXBMfHRdgc8777jps6ngyVOY4g0I7LMQ7IUzGv2lbA=';">
56
<script type="importmap">
6-
{ "imports": { "@netflix/x-test/": "../node_modules/@netflix/x-test/" } }
7+
{
8+
"imports": {
9+
"@netflix/x-test/": "../node_modules/@netflix/x-test/"
10+
}
11+
}
712
</script>
813
</head>
914
<body>

‎test/test-parser.html

+6-1
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,13 @@
22
<html>
33
<head>
44
<meta charset="utf-8">
5+
<meta http-equiv="content-security-policy" content="default-src 'self'; script-src 'self' 'sha256-RVXBMfHRdgc8777jps6ngyVOY4g0I7LMQ7IUzGv2lbA=';">
56
<script type="importmap">
6-
{ "imports": { "@netflix/x-test/": "../node_modules/@netflix/x-test/" } }
7+
{
8+
"imports": {
9+
"@netflix/x-test/": "../node_modules/@netflix/x-test/"
10+
}
11+
}
712
</script>
813
</head>
914
<body>

0 commit comments

Comments
 (0)