« first day (3516 days earlier)      last day (1654 days later) » 

02:21
Hello guys
Anyone here?
?
02:37
hi
should I store a jwt token?
 
2 hours later…
04:59
font awesome 6 coming soon
 
2 hours later…
06:57
hey guys, is it ok to ask React doubt here?
@Prabhatkumar Welcome to the JavaScript chat! Please review the room rules. If you have a question, just post it, and if anyone's free and interested they'll help. If you want to report an abusive user or a problem in this room, visit our meta.
i am using trackBy to detect changes in arraylike this
*ngFor="let prop of propertiesData, let i = index, trackBy: trackItem"
but it causing infinite API calls
propertiesData is result of API call
How can i avoid multiple calls?
07:21
@Prabhatkumar I've used React JS, React Native, I've heard of React Redux, but I haven't heard of React Doubt as a library or framework. If it is something uncommon you may have better luck at the main Q&A site.
 
1 hour later…
08:45
wow, sheepy, you replied sarcastically but it was lame af
 
2 hours later…
10:30
ur lame
10:40
I'm facing a XSS security issue and I'm trying to understand how it's possible in JavaScript.
The problem is basically that JavaScript is somehow parsing escaped HTML Entities as if it was not escaped
@LucasBustamante what is the code that does it?
no u
Just a second, I'll share here in a few.
The input: `<svg onload="alert('XSS')"></svg>`
The backend escapes it and sends to JavaScript: `
&lt;svg onload=&quot;alert(&#039;XSS&#039;)&quot;&gt;&lt;/svg&gt;gt;`
This is feed as a Select2 option, then XSS occurs
well if you add it to the page, then yeah, it's a xss security issue
Okay, I thought I was safe with HTML Entities.
10:47
Ugh, Select2...
onload javascript gets run
I tried to track down in Select2 where that string is injected and evaled to isolate the XSS
I see it does: container.innerHTML = string or $(container).append(string)
I couldn't replicate the XSS with either
it just outputs as text, as expected of html entities
It might be parsing string before it gets there. Select2 is...doing complex stuff
the important thing is that your container is an iframe
there are protections to prevent the parent window from being affected
I could do some nasty stuff with that XSS as a proof of concept
10:49
if the container is just, like a div, then you're giving them access to the whole page
I've created an administrator account as a guest
Hmm
What in JavaScript could eval that HTML Entities string as real javascript code?
If you set the content as HTML and then read it back, you'll "decode" it.
Hmm, interesting.
I'm trying to whip up a setup with Select2 to see if I can recreate it using that library
10:57
OK, good you have the example
Let me have a look
escapeMarkup is precisely what protects Select2 from this kind of attack. In this example, we are "breaking" it by not making it escape anything. We did that in the hopes of passing trusted HTML data for rendering and passing untrusted HTML data as HTML entities, so we can have a select with HTML but with the untrusted data already escaped
The problem is that feeding it escaped data is not enough, since it's parsed as JS anyway
If Select2 could do something wrong, it probably does. That's what I've learned from wrangling with it.
It's weird but disabling the escapeMarkup shouldn't cause a problem. Not logically, at least - safe content goes in, safe content goes out.
That's the idea.
@Prabhatkumar Sorry that didn't make you laugh. If you have a generic React JS question, that does not fit the main site, yes this is the room to ask.
@VLAZ yeah :shrug: - I'm trying to understand where exactly that is evaled
I've got here: https://github.com/select2/select2/blob/develop/src/js/select2/results.js#L535

But I couldn't replicate it with plain JavaScript using container.innerHTML
11:12
@LucasBustamante I suggest not really looking into Select2 very closely. That way lies madness.
But template(result, container); seems to get the evaluated string that has the content unescaped already.
My guess is that it grabs the HTML content from the page which is going to be the evaluated content
@LucasBustamante Select2 might be doing something like this to get the template.
The question is: Can it trigger an alert?
Sure, if you take that un-escaped content and place it in the page.
@LucasBustamante document.createTextNode
Thanks.
I tried. I swear.
11:24
Force it to be text, so it doesn't execute it as it renders back to HTML
Ah, okay. I thought you were mocking me because I used jQuery in the example.
So it'd just be return document.createTextNode(markup);
@BenFortune .textContent to get the text only
text nodes by definition can't contain markup
That too
11:26
if you force a text node, you can be sure you won't have anything but text
Ideally, we need HTML.
Nevermind, select2 re-creates it as HTML, lmao
damn you, Select2!
But we feed it safe HTML in the raw format, and unsafe HTML as HTML Entities
The issue is that it is evaluing html entities as well
User supplied HTML is never going to be safe
11:27
I've spent a disproportionate amount of time on trying to make Select2 work as it should...
Especially if you want to render that afterwards
Why do you want to let users supply HTML to select2?
You could give them an option to customise it with pre-defined options, or a parser such as markdown
Is "Dom Based XSS" the correct name for this attack?
Well, anyway, I appreciate the chat guys
It was really instructive. tl;dr, untrusted html entities are not safe in JS
Probably closer to an entity based attack
11:39
this was a scary one. We relied heavily on our escaping for security
Hope you're not using regex
because then you'd have two problems
12:28
morn o/
'sup
fuck classes that hold lectures after the final
13:18
🚽
oh, cool, me being inactive for a month or two increased my rep
!!stat
Username: Kevin B
ID: 172549
Reputation: 90067
Reputation Change Month: 305
Last Accessed: Mon Jun 01 2020 08:31:08 GMT-0400 (Eastern Daylight Time)
@KevinB How does it feel to realize that your reputation is stronger when you're not actively doing anything? ;)
good
like my job here is done
😏
yep, top notch content coming from kevin stackoverflow.com/users/400654/kevin-b?tab=questions
;)
13:34
@Neil You have the patience of a saint. This guy seems like a troll to me, but you just never know. xD
@Michael if he's a troll, he wastes just as much as his time as mine
also, honestly if he ultimately doesn't get it, not really my problem
13:49
|| mdn Ambient Light Events
lol
 
1 hour later…
15:19
I think Stenciljs is disconnecting when the parent re-renders, thereby losing all my state; but that just does not sound right.
how long until we get a cookie api?
its 2020, come on
$.cookie
16:11
> Github is now free for teams! Teams are $4 per user per month
2
doesn't sound very free
lmao
Teams are dead, long live teams
We don't use it because bitbucket actually offers it for free for teams
Bitbucket? What is this, 2007
Next you'll tell me you're using sourceforge and google code
16:16
neither
but we do use coldfusion, so,
catch up kevin
here in 2020 we use golang
why?
I don't know
at least for the next year we don't have a coldfusion front-end to worry with, so maybe we can move the backend to something else soon
Have you ever heard of Deno
16:18
pain in the ass to integrate coldfusion with anything modern
I'm kidding please don't use Deno
Update it to JS
node.js is my preferred option, but only because i know it.
i don't particularly like using node.js for mostly static websites though
16:19
Just to spice things up
Sounds like an opportunity for Kotlin
I thought you were going to say PHP
It's very spicy
What kind of person do you take me for
Naughty
( ͡° ͜ʖ ͡°)
16:45
Man. Been on this all day. I have some charts (using amcharts), when they load in they take about 1000ms to populate/render. If i have two or three on a page. This locks up the main thread makign the page unresponsive for a few seconds. How do people mitigate this in javascript?
17:01
Anyone experience with knexjs? - Is it possible to "check" a query? - Like checking which tables will be joined by the query?
18:09
Argh why does every, every answer on stackoverflow I seem to find with google give me a wrong answer.
literary an incorrect answer.
Sorry, I'm not a regular JavaScript programmer. >.<
It's like SO is a mess of incorrect solutions. I'm just asking for something to do case insensitive comparison on a database. And then the answer I keep finding are variations of do "LOWER()" or "UPPER()" around your request. - But that's wrong, in most languages there is no one one one mapping between lower and uppercase.
Oh, you're not talking about me. /facepalm
IE in german the uppercase of "ss" can be either "SS" or ß, based on the word. So anyone who would convert an input containing "ss" in german might not find the correct database entry (it should find entries containing either SS or ß or ss).
Or, if we convert to lowercase in greek the Σ to lowercase could be either σ or ς. So any input containing Σ might be handled wrongly/incomplete.
The solution is to never use unicode for database keys
lol
18:19
Well it's for user search queries.
like "search in the description for xyz"
18:53
@KevinB reminds me of the sites that advertise "Free Sign Up", but to use the service you have to pay
19:13
hi
how do you bring a cookie back to the server
You mean how to read a cookie?
how is github free for teams but 4 per user per month
I tried azure devops and I'll never go back
yes how do you read a cookie?
from the server
The best way to do that is with server code. What backend language are you using?
yes but the cookie is on the client in the frontend
how does that work
The server still has access to it.
19:15
|| mdn http request
JAMES!
I know what an http request is but how do I request a cookie. i'm using express
||status Schrodingers Cat
I am currently alive!
Now we know
19:16
Server code runs when the browser makes a request from the server. The cookie information is available from that request.
hehe
|| mdn cookie header
What do you mean "express"?
@ChristianMatthew read that
none of these tell me how to get to the cookie from expres
19:18
Christian, what do you mean "Express"? That's not a language that I know of.
That's a js library. That doesn't run on the server.
It does @Hypersapien
Oh, it's for Node. Yeah. That runs on the server.
19:19
Express is the most used Node web framework
I wonder if express.com uses express
well i would say server framework
the most used server framework
wtf they sent my graphics card type information to some analytics website
:(
last time i ever use the internet god dammit
so now this is just a stupid question but is there any possible way to test for this in postman?
> GET / HTTP/2
> Host: www.express.com
> User-Agent: curl/7.64.1
> Accept: */*
>
* Connection state changed (MAX_CONCURRENT_STREAMS == 100)!
< HTTP/2 200
< server: Apache
< content-type: text/html; charset=UTF-8
< ...
19:25
test for what
Looks like it's apache :P
hmm, could be used as a load balancer and then express server behind it
Normally you'd see a header indicating that the request was proxied
so there only for cookies I create?
true true
19:29
Funny that expressjs.com doesn't use Express either
Which is fair as it's a static site
19:53
Does anyone use non-pushed branches in a professional environment here?
We keep not using those, since it's really annoying when switching work stations.
anyone know how to read an oauth token?
just for your workspace?
@paul23 I used non-pushed (local) branches all the time, to separate the things I'm working on
Hmm wouldn't that clutter the branch display very quickly and make finding branches near impossible?
Or do you also delete those branches regularly?
I don't use git purely by terminal
I use Jetbrains IDEs which have a pretty useful repository view
So when I'm switching branches I just scroll through the log until I see the commit at the branch tip
20:06
I also use jetbrains, but rightclick-select-branch interface is already way too long. Might get used to the version log though haven't really used those except for checking that tags are on the correct commit.
Yeah I use the log view constantly for switching around between commits, rebasing, merging, resetting, etc
I only use the terminal for pushing and fetching, and for the occasional configuration change like adding remotes
Still at the end of a workday I take it you upload even your non-finished branches?
No
I push my branches to my fork when I'm submitting a PR
Or when I'm updating a PR
Prior to submitting a PR I just keep my branches on my machine
Hmm that's what management doesn't "like" and hence we get a lot of branches on public. They require each workday to be "uploaded".
Yeesh that's annoying
Sam
Sam
20:15
export default InnerComponent =>
  setDisplayName('withDriverDetailValues')(props => (
    <DriverDetailsContext.Consumer>
      <InnerComponent {...props} />
    </DriverDetailsContext.Consumer>
  ));
What do I google to find out more about =>
I'm not sure how this component pipes through
arrow function
Sam
Sam
I'm used to something like:
export default SomeName = (props) => {
  <DriverDetailsContext.Consumer>
    {props.children}
  </DriverDetailsContext.Consumer>
}
it's an anonymous function
export function(props) {
  return whatever;
}
@forresthopkinsa it's why I opted to just "do everything on server" -- if "semi-temporary" branches are I might as well put everything so I know where everything is located.
20:20
lol
10/10 joke right there
Sam
Sam
@forresthopkinsa I don't get how they are then able to use InnerComponent inside
export props => {
  return whatever;
}

export fn = props => {
  return whatever;
}
same thing
except you can re-use the function in the latter
Sam
Sam
So in my example, is the following equivalent
export default () => (
  setDisplayName('withDriverDetailValues')(props => (
    <DriverDetailsContext.Consumer>
      {props.children}
    </DriverDetailsContext.Consumer>
  )));
No, you don't have any parameters there
Sam
Sam
20:27
ah, I see
I think I get it
    export default InnerComponent =>
      setDisplayName('withDriverDetailValues')(props => (
        <DriverDetailsContext.Consumer>
          <InnerComponent {...props} />
        </DriverDetailsContext.Consumer>
      ));
    // same as:
    export default function doSomething(InnerComponent) {
    	function innerFunction(props) {
    		return (
    			<DriverDetailsContext.Consumer>
    				<InnerComponent {...props} />
    			</DriverDetailsContext.Consumer>
    		);
        }
		const curriedFunction = setDisplayName('withDriverDetailValues');
Sam
Sam
ahhhh, great thanks for explaining
@paul23 keeping commits locally is useful if you want to clean up and re-write the history before pushing. I tend to do that. At the same time, I wouldn't recommend keeping uncommitted and unpushed changes for very long. I might skip a day but two or more days without pushes might be a problem.
Mainly because something might happen. If I go sick or whatever, then that work is lost. Or even more mundanely, I might need to go work on something else and come back a couple of days later, so it's harder to figure out where to continue from.
20:50
let variable;
useEffect(() => variable = "hi",[]);
return <span onClick={() => console.log(variable)}>
any idea why variable would be undefined there?
I don't use React but isn't useEffect running next tick or something?
idk, but it should be set by the time i click
I don't think local variables are managed in functional components
Is it still undefined if you don't pass the empty array?
should i use useState?
Probably
Make sure you avoid a stack overflow there
20:55
stack overflow is the worst
( ͡° ͜ʖ ͡°)
21:11
@VLAZ it is indeed running "next tick" - thought that isn't necessary "next refresh" or even "next dom build".
But that's not really the problem, the bigger problem is that you use a variable, each time an object is rendered all local variables are "reset" (the function is called). So each render (also the next render) variable would be unset. Then useEffect runs, which causes a rerender later again (once again, it's cached to not constantly update the real dom just virtual dom). Then on the next render variable is once again unset.
If you wish to "keep" variables between renders you'll have to use refs for that:
(or state)
but yeah refs are a good point, I always forget about those
yeah use state if the variable is actually part of the rendering.
let variableRef = React.useRef(undefined); //or whatever initial
useEffect(() =>variableRef.current = "hi", [])
return <...>
This would still display "undefined" though as like forresthopkinsa said, only updating state causes a rerender.
It wouldn't if he's using an arrow function
Look at what he's doing
Hi! Do someone know if we can do this in CSS:
    <span><span>...elipsis</span><span>Important infos</span><span>elipsis...</span><span>
At least I don't think it would
21:16
Like the center text is never cutted
let [variable, setVariable] = React.useState(undefined);
useEffect(() => setVariable("hi"), [setVariable]);
return <div>{variable}</div>;
don't pass the setter to the effect hook
It's not bad? And it prevents linting errors
Otherwise you'd like to add //eslint-disable-line react-hooks/exhaustive-deps but that prevents any help regarding missing dependencies.
Use an empty array
Yeah that will trip eslint :P
21:19
The second param is for state, not state setters
And in this case we especially don't want that variable in that second param
If you use the state variable itself instead of its setter, that'll cause an infinite loop
It's for "anything that might update", the setters won't - but react or any linter doesn't know that.
That's what an empty array is for
If eslint doesn't accept that, then that's a linting bug
Empty array is just "never run this except for first run".
@forresthopkinsa it's not a bug, since it's impossible to know it wont' be updated.
Which is functionally identical to passing something that you know won't change
What do you mean?
Eslint would never be able to convey from surrounding code that the setter won't update: there is no guarantee anywhere.
21:23
I'm saying that if eslint doesn't allow an empty array then that's a linter bug
It might convey it from React.useState but I could've overwritten the object prototype to do something different and return a thing that might chagne.
It allows, but then it complains with "missing variable in dependency array".
And gives an error about that. You could disable that but then you disable the whole check for dependencies.
Oh I see what you mean
That's a garbage rule, I would disable that first thing
It's default from the react team though, they strongly recommend it.
I'd still disable it
I'd leave it enabled if I was on a large codebase where not everyone knew the React hook contract
@JBis haha love web dev
@forresthopkinsa then let me introduce you to the MsoTriState enum. The description reads "Specifies a tri-state Boolean value." which...isn't boolean, since those have two values. Tri-state means three. But it's a lie there are FIVE values in that tri-state dual value enum. And of the five, three are not supported. So, only two work 0 for false and (obviously) -1 for true.
I have no idea what that enum is actually used for but sometimes when I'm sad I look at the documentation to lift my spirits.
Microsoft Office API? I'd be lying to say I'm surprised
That documentation is hilarious
It's also been that way for about 8 years or so.
21:52
I'd hate to work on that codebase
22:15
22:39
what would you use in express to call an api internally? would you still use an http request?
23:07
WTF, I can't access documentation due to "respect for black lives matter".
Will the owners of said company then also provide me with a loss of workday?
23:32
React documentation is monochrome for it
interestingly
I find it quite annoying that once again american politics are on websites about development. Yet other politics don't seem to be, and are actively hunted.
I don't think everyone sees it as political

« first day (3516 days earlier)      last day (1654 days later) »