Desktop hack is not working

[aabed]

Hello,
I've tried the hack you posted on your blog but when slack opens I still get the same old theme
But there are errors with slack, I don't know if they matter or not

/usr/bin/slack --disable-gpu %U "slack://?s=');jQuery.ajax({url:'https://cdn.rawgit.com/laCour/slack-night-mode/master/css/black.css',success:function(e){jQuery('<style></style>').appendTo('head').html(e.slice(35).slice(0,-2))}});//" Creating Slack Application (electron) submitUrl is deprecated. Use submitURL instead. (electron) ipc module is deprecated. Use require("electron").ipcMain instead. [Error: Failed to get path] (electron) options.preload is deprecated. Use options.webPreferences.preload instead. (electron) loadUrl is deprecated. Use loadURL instead.

I am using the desktop client on Archlinux

[laCour]

Unfortunately this hack no longer works as noted in the blog post, the Slack team fixed this exploit less than a day after I made it public. It's unlikely that there will be/is a way to style the desktop client. I might look into this more in the future if I have time.

[exstral]

Tip for mac users:
I'm running Slack using the Fluid app. In it you have full access to the web developer inspector and can run a script to activate the theme. If you pay for it you can also add that as a userscript run on every startup :)

Startup script copied from your blog post:

$.ajax({
  url: "https://raw.githubusercontent.com/laCour/slack-night-mode/master/css/raw/black.css",
  success: function(css) {
    $("<style></style>").appendTo("head").html(css.slice(35).slice(0, -2));
  }
});

Thank you for this awesome styling!

⚠️ AUTHOR WARNING: This will request the compiled CSS file from this repository. You are strongly discouraged from using a remote CSS file that is not under your control. It's recommended that you create your own copy. An XSS attack could put your Slack client at risk.

[laCour]

@RUSshy Yeah, I've known about this. It works, but it's a less than ideal solution. I'd prefer a way that doesn't modify Slack's source.

Similarly, with this theme you'd just append the following to app.asar.unpacked/src/static/ssb-interop.js:

document.addEventListener('DOMContentLoaded', function() {
 $.ajax({
   url: 'https://raw.githubusercontent.com/laCour/slack-night-mode/master/css/raw/black.css',
   success: function(css) {
     $("<style></style>").appendTo('head').html(css);
   }
 });
});

On Arch, this is in /usr/lib/slack/resources.

🛑 READ FIRST: This will request the compiled CSS file from this repository. You are strongly discouraged from using a remote CSS file that is not under your control. It's recommended that you create your own copy. An XSS attack could put your Slack client at risk.

[widget-]

@laCour You can get it to modify the team bar on the left too. See widget-/slack-black-theme/readme.md.

[laCour]

@widget- Thanks for the info! I'll be adding styles for the team bar shortly.

[potto007]

Thanks for sharing this, @laCour. I slapped a rough script together for my team, thought I'd share it here for those wishing to reduce number of steps to 1. ;)

darkify_slack.sh.zip

⚠️ AUTHOR WARNING: This will request the compiled CSS file from this repository. You are strongly discouraged from using a remote CSS file that is not under your control. It's recommended that you create your own copy. An XSS attack could put your Slack client at risk.

[jeffwklein]

@potto007 worked great -- thanks for the script!

[pointlessbuttonstudios]

Oh thank you so much, I was being blinded!!
All my code environments and most of my other programs are dark themed, this was absolutely fantastic!
❤️

[MHaendel]

This is awesome, please integrate as an option

[Lemmmy]

it can't really be integrated with an option

[olets]

Thanks @potto007! To save others from having to look: on macOS, the file is at

/Applications/Slack.app/Contents/Resources/app.asar.unpacked/src/static/ssb-interop.js

[jkremser]

Thanks for the script, here is a modification of it that works on Fedora https://gist.github.com/Jiri-Kremser/2716ff5c6918cc6538f96b56e46f8c13

⚠️ AUTHOR WARNING: This will request the compiled CSS file from this repository. You are strongly discouraged from using a remote CSS file that is not under your control. It's recommended that you create your own copy. An XSS attack could put your Slack client at risk.

[ransagy]

Nice, This also helped me use the theme when wrapping the slack web version in Electron (don't ask), where even injecting the css itself didn't seem to work.

[BluefireJaguar]

QQ, the highlight when someone mentions you or uses @everyone is realllllly unreadable. Any chance this can be updated to be better?

[Lemmmy]

post a separate issue with screenshots @BluefireJaguar

[kingbyter]

I don't think this works anymore. My laptop auto-updated to the latest slack, and now this doesn't work anymore. Am I doing something wrong? Or is it just that I updated?

[laCour]

@BattleLord4000 This will break across updates. You'll need to reapply the changes.

[kingbyter]

I did that
now I'm trying reinstalling slack and doing it again

[kingbyter]

is there a specific location in which you need to put the code?

[laCour]

@BattleLord4000 I can confirm that this still works with the latest update. The code should be placed at the very bottom of the ssb-interop.js file. The location of this file depends on your OS; others have shared several paths above.

[kingbyter]

I know where the file is, I was just wondering where to paste the code, because I had been pasting it in the middle of the code. I think this should work thanks.

[kingbyter]

It worked, thanks for everything!

[Chase-Bullock]

This is not working for me, I pasted the code at the bottom of the file ssb-interop.js I tried it at it's current location and also tried putting it below the last line 'start'.

//do not migrate preload script into TypeScript
require('../stat-cache');

const profiler = require('../utils/profiler.js');
if (profiler.shouldProfile()) profiler.startProfiling();

let assignIn = require('lodash').assignIn;
let path = require('path');
let isPrebuilt = require('../utils/process-helpers').isPrebuilt;

// tslint:disable-next-line
process.on('uncaughtException', (e) => console.error(e));

// Warning: You almost certainly do *not* want to edit this code - instead, you
// want to edit src/ssb/main.js instead
let start = function(loadSettings) {
  window.loadSettings = loadSettings;

  const mainModule = path.join(loadSettings.resourcePath, 'src', 'ssb', 'main.ts');
  const isDevMode = loadSettings.devMode && isPrebuilt();
  require('electron-compile').init(loadSettings.resourcePath, mainModule, !isDevMode);
};

const processRef = window.process;
process.nextTick(function() { // eslint-disable-line
  // Patch global back in
  window.process = processRef;
});

// NB: For whatever reason, we have to wait longer to restore 'global'
// Update (2017.Jan.18): This context 'restoration' causes unexpected state mutation in post,
// especially related to check selection state via $("selection.user") when compositionupdate event fired.
// As it does not have clear usecases at the moment, blocking it to prevent webapp abnormality
// setTimeout(function() { window.global = window; }, 10);

document.addEventListener('DOMContentLoaded', function() {
 $.ajax({
   url: 'https://cdn.rawgit.com/laCour/slack-night-mode/master/css/raw/black.css',
   success: function(css) {
     $("<style></style>").appendTo('head').html(css);
   }
 });
});

start(assignIn({}, require('electron').remote.getGlobal('loadSettings'), { windowType: 'WEBAPP' }));

⚠️ AUTHOR WARNING: This will request the compiled CSS file from this repository. You are strongly discouraged from using a remote CSS file that is not under your control. It's recommended that you create your own copy. An XSS attack could put your Slack client at risk.

[potto007]

Hmm - if I recall correctly, I had to quit out of Slack and reopen it prior to running the script this time around... it was late though, so I don't recall clearly. Can you try that, followed by CMD-R inside of Slack?

Thanks,
Paul

[Chase-Bullock]

ctrl+r worked for me. I appreciate the help.

Thanks,
Chase

[andresmaiden]

In Gubuntu 17.04 I've to change the path to:
/usr/lib/slack/resources/app.asar.unpacked/src/static/ssb-interop.js

[if1mad]

@laCour it seems slack has changed some stuff and your amazing fix no longer works. :(

[laCour]

@Qwatuz The Slack client was recently updated, but it still works. Updates will remove the patch in ssb-interop.js. You should reapply the style patch. The theme is a bit out of date due to recent changes, but a release should be coming in the next day or so.

[simbalinux]

Are you using the method I used? That is the only one I am supporting.

…

On Tue, Jul 17, 2018 at 6:03 PM, hoistyler ***@***.***> wrote: I have tried switching between different css's that I can find in the "variants" by changing the url around and it only switches back to the default swarm colorset.. however reverting the url to the first one that worked, swarm shows the colors correctly.. any ideas? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#73 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AXcDj4kDTtDMRfiyl8hcF2arTK0rKGRUks5uHoljgaJpZM4Jk7lZ> .

[lacostenycoder]

Easily toggle between day and night mode

Not sure where my original post went but here is my updated gist for a ruby script which can be run from the terminal in default night-mode or simple toggle back to day mode. It's recently updated and tested with latest version of this theme.
https://gist.github.com/lacostenycoder/23d05ace816de0f39e9e6aa940172b91

⚠️ AUTHOR WARNING: This will request the compiled CSS file from this repository. You are strongly discouraged from using a remote CSS file that is not under your control. It's recommended that you create your own copy. An XSS attack could put your Slack client at risk.

[lvh]

Suggestion: copy the CSS file to your own gist, or fork the repo. Right now, if anyone can update that CSS file so it ends in </style><script>alert(document.domain);</script\>, they trivially get XSS.

[lacostenycoder]

@lvh Thanks! I've forked the repo and updated instructions in the gist to instruct others to do the same. @andrewcartwright1 see instructions on my gist as you'll probably wanna do something similar and update your instructions as well.

[tuandm]

@lacostenycoder Thanks for your script, looks like it's not working on Mojave.

[lacostenycoder]

@tuandm when you say "it's not working", what is the behavior you're getting? Does the script throw any errors? Did you follow the install instructions?

[hapylestat]

to not download css each time from internet, just use cssminify, replace " to \" and change the stub to:

document.addEventListener('DOMContentLoaded', function() {
  var css="<here is your long minified css>";
   $("<style></style>").appendTo('head').html(css);
}

[tuandm]

@tuandm when you say "it's not working", what is the behavior you're getting? Does the script throw any errors? Did you follow the install instructions?

Hi @lacostenycoder, sorry not showing detail issue.
Here are the steps which I've done:

• Forked github to my repo, make the nightslack.rb executable, then run ./nightslack.rb

➜  bin sudo ./nightslack.rb
Password:
Slack Normal night mode has been set!

The slack app has been restarted but no dark theme is activated. Let me know if you need more information.

Here is the content of my ssb-interop.js (which was changed by nightslack.rb) https://gist.github.com/tuandm/c4363ce8f32e4fddc50f2a91bd071f41

[lacostenycoder]

@tuandm what version of slack desktop do you have? Also as per instructions in my gist you should fork your own copy of THIS REPO modify the ruby script to pull from your repo so change this line:

url: 'https://rawgit.com/lacostenyc/slack-night-mode/master/css/raw/black.css',
and replace lacostenyc to probably tuandm.

But this has not been tested with any Slack version > 3.3.3(beta)

[lacostenycoder]

to not download css each time from internet, just use cssminify, replace " to \" and change the stub to:

document.addEventListener('DOMContentLoaded', function() {
  var css="<here is your long minified css>";
   $("<style></style>").appendTo('head').html(css);
}

Yes I thought of that, however, I don't want to have to maintain the CSS locally and will simply update my fork of this repo when updates are available. And since Slack is pretty useless without an internet connection, I don't care about the ajax call at runtime. I generally don't restart slack too often except when it crashes 😁

[hapylestat]

@lacostenycoder sure, it makes sense. Hardcode solution could be handy for ppl who uses mobile/limited internet or don't wanna something, what could be compromised (attack to nameserver for example).

[madjomack]

to not download css each time from internet, just use cssminify, replace " to \" and change the stub to:

document.addEventListener('DOMContentLoaded', function() {
  var css="<here is your long minified css>";
   $("<style></style>").appendTo('head').html(css);
}

@hapylestat
I must be doing something wrong while doing this. Can you send me an example of what the index.js file should look like? I prefer to keep it local and manually update as needed.

Thanks,

[hapylestat]

@madjomack index.js isthe wrong place, use ssb-interop.js instead

[lacostenycoder]

I have updated my GIST to check for possible JS code injection and abort if any are found.

[lvh]

@lacostenycoder Doesn't that ruby script only run once, or am I misunderstanding how this works?

[lvh]

@lacostenycoder Never mind; I definitely misunderstood :) Some comments:

• You should also check for img tags, on* attributes, etc etc. Perhaps it would be easier to parse it as CSS via the Sass compiler.
• On line 27: shouldn't this use the url variable instead of being a hardcoded path? Right now it appears the injected code will still use the original URL.

[lvh]

I'd also try a link rel=stylesheet; but GitHub serves up the CSS as text/plain which browsers won't attempt to parse as CSS. I don't know of a way to specify a content type. If you serve it up via GitHub pages though, that should work fine and be safer.

I'd also see if you can do it with createElement and setting the textContent instead of using jQuery.

I haven't tried this in electron so I have no idea which ones will work in Chrome but not Electron.

[lacostenycoder]

@lacostenycoder Never mind; I definitely misunderstood :) Some comments:

• You should also check for img tags, on* attributes, etc etc. Perhaps it would be easier to parse it as CSS via the Sass compiler.
• On line 27: shouldn't this use the url variable instead of being a hardcoded path? Right now it appears the injected code will still use the original URL.

I do use the SASS compiler to validate the remote css and it will error if it has anything malicious. I also updated the code to use the downloaded css file (after sass check) and inject it on ajax success. with a secondary check inside the callback. I was unable to directly inject the local css without the ajax callback, not sure why but I'm kinda done with this for now because it's working and I feel safe about security. This works fine in the desktop app (Electron), and I just use Stylish theme for Chrome in the rare case I need it in my browser. Thanks

[lvh]

Gotcha. But you're running this ruby script every time to start Slack, and so the window for someone to switch it up is very small? That'd be something I've seen exploited if the attacker owns the webserver, but with rawgit I agree that it's probably safe.

That said: keep in mind Stylish has done some bad stuff recently, and is in a position to take over your entire browser: https://securityboulevard.com/2018/07/stylish-extension-stole-all-your-browsing-history-from-chrome-and-firefox/

[lacostenycoder]

@lvh wow on that stylish stuff... crap. I really like using it. Is there any way to close the security holes I wonder?

[laCour]

@lacostenycoder I'll try to provide a suggested solution for this on the weekend using suggestions provided by lvh.

[lacostenycoder]

@laCour Thanks. I was referring to Stylish. I hate the white-washed internet. Can we write an open sourced version of Stylish? As for my ruby script, I think the latest version is secure.

Edit: Oh duh... I didn't realize this is right here Stylus

[laCour]

@lacostenycoder Ah gotcha. That's why the repo's readme suggests only alternatives to the stylish extension. Nobody should be using it anymore. I'd like to see an alternative to userstyles itself, however.

Edit: Looks like this is a viable one: https://openusercss.org/

[lacostenycoder]

Is it safe to install styles from https://userstyles.org/ to use in Stylus?

[tobiasboyd]

@lacostenycoder my impression is that it should be safe, I just went in to a style that was active and added </style><script>alert("oops not so good");</script> to it, saved, and reloaded a page it was applied to - the script tag is ignored by Stylus (this is in FF Dev 63.0b11 on macOS 10.13.6).

[lvh]

@tobiasboyd That's not how it works. <script> tags are normally never executed when added to the DOM; they are exceptionally handled by jQuery. There are a gazillion other ways to get javaScript execution.

@lacostenycoder There are two separate problems here:

• compromises in the extension that applies styles, which effectively has UXSS (universal XSS aka JavaScript code execution in every domain)
• compromises in the applied style itself.

If you're actually just injecting CSS, you can plausibly expect that to not result in code execution. But the problem is that any extension that has the capability to inject CSS can actually inject whatever it wants. So nothing will save you from a malicious extension (as happened with Stylish) or a buggy extension (as happened in the past with e.g. Chromecast).

[laCour]

I've made a gitter room for this project, as that will be a better place to discuss the theme and desktop use. So, I'll be locking this issue.

Feel free to join: https://gitter.im/slack-night-mode/Lobby