New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Desktop hack is not working #73

Closed
aabed opened this Issue Aug 16, 2016 · 156 comments

Comments

Projects
None yet
@aabed

aabed commented Aug 16, 2016

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

This comment has been minimized.

Owner

laCour commented Aug 16, 2016

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.

@laCour laCour added the discussion label Aug 25, 2016

@esbjo

This comment has been minimized.

esbjo commented Aug 26, 2016

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.

@RUSshy

This comment has been minimized.

Contributor

RUSshy commented Mar 17, 2017

@laCour

This comment has been minimized.

Owner

laCour commented Mar 17, 2017

@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.

@RUSshy

This comment has been minimized.

Contributor

RUSshy commented Mar 17, 2017

Thanks, yours is better :D

@widget-

This comment has been minimized.

widget- commented Mar 20, 2017

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

@laCour

This comment has been minimized.

Owner

laCour commented Apr 23, 2017

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

@potto007

This comment has been minimized.

potto007 commented Jun 9, 2017

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

This comment has been minimized.

jeffwklein commented Jun 9, 2017

@potto007 worked great -- thanks for the script!

@pointlessbuttonstudios

This comment has been minimized.

pointlessbuttonstudios commented Jun 27, 2017

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 comment has been minimized.

MHaendel commented Jul 21, 2017

This is awesome, please integrate as an option

@Lemmmy

This comment has been minimized.

Contributor

Lemmmy commented Jul 22, 2017

it can't really be integrated with an option

@olets

This comment has been minimized.

Contributor

olets commented Aug 1, 2017

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
@Jiri-Kremser

This comment has been minimized.

Contributor

Jiri-Kremser commented Aug 2, 2017

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.

@olets olets referenced this issue Aug 2, 2017

Merged

Raw variants #114

@ransagy

This comment has been minimized.

ransagy commented Aug 6, 2017

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

This comment has been minimized.

BluefireJaguar commented Aug 11, 2017

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

@Lemmmy

This comment has been minimized.

Contributor

Lemmmy commented Aug 11, 2017

post a separate issue with screenshots @BluefireJaguar

@rajgorthi

This comment has been minimized.

rajgorthi commented Aug 20, 2017

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

This comment has been minimized.

Owner

laCour commented Aug 20, 2017

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

@rajgorthi

This comment has been minimized.

rajgorthi commented Aug 20, 2017

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

@rajgorthi

This comment has been minimized.

rajgorthi commented Aug 20, 2017

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

@laCour

This comment has been minimized.

Owner

laCour commented Aug 20, 2017

@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.

@rajgorthi

This comment has been minimized.

rajgorthi commented Aug 20, 2017

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.

@rajgorthi

This comment has been minimized.

rajgorthi commented Aug 20, 2017

It worked, thanks for everything!

@Chase-Bullock

This comment has been minimized.

Chase-Bullock commented Aug 21, 2017

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

This comment has been minimized.

potto007 commented Aug 21, 2017

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

This comment has been minimized.

Chase-Bullock commented Aug 22, 2017

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

Thanks,
Chase

@andresmaiden

This comment has been minimized.

andresmaiden commented Aug 25, 2017

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

@simbalinux

This comment has been minimized.

simbalinux commented Jul 30, 2018

@lacostenycoder

This comment has been minimized.

lacostenycoder commented Sep 22, 2018

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

This comment has been minimized.

lvh commented Sep 25, 2018

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

This comment has been minimized.

lacostenycoder commented Sep 30, 2018

@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

This comment has been minimized.

tuandm commented Oct 1, 2018

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

@lacostenycoder

This comment has been minimized.

lacostenycoder commented Oct 2, 2018

@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

This comment has been minimized.

hapylestat commented Oct 2, 2018

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

This comment has been minimized.

tuandm commented Oct 2, 2018

@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

This comment has been minimized.

lacostenycoder commented Oct 2, 2018

@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

This comment has been minimized.

lacostenycoder commented Oct 2, 2018

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

This comment has been minimized.

hapylestat commented Oct 3, 2018

@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

This comment has been minimized.

madjomack commented Oct 3, 2018

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

This comment has been minimized.

hapylestat commented Oct 4, 2018

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

@lacostenycoder

This comment has been minimized.

lacostenycoder commented Oct 4, 2018

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

@lvh

This comment has been minimized.

lvh commented Oct 4, 2018

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

@lvh

This comment has been minimized.

lvh commented Oct 4, 2018

@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

This comment has been minimized.

lvh commented Oct 4, 2018

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

This comment has been minimized.

lacostenycoder commented Oct 5, 2018

@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

This comment has been minimized.

lvh commented Oct 5, 2018

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

This comment has been minimized.

lacostenycoder commented Oct 5, 2018

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

@laCour

This comment has been minimized.

Owner

laCour commented Oct 5, 2018

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

@lacostenycoder

This comment has been minimized.

lacostenycoder commented Oct 5, 2018

@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

This comment has been minimized.

Owner

laCour commented Oct 5, 2018

@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

This comment has been minimized.

lacostenycoder commented Oct 5, 2018

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

@tobiasboyd

This comment has been minimized.

tobiasboyd commented Oct 5, 2018

@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).

@aabed aabed closed this Oct 6, 2018

@lvh

This comment has been minimized.

lvh commented Oct 6, 2018

@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

This comment has been minimized.

Owner

laCour commented Oct 6, 2018

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

Repository owner locked and limited conversation to collaborators Oct 6, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.