00:00:01.760
hello everyone today I'm going to talk
00:00:04.000
about enhacing with security with the
00:00:07.000
cture so let's
00:00:09.160
start I am MAA from Lima Peru and I
00:00:12.200
learned about Ruby almost four years ago
00:00:15.240
I love cats and also at the moment I
00:00:17.800
only have one I am often called to be a
00:00:20.720
considerer for others so first I
00:00:23.920
disclaimer I'm not a security expert
00:00:26.039
about any shape or form but I got
00:00:28.480
several chances to implement we got CH
00:00:31.199
work included the woman Nary project and
00:00:34.280
I find it
00:00:36.239
fascinated so this is what we're going
00:00:38.559
to talk about today first we Define the
00:00:41.120
importance of security on the web then
00:00:43.719
we talk about recapture has a tool to
00:00:47.079
solve some part of the problem and then
00:00:50.360
at the end we are going to see how it is
00:00:53.280
implemented within W
00:00:55.719
no let's start with web
00:00:58.920
security so when we incorporate an input
00:01:02.039
tag into our website we immediately
00:01:05.880
assume responsibility for the data we
00:01:08.280
are about to
00:01:09.600
collect now we know how the internet is
00:01:12.680
constantly under attacks from several
00:01:15.000
malicious entities including BS spammers
00:01:19.080
uh cyber
00:01:20.479
criminals so when web security is in up
00:01:24.320
to par it can be lead to some serious
00:01:26.960
problems on the big ISS one of the big
00:01:29.560
issues is data Brides where sensitive
00:01:32.079
info info can end up in the wrong hands
00:01:36.600
this can cause financial problems Hur a
00:01:39.640
company's reputation and make customers
00:01:42.799
upset from the users perspective they
00:01:46.040
want their personal infut to stay
00:01:48.560
private and secure if a website doesn't
00:01:51.759
take Ser security seriously it can make
00:01:54.479
users feel like they can the side for
00:01:58.159
businesses the consequences can be even
00:02:00.600
more Direct Security Brees can mean
00:02:03.680
losing money getting into legal
00:02:07.360
troubles
00:02:09.080
and um Can Hurt the compan reputations
00:02:13.319
from the user perspective they want
00:02:16.239
their personal personal info to stay
00:02:18.400
private and
00:02:20.000
secure uh in some Industries There are
00:02:22.560
rules about keeping thata safe and if a
00:02:25.360
company doesn't follow them they could
00:02:27.599
get into trouble within the law so good
00:02:31.319
qu security isn't just a good idea it's
00:02:33.959
a must to avoid this kind of
00:02:38.680
issues so
00:02:40.840
next let's talk about something called
00:02:43.319
the hour stop 10 list it's like a
00:02:45.800
friendly guide for software creators and
00:02:48.680
web developers which points out the most
00:02:51.000
important safety issues when building
00:02:53.920
web applications think of it has a list
00:02:57.560
that most people in the web develop were
00:03:00.400
agree on and it helped us to know what
00:03:04.280
problem to be cautious about in sure in
00:03:08.239
this short talk I mentioned the the
00:03:10.760
first one which is the not which is now
00:03:13.080
has the a01 broken access control and
00:03:17.280
it's like the bonser at a club it makes
00:03:20.519
sure that only the right people get in
00:03:22.920
so in the context of your web
00:03:25.080
application it means that us user should
00:03:28.400
only be able to do what they are
00:03:30.439
supposed to do for example your credit
00:03:33.319
card info should only be accessible by
00:03:35.959
you as long as you prove you are the
00:03:38.519
rightful owner and no one else should
00:03:41.000
get in there if you want to learn more
00:03:44.000
about the other's concerns you can check
00:03:46.360
out the OAS Foundation
00:03:49.120
website time to talk about capture and
00:03:53.040
recapture capture a contrive acronym is
00:03:56.599
a type of challenge response test used
00:03:59.280
in Computing to determine whether the
00:04:01.959
user is human in order to deter both
00:04:05.200
attacks and spam it was first invented
00:04:08.879
in
00:04:11.120
1997 recapture is the most popular
00:04:13.840
capture service recapture was released
00:04:16.600
in 2007 and it was acquired by Google in
00:04:20.720
September 2009 for use in Google books
00:04:24.560
in order to digitize books according to
00:04:27.680
Wikipedia the original version ask users
00:04:30.759
to decipher hard to read text or match
00:04:34.639
images version two also ask users to
00:04:38.120
decipher test or match images if the
00:04:41.360
analysis of cookies and canvas rendering
00:04:44.240
suggested the page was being downloaded
00:04:47.919
automatically since version three
00:04:50.280
recapture never interrupts users and is
00:04:53.160
intending to room automatically when
00:04:55.720
users load pages or click buttons in
00:04:59.000
this picture taking from the go witha
00:05:01.759
Enterprise web page shows us that in
00:05:06.320
2020 you are able to integrate
00:05:09.000
Enterprise with your IOS and Android
00:05:13.720
apps when you visit a website protected
00:05:17.080
by recaption version two you'll see a
00:05:19.680
little checkbox to confirm your not
00:05:22.520
robot this checkbox triggers some behind
00:05:25.280
the scenes magic it checks your browser
00:05:28.479
and sends some information
00:05:30.000
T back to the server this helps the
00:05:33.000
website make sure you are a real person
00:05:35.479
not a vot when you click that checkbox
00:05:38.639
it talks to Google sending them a few
00:05:40.880
things first it sends where you came
00:05:43.960
from the refer a special code that the
00:05:46.840
website got when it sign up for the
00:05:50.759
recapture the website key a cookie from
00:05:55.160
google.com and some info about your
00:05:57.560
browser checks organizes in a way that
00:06:00.520
makes this safe uh the Gold's fancy
00:06:03.680
computer system looks at all these and
00:06:06.560
decided why kind of puzzles to give you
00:06:10.080
the puzzles can be different for each
00:06:12.599
person if you got a history of calling
00:06:15.520
troubles or answering things wrong you
00:06:18.080
might get a th
00:06:20.440
puzzles once you get the puzzles you get
00:06:23.599
you got 55 seconds to solve it if you
00:06:26.360
don't you need a click the check box I
00:06:29.520
again for a new puzzles but if you solve
00:06:32.880
it an invisible Cod recapture token
00:06:36.319
appears in the web page code it's like a
00:06:38.919
secret code that proves your okay if you
00:06:42.240
pass the test and don't need to do
00:06:44.520
Apostles the code becomes valid on
00:06:47.319
Google sites when you do whatever you
00:06:50.560
came to do on the website it sends that
00:06:53.560
code and some other stuffs to check with
00:06:56.639
Google using the recapture API and
00:07:00.080
Google says yes or no and that's how the
00:07:03.120
website knows if you are the real
00:07:07.639
deal uh recaption version three is like
00:07:11.360
a smarter handsfree version of recaption
00:07:14.479
version two which we described before uh
00:07:18.360
when I was trying to find more images or
00:07:21.639
how try to display recaption version
00:07:23.840
three it was like a there were no more
00:07:26.400
information about it so it's like a a he
00:07:29.599
all what is related to this isn't here
00:07:32.240
anymore only you have a sign that make
00:07:34.599
can make click and read about the terms
00:07:36.960
of
00:07:37.759
services that you use when you are using
00:07:41.120
recaption version
00:07:42.759
three
00:07:44.400
so just continue and recapture mergen
00:07:47.520
you can check if an interaction on your
00:07:50.400
website is real or not without bothering
00:07:52.919
the user with any post electric process
00:07:55.360
it's like a behind the scenes detective
00:07:57.520
that works using only JavaScript
00:08:00.120
as a result there are typically fewer
00:08:02.240
accessible issues associated with
00:08:04.159
recapture version three this is
00:08:05.560
something that I like instead of giving
00:08:08.080
you a n note a robot checkbox recapture
00:08:11.560
version three provides an score this
00:08:14.360
score helps you decide what to do on
00:08:16.720
your website for example if the score is
00:08:18.960
low you can ask for more proof from the
00:08:21.400
user like an extra password or email
00:08:24.400
confirmation or or if the score is high
00:08:28.479
you can let them
00:08:29.879
in without any hustle it's all about
00:08:32.440
making your site more secure and user
00:08:35.039
friendly so in a nutshell recaption
00:08:38.039
version three gives you a score for each
00:08:40.719
interaction on your side without any
00:08:44.159
without making users do anything extra
00:08:46.920
this score is based on what's happening
00:08:48.800
on your site so you can use it to take
00:08:52.399
the right action to protect your
00:08:54.440
websites from unwanted
00:08:58.200
visitors for web applications recapture
00:09:01.399
is like a
00:09:02.519
superhero especially in terms of
00:09:04.920
security this is how it operates in
00:09:07.480
accordance with the OAS top 10 in 2021
00:09:11.839
which is kind of the corate web security
00:09:15.120
guide fighting of annoying BS recapture
00:09:18.519
employs technology to identify and sub
00:09:21.519
Bots that attempts to access web
00:09:23.920
applications it works similar to a force
00:09:26.200
field to the ter automated attacks like
00:09:28.800
when a bad guy try to guess password
00:09:31.399
again and again and again so proving you
00:09:34.560
are a human recapture ask you to take a
00:09:37.440
unique test to confir that you are a
00:09:39.399
human and not a robot it's similar to
00:09:41.800
asking you a personal question that only
00:09:44.160
you humans are able to
00:09:47.399
answer so stopping
00:09:51.240
data using injection attacks some bad
00:09:54.200
guys attend to sneak sneaking and take
00:09:56.720
your private information however
00:09:59.240
recapture keeps the watch avoiding of
00:10:02.079
these malicious vots protecting your
00:10:04.120
secrets so gardening malicious B may
00:10:07.720
attempt to compromise the Cod of your
00:10:09.760
online application using cross side
00:10:12.680
scripting attacks however recup keeps an
00:10:16.000
eye of those these scammers and protect
00:10:19.279
your data with that so
00:10:23.000
also where a capture try to make your
00:10:25.600
users happy trying to accomplish to
00:10:30.160
through all what is related to the test
00:10:32.399
make it easier to to solve so you users
00:10:36.040
can use loading in or using your we
00:10:39.000
application his uh
00:10:41.760
R so for time to show uh some code uh
00:10:46.519
remember that all this is in our GitHub
00:10:48.920
project so it is public so everybody can
00:10:52.320
access we'll be working with recapture
00:10:55.160
version three another the Enterprise
00:10:57.160
version that is the latest one which is
00:11:00.200
version three because is a newer version
00:11:02.639
the version two which has been around
00:11:05.079
for 11 years has numerous online
00:11:07.320
tutorials for implementation however
00:11:09.720
some of these tutorials also teach how
00:11:12.399
to create Vats that can bypass recaption
00:11:15.760
version two so we are focusing on the
00:11:19.200
more recent and secure recaption version
00:11:21.320
three for our
00:11:24.440
implementation for our implementation we
00:11:27.120
we'll go to the Google site
00:11:29.519
with the recapture site we're going to
00:11:31.560
get our keys and then we are going to
00:11:34.040
return to our codes to implement it in
00:11:37.200
the right site and the react
00:11:41.320
site on our website we made a switch
00:11:44.560
from using a Google form to our custom
00:11:47.279
made registration process for the new
00:11:49.800
members so to make sure we don't accept
00:11:52.560
that entering by Annoying Bots we added
00:11:55.399
a recapture as a security feature
00:12:00.160
uh first we enter to all recapture the
00:12:03.480
admin panel and you register our website
00:12:07.519
then we are going to get our keys the
00:12:11.000
ones that we were mentioning before
00:12:13.360
first the site key which allows you to
00:12:16.760
identify the project within gole and
00:12:20.880
also the c key which is the one that
00:12:23.240
will be consumed by the recapture API to
00:12:26.160
give us a
00:12:27.880
score for the client site we need to
00:12:32.199
include this script in
00:12:35.120
our let's say react side
00:12:40.079
so recapture version three gives us the
00:12:43.639
documentation gives you two options the
00:12:46.240
first one is automatically bind the
00:12:48.639
challenge to a bottom that is how
00:12:50.440
exactly mentioned in the documentation
00:12:53.040
and this is when you configure to when
00:12:56.040
you click the button that button is
00:12:58.040
going to get all information and it's
00:12:59.920
going to trigger the the execution to
00:13:03.480
send to all the the token thing and the
00:13:07.040
second one is called
00:13:08.959
program invoke the challenge so here we
00:13:12.480
need to include the recapture inside
00:13:14.880
what is the the script that we going to
00:13:17.000
include in the in the
00:13:19.560
page so we decided to go the last one
00:13:23.320
because we'll only have one action on
00:13:25.720
the single page where we need the
00:13:27.360
recapture but in in the future we might
00:13:29.720
use the first option where the challenge
00:13:31.959
shows ups when user visit our whole
00:13:35.160
website uh in this way we can collect
00:13:38.320
all the info about users to Google
00:13:40.720
analytics and make their experience
00:13:42.560
better I know sometimes you can't sounds
00:13:45.480
intrusive but there are information
00:13:48.199
about go mentioning that the way that
00:13:50.800
they use that data is not to sell it or
00:13:53.040
share it but who knows you
00:13:56.079
know so in our project we have three
00:13:59.360
Global variables one to activate the
00:14:02.079
recapture and the others two are the
00:14:04.320
ones we get from the recapture admin
00:14:06.360
console this allows us that if we don't
00:14:09.240
have these values configured such as in
00:14:11.639
development it will not impact the rest
00:14:13.920
of the
00:14:14.880
application we C pass the recapture s
00:14:17.920
key value has a JavaScript variable
00:14:20.240
within our our web page view this value
00:14:23.800
is then used on the client side in
00:14:27.519
react where working in the react use we
00:14:31.199
collect the recat S ke I employ it to
00:14:34.720
dynamically load the script using the
00:14:36.839
user effect hook unlikely other scripts
00:14:40.199
that we typically include in a part of
00:14:43.399
the D react doesn't allows us to low
00:14:46.160
scripts that provide essential methods
00:14:48.440
and objects in this same way this is why
00:14:51.120
we Leverage The use effect hook to
00:14:54.160
initiate the loading of the recapture
00:14:56.519
SCP within our reac
00:14:59.800
compon once the user submit the form we
00:15:03.800
check the G token if if this is the
00:15:07.279
finite what mean which means that it's
00:15:10.000
going it that's going to be
00:15:12.480
configured and if if it is that we use
00:15:16.079
the execute method that is here the
00:15:20.160
execute method that is here and inside
00:15:23.199
the recapture function to create an
00:15:25.560
special token this is the token this
00:15:29.240
token is then sent along with all the
00:15:32.639
information that we have
00:15:34.680
here uh we send it to the server side to
00:15:37.759
be
00:15:40.880
verified server
00:15:42.920
side so okay on the server side or API
00:15:46.720
we call the form data in the controller
00:15:49.279
it check if is receive the G token
00:15:51.839
parameter if it did it goes to validate
00:15:54.839
the recapture and save or no the data
00:15:59.519
the validate recapture method involves
00:16:03.519
sending the token to the recapture
00:16:05.560
verification API which then assign in it
00:16:08.880
at score ranging from zero to one a
00:16:11.720
score of zero means it's a positive and
00:16:14.240
genuine interaction while a score of
00:16:17.120
zero strongly suggests it might be a bot
00:16:20.480
depending on this score our system take
00:16:22.959
appropriate actions that fits the
00:16:24.600
context of our website if there's an
00:16:27.920
issue with within recapture validation
00:16:31.120
over call sends a me a message to the
00:16:34.040
front indicating the problem in the
00:16:36.240
future it might be a good idea to
00:16:38.199
consider sending an email with more
00:16:40.639
specific information this will help us
00:16:43.399
to investigate if there is a potential
00:16:45.440
attack and take necessary actions to
00:16:48.000
protect our
00:16:49.839
website so we covered a lot about web
00:16:53.440
security and how recapture can change
00:16:55.720
the game for developers like us the have
00:16:58.639
discussed the significance of security
00:17:00.920
web applications and one key issue we
00:17:03.680
face is broken access controls as is
00:17:08.240
highlighted in the a of 10 so by inter
00:17:11.600
recapturing our project we are not only
00:17:13.880
protecting our system from both exploits
00:17:17.520
but also addressing is issues like
00:17:20.039
broken access control it validates that
00:17:23.079
the users interacting with your
00:17:25.000
application are humans ensuring that
00:17:27.480
sensitive areas remain secure this
00:17:30.880
reduces the risk of unauthorized access
00:17:33.640
and say War
00:17:35.880
users and in order to make the web and
00:17:38.559
safer place together I want to thank you
00:17:40.760
for your time
