XSS Vulnerable - create archive of locally available CSS themes.

[dambrogia]

As you willingly inject a remote script into your slack app, you are vulnerable to XSS.

const cssPath = 'https://cdn.rawgit.com/widget-/slack-black-theme/master/custom.css';
let cssPromise = fetch(cssPath).then(response => response.text());

Realistically, I have no idea what is in that CSS file when my slack app starts. Since it loads every time I open slack (usually daily) if someone were to update that css file to something malicious, all of us would be screwed and theoretically they could be reading all of our messages that are sent.

Additionally, as slack versions change and CSS needs to update per version, it would be helpful to have an archive of readily available themes for that version of slack rather than hunt through the issues for people who have fixed it, but have no where to add their contributions within the repo.

Solutions:

1. Tear down the CSS locally and do a good ole fashioned hardcoded const css = '<css string>';.

2. Clone the archive directly in the resources\app.asar.unpacked\src\static directory and do something to the extent of:

   const css = require('./themes/my-theme.css');

3. IMO this would be the correct solution (if possible) and adds on from step 2. Create an npm package that you can add to the main package.json of slack and by adding as single function call (ex: addTheme('my-theme.css', cssOverwrites);) with a function that will take two parameters: one to declare the css theme you want to use, and and the second to declare any :root {} overwrites you want to prepend.

• This would resolve the XSS vulnerability of having no control of what is fetched in the remote script every time you log into your slack app.
• It would allow for multiple people to create their own themes for slack.
• And this also would be a seamless way to incorporate this for slack if they ever decide to provide the public with a dark theme. (It's been 4 years, pigs might fly before they give us what we want).

[gkillough]

You could also reference the raw version of the file based on the most recent commit:

https://raw.githubusercontent.com/widget-/slack-black-theme/81ad5fa95c56646e65e5c9d62bc2694e1dcebc1e/custom.css

[dambrogia]

@gkillough

That is a great workaround for the time being, thanks for your input.

[jingofett]

How can I make it reference the css file locally?

I tried doing the above
const css = require('./themes/my-theme.css');
and also
const cssPath = 'C:\Path\to\file.css;

but neither worked for me.

[dambrogia]

@jingofett Get the source of the css you want (the css source that is fetched in the compromisable request) and hardcode that into a string. Use that hardcoded string rather than CSS returned from a request.

I can't remember if the CSS in this gist is the same as what is used in this github repo, but this is my quick reference I've stored.

https://gist.github.com/dambrogia/ae1e0da2b8e88adbe6197a2c0ec5bd09

[jingofett]

@jingofett Get the source of the css you want (the css source that is fetched in the compromisable request) and hardcode that into a string. Use that hardcoded string rather than CSS returned from a request.

I can't remember if the CSS in this gist is the same as what is used in this github repo, but this is my quick reference I've stored.

https://gist.github.com/dambrogia/ae1e0da2b8e88adbe6197a2c0ec5bd09

Thanks! I was able to do it after removing out all of the commented lines using Notepad++ and using the following Replace settings:
Select Regular expression radio button, and check off ". matches new line" then enter the following into the "Find what" field:

/\*.*?\*/

Put nothing in the "Replace with" field and click Replace all. Then copy the rest into one line (I did this by pasting the code into my browser's address bar) and replace the placeholder here:

document.addEventListener('DOMContentLoaded', function() { const css = '[REPLACE]'; $("<style></style>").appendTo('head').html(css); });

[leo150]

http://gist.github.com with a link to own copy of the script can be used as cssPath from installation manual. No need to store it locally. If the network / gist is down, there is nothing much to do.

[dprice000]

http://gist.github.com with a link to own copy of the script can be used as cssPath from installation manual. No need to store it locally. If the network / gist is down, there is nothing much to do.

I would prefer local copy. Just for the extra security, but I had trouble converting it to string so a Gist will gave to do.