Skip to content

Commit 797c7a1

Browse files
loicttnloicttn
authored
Website: Add syntax highlighting + security practices (#167)
* feat(website/static): added highligh go script * feat(website/static): added highlight go theme * feat(website/views): added syntax highlighting for files * feat(website/views): highlighjs throw on unescaped html * feat(website/views): added sanitize for marked output * feat(website/static): added dompurify * feat(docs/security): added dependencies guide for website * feat(website/views): sanitize marked output in home * fix(docs/security): typos * fix(webiste/views): <script> type for packae_file dependencies * feat(docs/security): added DOMPurify dependency * fix(docs/security): typos
1 parent c16f2ed commit 797c7a1

File tree

7 files changed

+368
-6
lines changed

7 files changed

+368
-6
lines changed

‎gnoland/docs/security.md‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
# gno.land Website
2+
3+
The gno.land website has 3 main dependencies:
4+
5+
1. [UmbrellaJs](https://umbrellajs.com/) for DOM operations
6+
2. [MarkedJs](https://marked.js.org/) for Markdown to html compilation
7+
3. [HighlightJs](https://highlightjs.org/) for golang syntax highlighting
8+
4. [DOMPurify](https://github.com/cure53/DOMPurify) to sanitize html (and avoid xss)
9+
10+
Some security considerations:
11+
| | Umbrella Js | Marked Js | HighlightJs | DOMPurify |
12+
|---|---|---|---|---|
13+
| dependencies | 0 | 0 | 0 | 0 |
14+
| sanitize content | | [no](https://marked.js.org/#usage) | [throws an error](https://github.com/highlightjs/highlight.js/blob/7addd66c19036eccd7c602af61f1ed84d215c77d/src/highlight.js#L741) | [yes](https://github.com/cure53/DOMPurify#readme) |
15+
16+
Best Practices:
17+
18+
- **When using MarkedJs**: Always run the output of the marked compiler inside `DOMPurify.sanitize` before inserting it in the dom with `.innerHtml = `.
19+
- **When using DOMPurify**: Preferably use `{ USE_PROFILES: { html: true } }` option to allow html only. Content passed in the sanitizer must not be modified afterwards, and must directly be inserted in the DOM with innerHtml. Do not call `DOMPurify.sanitize` with the output of a previous `DOMPurify.sanitize` to avoid any mutation XSS risks.
20+
- **When using HighlightJs**: always configure it before with `hljs.configure({throwUnescapedHTML: true})` to throw before inserting html in the page if any unexpected html children are detected. The check is done [here](https://github.com/highlightjs/highlight.js/blob/7addd66c19036eccd7c602af61f1ed84d215c77d/src/highlight.js#L741).

‎gnoland/website/static/css/highlight.min.css‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
2+
Theme: StackOverflow Light
3+
Description: Light theme as used on stackoverflow.com
4+
Author: stackoverflow.com
5+
Maintainer: @Hirse
6+
Website: https://github.com/StackExchange/Stacks
7+
License: MIT
8+
Updated: 2021-05-15
9+
10+
Updated for @stackoverflow/stacks v0.64.0
11+
Code Blocks: /blob/v0.64.0/lib/css/components/_stacks-code-blocks.less
12+
Colors: /blob/v0.64.0/lib/css/exports/_stacks-constants-colors.less
13+
*/.hljs{color:#2f3337;background:#f6f6f6}.hljs-subst{color:#2f3337}.hljs-comment{color:#656e77}.hljs-attr,.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-section,.hljs-selector-tag{color:#015692}.hljs-attribute{color:#803378}.hljs-name,.hljs-number,.hljs-quote,.hljs-selector-id,.hljs-template-tag,.hljs-type{color:#b75501}.hljs-selector-class{color:#015692}.hljs-link,.hljs-regexp,.hljs-selector-attr,.hljs-string,.hljs-symbol,.hljs-template-variable,.hljs-variable{color:#54790d}.hljs-meta,.hljs-selector-pseudo{color:#015692}.hljs-built_in,.hljs-literal,.hljs-title{color:#b75501}.hljs-bullet,.hljs-code{color:#535a60}.hljs-meta .hljs-string{color:#54790d}.hljs-deletion{color:#c02d2e}.hljs-addition{color:#2f6f44}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}

‎gnoland/website/static/js/highlight.min.js‎

Lines changed: 316 additions & 0 deletions
Large diffs are not rendered by default.

‎gnoland/website/static/js/purify.min.js‎

Lines changed: 3 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎gnoland/website/views/home.html‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@
33
<html>
44
<head>
55
<link rel="stylesheet" href="/static/css/app.css"/>
6-
<script src="/static/js/marked.min.js"></script>
6+
<script type="text/javascript" src="/static/js/marked.min.js"></script>
7+
<script type="text/javascript" src="/static/js/purify.min.js"></script>
78
</head>
89
<body onload="main()">
910
<div id="header">
@@ -46,7 +47,7 @@
4647
var doc = new DOMParser().parseFromString(window.contents, "text/html");
4748
var contents = doc.documentElement.textContent
4849
var parsed = marked.parse(contents);
49-
document.getElementById("home").innerHTML = parsed;
50+
document.getElementById("home").innerHTML = DOMPurify.sanitize(parsed, { USE_PROFILES: { html: true } });
5051
};
5152
</script>
5253
</html>

‎gnoland/website/views/package_file.html‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@
33
<html>
44
<head>
55
<link rel="stylesheet" href="/static/css/app.css"/>
6+
<link rel="stylesheet" href="/static/css/highlight.min.css"/>
7+
<script type="text/javascript" src="/static/js/highlight.min.js"></script>
68
</head>
79
<body>
810
<div id="header">
@@ -13,8 +15,14 @@
1315
{{ template "header_buttons" }}
1416
</div>
1517
<div id="package_file">
16-
<pre>{{ .Data.FileContents }}</pre>
18+
<pre><code>{{ .Data.FileContents }}</code></pre>
1719
</div>
1820
</body>
21+
<script>
22+
hljs.configure({
23+
throwUnescapedHTML: true // important to avoid inserting escaped html
24+
})
25+
hljs.highlightAll() // applied to all <pre><code>...</code></pre>
26+
</script>
1927
</html>
2028
{{- end -}}

‎gnoland/website/views/realm_render.html‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,9 @@
33
<html>
44
<head>
55
<link rel="stylesheet" href="/static/css/app.css"/>
6-
<script src="/static/js/marked.min.js"></script>
7-
<script src="/static/js/umbrella.min.js"></script>
6+
<script type="text/javascript" src="/static/js/marked.min.js"></script>
7+
<script type="text/javascript" src="/static/js/umbrella.min.js"></script>
8+
<script type="text/javascript" src="/static/js/purify.min.js"></script>
89
</head>
910
<body onload="main()">
1011
<div id="header">
@@ -34,7 +35,7 @@
3435
});
3536
var source = u("#source").text();
3637
var parsed = marked.parse(source);
37-
document.getElementById("realm_render").innerHTML = parsed;
38+
document.getElementById("realm_render").innerHTML = DOMPurify.sanitize(parsed, { USE_PROFILES: { html: true } });
3839
};
3940
</script>
4041
</html>

0 commit comments

Comments
 (0)