Scratch-www: Create warning for users when they open the developer console

[thisandagain]

Unfortunately, we've now seen a few instances of users creating malicious scripts and encouraging Scratch users to execute them in the developer console. Because of this we would like to create a warning that appears in the developer console. I've included some examples from other services below (as this has now unfortunately become standard practice):

Discord

Roblox

Facebook

Assigning to @christanbalch and @dietbacon to draft the copy for the message.

/cc @rschamp @colbygk @chrisgarrity

[colbygk]

[dietbacon]

First draft:

STOP! [in some kind of red image text]

This is part of your browser intended for developers. If someone told you to copy or paste something here, please be aware that this could allow another person to take over your Scratch account, delete all of your projects, or do many other harmful things. If you don't understand what exactly you are doing here, you should close this window without doing anything.

[seotts]

Here's a slight edit:

STOP! [in some kind of red text]
This is part of your browser intended for developers. If someone told you to copy-and-paste something here, don't do it! It could allow them to take over your Scratch account, delete all of your projects, or do many other harmful things. If you don't understand what exactly you are doing here, you should close this window without doing anything.

@dietbacon and @christanbalch and I talked about it and feel good about it from our side.

[JoelGritter]

@thisandagain I'd be interested in developing a solution for this issue if it is open to contributors. The only question I would have would be where to put it. (i.e. is within the render function of the nav-bar a good spot or not: https://github.com/LLK/scratch-www/blob/develop/src/components/navigation/www/navigation.jsx#L185 )

[thisandagain]

@JoelGritter That would be great. I think this should be in a new component that's attached to the top level application rather than something like the nav-bar which may not always be used in the future.

[JoelGritter]

@seotts @christanbalch @dietbacon
Is this what you were envisioning or is this _too_ scary?

[JoelGritter]

@thisandagain Another question: do we want this to be translated or not?

[thisandagain]

@JoelGritter Hmm! Interesting. If possible, I think it would be great to include this in translation.

/cc @chrisgarrity

[thisandagain]

@JoelGritter The red on black is a little over the top. Perhaps we could do something more like the red "Stop!" from Facebook as shown above.

[thisandagain]

@JoelGritter Also it feels like those statements should flow together as a single paragraph rather than multiple lines.

[JoelGritter]

@thisandagain Styling v2

[AmazingMech2418]

@JoelGritter The JS console could only be used for things JavaScript can be used for, excluding hacking unless it links to a PHP file or uses advanced API that is restricted because of Scratch firewalls.

[chrisgarrity]

@JoelGritter I think it would be great if this was translated - I think you can just add it to the src/l10n.json file. That's included in every view. Probably with a key like general.consoleWarning. Is the stop an image or styled text? If it's text that can also be translated. You can look at the navigation for examples of localization (https://github.com/LLK/scratch-www/blob/develop/src/components/navigation/www/navigation.jsx), and there's a wiki page with some tips. (https://github.com/LLK/scratch-www/wiki/Localization-Guide)

[JoelGritter]

@chrisgarrity The stop is text, so it can be translated. 👍

[joker314]

I like the proposed text, but I think more emphasis should be put on not copying and pasting content. Some people might not stop to read the small text.

Transcript:

in big red: STOP!
in big hot pink: Don't paste anything here!
in normal print, with the list of things an attacker can do in bold: This is part of your browser intended for developers. If someone told you to copy-and-paste something here, don't do it! It could allow them to take over your Scratch account, delete all of your projects, or do many other harmful things. If you don't understand what exactly you are doing here, you should close this window without doing anything.

Thoughts?

[DeleteThisAcount]

code:
https://gist.githubusercontent.com/DeleteThisAcount/fba939ca57fff5a6e5e40010a4f6c033/raw/a26d03909b1a788a946fd11a76aa83050a7defb4/console.log.js

[Sheshank-s]

@DeleteThisAcount I think that's just a little over the top ;)

[thisandagain]

@JoelGritter Any updates on this?

[JoelGritter]

@thisandagain Hopefully tomorrow