status-im
/
consul
mirror of https://github.com/status-im/consul.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

ui: CSP Improvements (#9847) 

* Configure ember-auto-import so we can use a stricter CSP

* Create a fake filesystem using JSON to avoid inline scripts in index

We used to have inline scripts in index.html in order to support embers
filepath fingerprinting and our configurable rootURL.

Instead of using inline scripts we use application/json plus a JSON blob
to create a fake filesystem JSON blob/hash/map to hold all of the
rootURL'ed fingerprinted file paths which we can then retrive later in
non-inline scripts.

We move our inlined polyfills script into the init.js external script,
and we move the CodeMirror syntax highlighting configuration inline
script into the main app itself - into the already existing CodeMirror
initializer (this has been moved so we can lookup a service located
document using ember's DI container)

* Set a strict-ish CSP policy during development
This commit is contained in:
John Cowen 2021-03-17 10:46:21 +00:00 committed by hashicorp-ci
parent fe813532eb
commit 1e7ebb0978
7 changed files with 71 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.changelog/9847.txt Normal file
View File

@ -0,0 +1,3 @@
```release-note:improvement
ui: support stricter content security policies
```

11
ui/packages/consul-ui/app/initializers/ivy-codemirror.js
View File

@ -1,11 +0,0 @@
export function initialize(application) {
const IvyCodeMirrorComponent = application.resolveRegistration('component:ivy-codemirror');
// Make sure ivy-codemirror respects/maintains a `name=""` attribute
IvyCodeMirrorComponent.reopen({
attributeBindings: ['name'],
});
}
export default {
initialize,
};

30
ui/packages/consul-ui/app/instance-initializers/ivy-codemirror.js Normal file
View File

@ -0,0 +1,30 @@
/* globals CodeMirror */
export function initialize(application) {
const appName = application.application.name;
const doc = application.lookup('service:-document');
// pick codemirror syntax highlighting paths out of index.html
const fs = JSON.parse(doc.querySelector(`[data-${appName}-fs]`).textContent);
// configure syntax highlighting for CodeMirror
CodeMirror.modeURL = {
replace: function(n, mode) {
switch (mode) {
case 'javascript':
return fs['codemirror/mode/javascript/javascript.js'];
case 'ruby':
return fs['codemirror/mode/ruby/ruby.js'];
case 'yaml':
return fs['codemirror/mode/yaml/yaml.js'];
}
},
};
const IvyCodeMirrorComponent = application.resolveRegistration('component:ivy-codemirror');
// Make sure ivy-codemirror respects/maintains a `name=""` attribute
IvyCodeMirrorComponent.reopen({
attributeBindings: ['name'],
});
}
export default {
initialize,
};

4
ui/packages/consul-ui/ember-cli-build.js
View File

@ -37,6 +37,10 @@ module.exports = function(defaults) {
plugins: ['@babel/plugin-proposal-object-rest-spread'],
sourceMaps: sourcemaps ? 'inline' : false,
},
autoImport: {
// allows use of a CSP without 'unsafe-eval' directive
forbidEval: true,
},
codemirror: {
keyMaps: ['sublime'],
addonFiles: [

38
ui/packages/consul-ui/lib/startup/templates/body.html.js
View File

@ -16,24 +16,20 @@ module.exports = ({ appName, environment, rootURL, config }) => `
}<path d="M61 30.15V17.948c0-4.962 2.845-7.85 9.495-7.85 2.484 0 5.048.326 7.252.895l-.561 4.433c-2.164-.406-4.688-.691-6.53-.691-3.486 0-4.608 1.22-4.608 4.108v10.412c0 2.888 1.122 4.108 4.607 4.108 1.843 0 4.367-.284 6.53-.691l.562 4.433c-2.204.57-4.768.895-7.252.895C63.845 38 61 35.112 61 30.15zm36.808.04c0 4.068-1.802 7.81-8.493 7.81-6.69 0-8.494-3.742-8.494-7.81v-5.002c0-4.067 1.803-7.81 8.494-7.81 6.69 0 8.493 3.743 8.493 7.81v5.003zm-4.887-5.165c0-2.237-1.002-3.416-3.606-3.416s-3.606 1.18-3.606 3.416v5.328c0 2.237 1.002 3.417 3.606 3.417s3.606-1.18 3.606-3.417v-5.328zm25.79 12.568h-4.887V23.764c0-1.057-.44-1.586-1.563-1.586-1.201 0-3.325.732-5.088 1.668v13.747h-4.887V17.785h3.726l.48 1.668c2.444-1.22 5.53-2.074 7.813-2.074 3.245 0 4.407 2.318 4.407 5.857v14.357zm18.26-5.775c0 3.823-1.162 6.182-7.052 6.182-2.083 0-4.927-.488-6.73-1.139l.68-3.782c1.643.488 3.807.854 5.81.854 2.164 0 2.484-.488 2.484-1.993 0-1.22-.24-1.83-3.405-2.603-4.768-1.18-5.329-2.4-5.329-6.223 0-3.986 1.723-5.735 7.292-5.735 1.803 0 4.166.244 5.85.691l-.482 3.945c-1.482-.284-3.846-.569-5.368-.569-2.124 0-2.484.488-2.484 1.708 0 1.587.12 1.709 2.764 2.4 5.449 1.464 5.97 2.196 5.97 6.264zm4.357-14.033h4.887v13.83c0 1.057.441 1.586 1.563 1.586 1.202 0 3.325-.733 5.088-1.668V17.785h4.888v19.808h-3.726l-.481-1.667c-2.444 1.22-5.529 2.074-7.812 2.074-3.246 0-4.407-2.318-4.407-5.857V17.785zM168 37.593h-4.888V9.691L168 9v28.593z"/></g></svg>
<script type="application/json" data-consul-ui-config>
${environment === 'production' ? `{{jsonEncode .}}` : JSON.stringify(config.operatorConfig)}
</script>
<script type="application/json" data-consul-ui-fs>
{
"text-encoding/encoding-indexes.js": "${rootURL}assets/encoding-indexes.js",
"text-encoding/encoding.js": "${rootURL}assets/encoding-indexes.js",
"css.escape/css.escape.js": "${rootURL}assets/css.escape.js",
"codemirror/mode/javascript/javascript.js": "${rootURL}assets/codemirror/mode/javascript/javascript.js",
"codemirror/mode/ruby/ruby.js": "${rootURL}assets/codemirror/mode/ruby/ruby.js",
"codemirror/mode/yaml/yaml.js": "${rootURL}assets/codemirror/mode/yaml/yaml.js"
}
</script>
<script src="${rootURL}assets/init.js"></script>
<script src="${rootURL}assets/vendor.js"></script>
${environment === 'test' ? `<script src="${rootURL}assets/test-support.js"></script>` : ``}
<script>
var appendScript = function(src) {
var $script = document.createElement('script');
$script.src = src;
document.body.appendChild($script);
}
if(!('TextDecoder' in window)) {
appendScript('${rootURL}assets/encoding-indexes.js');
appendScript('${rootURL}assets/encoding.js');
}
if(!(window.CSS && window.CSS.escape)) {
appendScript('${rootURL}assets/css.escape.js');
}
</script>
<script src="${rootURL}assets/metrics-providers/consul.js"></script>
<script src="${rootURL}assets/metrics-providers/prometheus.js"></script>
${
@ -42,19 +38,5 @@ ${environment === 'production' ? `{{jsonEncode .}}` : JSON.stringify(config.oper
: ``
}
<script src="${rootURL}assets/${appName}.js"></script>
<script>
CodeMirror.modeURL = {
replace: function(n, mode) {
switch(mode) {
case 'javascript':
return '${rootURL}assets/codemirror/mode/javascript/javascript.js';
case 'ruby':
return '${rootURL}assets/codemirror/mode/ruby/ruby.js';
case 'yaml':
return '${rootURL}assets/codemirror/mode/yaml/yaml.js';
}
}
};
</script>
${environment === 'test' ? `<script src="${rootURL}assets/tests.js"></script>` : ``}
`;

8
ui/packages/consul-ui/server/index.js
View File

@ -25,6 +25,14 @@ module.exports = function(app, options) {
}
next();
});
// sets the base CSP policy for the UI
app.use(function(request, response, next) {
response.set({
'Content-Security-Policy': `default-src 'self' ws: localhost:${options.liveReloadPort} http: localhost:${options.liveReloadPort}; img-src 'self' data: ; style-src 'self' 'unsafe-inline'`,
});
next();
});
// Serve the coverage folder for easy viewing during development
app.use('/coverage', express.static('coverage'));
};

16
ui/packages/consul-ui/vendor/init.js vendored
View File

@ -1,4 +1,20 @@
(function(doc, appName) {
const fs = JSON.parse(doc.querySelector(`[data-${appName}-fs]`).textContent);
const appendScript = function(src) {
var $script = doc.createElement('script');
$script.src = src;
doc.body.appendChild($script);
};
// polyfills
if (!('TextDecoder' in window)) {
appendScript(fs['text-encoding/encoding-indexes.js']);
appendScript(fs['text-encoding/encoding.js']);
}
if (!(window.CSS && window.CSS.escape)) {
appendScript(fs['css.escape/css.escape.js']);
}
try {
const $appMeta = doc.querySelector(`[name="${appName}/config/environment"]`);
// pick out the operatorConfig from our application/json script tag