yaroslav
/
SequenceDiagram
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix blocked resources in library.htm, add new security headers

This commit is contained in:
David Evans 2021-12-09 23:03:46 +00:00
parent f0f34e0380
commit a84f2e01fc
12 changed files with 106 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
bin/server.js
View File

@ -55,20 +55,41 @@ const PREVIEW_CACHE = {
};
const SKETCH_CSS_SHA = 'sha256-s7UPtBgvov5WNF9C1DlTZDpqwLgEmfiWha5a5p/Zn7E=';
const PERMISSIONS_POLICY = [
'accelerometer=()',
'autoplay=()',
'camera=()',
'geolocation=()',
'gyroscope=()',
'interest-cohort=()',
'magnetometer=()',
'microphone=()',
'payment=()',
'sync-xhr=()',
'usb=()',
].join(', ');
const statics = new StaticRequestHandler('')
.setCache(DEV ? {} : STATIC_CACHE)
.addHeader('Content-Security-Policy', [
'base-uri \'self\'',
'default-src \'none\'',
'script-src \'self\' https://unpkg.com',
`style-src 'self' '${SKETCH_CSS_SHA}'`,
// Using fonts.googleapis.com for library.htm only
`style-src 'self' https://fonts.googleapis.com '${SKETCH_CSS_SHA}'`,
'connect-src \'self\'',
'font-src \'self\' data:',
// Using fonts.gstatic.com for library.htm only
'font-src \'self\' data: https://fonts.gstatic.com',
'img-src \'self\' blob:',
'form-action \'self\'',
'frame-ancestors \'self\'',
'frame-src \'self\'',
].join('; '))
.addHeader('Cross-Origin-Embedder-Policy', 'require-corp')
.addHeader('Cross-Origin-Opener-Policy', 'same-origin')
.addHeader('Cross-Origin-Resource-Policy', 'same-origin')
.addHeader('Permissions-Policy', PERMISSIONS_POLICY)
.addHeader('Referrer-Policy', 'no-referrer')
.addHeader('X-Content-Type-Options', 'nosniff')
.addHeader('X-Frame-Options', 'DENY')
.addHeader('X-XSS-Protection', '1; mode=block')
@ -83,6 +104,15 @@ const statics = new StaticRequestHandler('')
statics
.add('/robots.txt', '')
.add('/ads.txt', [
'# Deny inclusion in any advertising system\n',
'placeholder.example.com, placeholder, DIRECT, placeholder\n',
].join(''))
.add('/.well-known/security.txt', [
'Contact: https://github.com/davidje13/SequenceDiagram/issues\n',
'Preferred-Languages: en\n',
'Expires: 3000-01-01T00:00:00Z\n',
].join(''))
.addResources('/', BASEDIR, [
'index.html',
'library.htm',
@ -115,6 +145,11 @@ const render = new RenderRequestHandler('/render')
'font-src data:',
'form-action \'none\'',
].join('; '))
.addHeader('Cross-Origin-Embedder-Policy', 'require-corp')
.addHeader('Cross-Origin-Opener-Policy', 'unsafe-none')
.addHeader('Cross-Origin-Resource-Policy', 'cross-origin')
.addHeader('Permissions-Policy', PERMISSIONS_POLICY)
.addHeader('Referrer-Policy', 'no-referrer')
.addHeader('X-Content-Type-Options', 'nosniff');
const preview = new PreviewRequestHandler('/preview')
@ -129,6 +164,11 @@ const preview = new PreviewRequestHandler('/preview')
'frame-ancestors \'self\'',
'frame-src \'self\'',
].join('; '))
.addHeader('Cross-Origin-Embedder-Policy', 'require-corp')
.addHeader('Cross-Origin-Opener-Policy', 'same-origin')
.addHeader('Cross-Origin-Resource-Policy', 'same-origin')
.addHeader('Permissions-Policy', PERMISSIONS_POLICY)
.addHeader('Referrer-Policy', 'no-referrer')
.addHeader('X-Content-Type-Options', 'nosniff');
new Server()

6
index.html
View File

@ -82,8 +82,8 @@
<p class="loadmsg">Loading&hellip;</p>
<nav>
<a href="#" data-touch="Files">My Diagrams</a>
<a href="library.htm" target="_blank" data-touch="API">Library</a>
<a href="https://github.com/davidje13/SequenceDiagram" target="_blank" data-touch="">GitHub</a>
<a href="library.htm" target="_blank" rel="noopener" data-touch="API">Library</a>
<a href="https://github.com/davidje13/SequenceDiagram" target="_blank" rel="noopener" data-touch="">GitHub</a>
</nav>
</div>
@ -92,7 +92,7 @@
<main>
<section class="banner">
Enable JavaScript for live rendering, templates, PNG export, and local file saving.
<nav><a href="library.htm" target="_blank">Library</a><a href="https://github.com/davidje13/SequenceDiagram" target="_blank">GitHub</a></nav>
<nav><a href="library.htm" target="_blank" rel="noopener">Library</a><a href="https://github.com/davidje13/SequenceDiagram" target="_blank" rel="noopener">GitHub</a></nav>
</section>
<form target="preview" action="preview" method="GET">
<textarea name="c">

2
lib/sequence-diagram-web.js
View File

@ -7274,7 +7274,7 @@
if(attrs.href) {
element = svg.el('a').attrs({
'cursor': 'pointer',
'rel': 'nofollow',
'rel': 'nofollow noopener',
'target': '_blank',
});
} else {

2
lib/sequence-diagram-web.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
lib/sequence-diagram.js
View File

@ -7274,7 +7274,7 @@
if(attrs.href) {
element = svg.el('a').attrs({
'cursor': 'pointer',
'rel': 'nofollow',
'rel': 'nofollow noopener',
'target': '_blank',
});
} else {

56
library.htm
View File

@ -42,37 +42,7 @@
<script src="lib/sequence-diagram-web.min.js"></script>
<!-- /LIVE -->
<script>document.addEventListener('DOMContentLoaded', () => {
const diagrams = [];
// Example 1:
(() => {
const diagram = new SequenceDiagram();
diagram.set('A -> B\nB -> A', {render: false});
diagram.dom().setAttribute('class', 'sequence-diagram');
document.getElementById('hold1').appendChild(diagram.dom());
diagram.setHighlight(1);
diagrams.push(diagram);
})();
// Snippets:
const elements = document.getElementsByClassName('example');
for(let i = 0; i < elements.length; ++ i) {
const el = elements[i];
const diagram = new SequenceDiagram(el.textContent, {render: false});
diagram.dom().setAttribute('class', 'example-diagram');
el.parentNode.insertBefore(diagram.dom(), el);
diagrams.push(diagram);
}
SequenceDiagram.renderAll(diagrams);
if (CodeMirror && CodeMirror.colorize) {
CodeMirror.colorize();
}
}, {once: true});</script>
<script src="web/resources/library.js"></script>
</head>
<body>
@ -102,11 +72,11 @@ if (CodeMirror && CodeMirror.colorize) {
<p>
Want to draw a Sequence Diagram?
<a href="." target="_blank">Go to the online editor</a>.
<a href="." target="_blank" rel="noopener">Go to the online editor</a>.
</p>
<p>
This library renders sequence diagrams from code. It is
<a href="https://github.com/davidje13/SequenceDiagram" target="_blank">open-source</a>
<a href="https://github.com/davidje13/SequenceDiagram" target="_blank" rel="noopener">open-source</a>
(LGPL-3.0), and including it in a website is as simple as adding the script:</p>
<pre data-lang="text/html">
@ -406,7 +376,7 @@ R -> ...fin2
<p>
More features are supported. See the
<a href="." target="_blank">online editor</a>&rsquo;s library and autocomplete
<a href="." target="_blank" rel="noopener">online editor</a>&rsquo;s library and autocomplete
features to discover them.
</p>
</section>
@ -418,7 +388,7 @@ This has been tested in the latest versions of Google Chrome, Mozilla Firefox,
and Apple Safari. Versions of Microsoft Internet Explorer / Edge have not been
tested and probably won&rsquo;t work. Any bugs found in a supported browser
should be reported in the
<a href="https://github.com/davidje13/SequenceDiagram/issues" target="_blank">Issue Tracker</a>.
<a href="https://github.com/davidje13/SequenceDiagram/issues" target="_blank" rel="noopener">Issue Tracker</a>.
</p>
<h2 id="API">API</h2>
@ -877,29 +847,29 @@ for all types.
There are quite a lot of sequence diagram drawing tools available. If this one
doesn&rsquo;t fit your needs for whatever reason, you might want to take a look
at the alternatives: (but also feel free to raise feature requests in the
<a href="https://github.com/davidje13/SequenceDiagram/issues" target="_blank">issue tracker</a>!)
<a href="https://github.com/davidje13/SequenceDiagram/issues" target="_blank" rel="noopener">issue tracker</a>!)
</p>
<ul>
<li><a href="https://www.websequencediagrams.com/" target="_blank">websequencediagrams.com</a>
<li><a href="https://www.websequencediagrams.com/" target="_blank" rel="noopener">websequencediagrams.com</a>
is a commercial offering which inspired the syntax of this project and many
others. It has a wide range of themes but limited functionality. Also offers a
hosted image generation service.</li>
<li><a href="https://github.com/bramp/js-sequence-diagrams" target="_blank">js-sequence-diagrams</a>
<li><a href="https://github.com/bramp/js-sequence-diagrams" target="_blank" rel="noopener">js-sequence-diagrams</a>
is a Javascript library which has wider browser support via snap.svg but very
limited functionality.</li>
<li><a href="https://github.com/knsv/mermaid" target="_blank">mermaid</a>
<li><a href="https://github.com/knsv/mermaid" target="_blank" rel="noopener">mermaid</a>
is a Javascript library and online editor which can render multiple types of UML
diagram, including simple sequence diagrams.</li>
<li><a href="https://github.com/aivarsk/scruffy" target="_blank">Scruffy UML</a>
<li><a href="https://github.com/aivarsk/scruffy" target="_blank" rel="noopener">Scruffy UML</a>
is a Python library which can render multiple types of UML diagram, including
simple sequence diagrams, from the commandline. Uses yUML syntax rather than the
human friendly syntax used by most other projects.</li>
<li><a href="https://github.com/plantuml/plantuml" target="_blank">PlantUML</a>
<li><a href="https://github.com/plantuml/plantuml" target="_blank" rel="noopener">PlantUML</a>
is a Java project and online editor which can render multiple types of UML
diagram, including sequence diagrams. Has a good range of features and allows a
high degree of customisation (e.g. diagram colours).</li>
@ -911,7 +881,7 @@ high degree of customisation (e.g. diagram colours).</li>
<p>
Thanks to the other tools mentioned above for inspiring parts of the syntax of
this project, and to
<a href="https://fonts.google.com/specimen/Handlee" target="_blank">the Handlee font</a>
<a href="https://fonts.google.com/specimen/Handlee" target="_blank" rel="noopener">the Handlee font</a>
which is used in the sketch theme.
</p>
@ -935,7 +905,7 @@ which is used in the sketch theme.
</pre>
<nav>
<a href="." target="_blank">Online Editor</a><a href="https://github.com/davidje13/SequenceDiagram" target="_blank">GitHub</a>
<a href="." target="_blank" rel="noopener">Online Editor</a><a href="https://github.com/davidje13/SequenceDiagram" target="_blank" rel="noopener">GitHub</a>
</nav>
</article>

2
scripts/svg/SVGTextBlock.mjs
View File

@ -20,7 +20,7 @@ function populateSvgTextLine(svg, node, formattedLine) {
if(attrs.href) {
element = svg.el('a').attrs({
'cursor': 'pointer',
'rel': 'nofollow',
'rel': 'nofollow noopener',
'target': '_blank',
});
} else {

3
scripts/svg/SVGTextBlock_spec.mjs
View File

@ -105,7 +105,8 @@ describe('SVGTextBlock', () => {
expect(hold.childNodes[0].innerHTML).toContain(' cursor="pointer"');
expect(hold.childNodes[0].innerHTML).toContain(' target="_blank"');
expect(hold.childNodes[0].innerHTML).toContain(' rel="nofollow"');
expect(hold.childNodes[0].innerHTML)
.toContain(' rel="nofollow noopener"');
});
it('re-uses text nodes when possible, adding more if needed', () => {

6
web/lib/editor.js
View File

@ -1819,7 +1819,11 @@
const links = this.links.map((link) => {
const label = this.touchUI ? link.touchLabel : link.label;
return label && this.dom.el('a')
.attrs({'href': link.href, 'target': link.target || ''})
.attrs({
'href': link.href,
'rel': 'noopener',
'target': link.target || '',
})
.text(label);
}).filter((x) => x);

2
web/lib/editor.min.js vendored
View File

File diff suppressed because one or more lines are too long

31
web/resources/library.js Normal file
View File

@ -0,0 +1,31 @@
/* globals SequenceDiagram CodeMirror */
document.addEventListener('DOMContentLoaded', () => {
const diagrams = [];
// Example 1:
(() => {
const diagram = new SequenceDiagram();
diagram.set('A -> B\nB -> A', {render: false});
diagram.dom().setAttribute('class', 'sequence-diagram');
document.getElementById('hold1').appendChild(diagram.dom());
diagram.setHighlight(1);
diagrams.push(diagram);
})();
// Snippets:
const elements = document.getElementsByClassName('example');
for(let i = 0; i < elements.length; ++ i) {
const el = elements[i];
const diagram = new SequenceDiagram(el.textContent, {render: false});
diagram.dom().setAttribute('class', 'example-diagram');
el.parentNode.insertBefore(diagram.dom(), el);
diagrams.push(diagram);
}
SequenceDiagram.renderAll(diagrams);
if(CodeMirror && CodeMirror.colorize) {
CodeMirror.colorize();
}
}, {once: true});

6
web/scripts/interface/Interface.mjs
View File

@ -491,7 +491,11 @@ export default class Interface {
const links = this.links.map((link) => {
const label = this.touchUI ? link.touchLabel : link.label;
return label && this.dom.el('a')
.attrs({'href': link.href, 'target': link.target || ''})
.attrs({
'href': link.href,
'rel': 'noopener',
'target': link.target || '',
})
.text(label);
}).filter((x) => x);