Using WebComponents with Java on the Server-side - Sven Ruppert (Java Brown Bag series)

[Music] this work okay then welcome everyone to the first brown bag lunch after j focus conference so we'll be continuing doing this for a while and today we have with us sam rupert from jfrog please introduce yourself hello hello so my name is fen and i'm from germany and well i'm working for jfrock and now i'm doing one of the complex things i try to activate my stuff here my slides perfect so what you would see is that i'm doing it a little bit different i'm just using a mix on my site so if you're my guinea pigs i try this stuff out and well give me feedback if it works or not so you have to maximize the speaker view so i'm not sharing my screen in a classic way okay so well as i mentioned sven from germany i'm working for jay pro developer advocate focusing here in java quarterly and depth sega and we want to talk today a little bit about um web components for the java developer so i'm a i'm a good java developer since i don't know 1996 i start with java and never learn something different so i'm stuck for this one and on the other side from time to time i have the challenge to create graphically user interfaces what interfaces so and so for this i searched a long time and i found a possibility how we can go with new technologies especially with web components and use them on the server side but on the other side we will get some challenges here as well so i will focus on this one in the second part of this presentation say um because if we are more convenient we are grabbing more technologies together and more technology is grabbing together means that we are talking about not only vulnerabilities we are talking about polyglot vulnerabilities or polyglot environments with vulnerabilities and i want to show you a little bit how you can activate the stack use this stack and to harden the stack against non-vulnerabilities so this is the main focus if you have any question feel free to write it down in the chat or just ask me so we are not so many people so it's really up to you what's more comfortable for you on the other side um if you want to see a little bit more about me have a look on youtube since corvette i'm not traveling but i'm going to the forest and recording i.t stuff in the woods so what are we doing today we are talking about this web component stuff what i want to focus here is on the standard itself so what what is a web component what component is a mix of html5 css and javascript so it's a pure clone sound thing and what we want to get with this is that also or if you're looking back in the history so my first web app was i don't know 2004 2000 something in this and we had these frameworks like spots one and later we had something like tough street and wicked and all this and what they always try to do is as they want to map some some kind of server-side action to generate a web interface but on the other side there's web early days was a mixture of different technologies different companies want to push their property standards to the front end and want to get the biggest market share whatever and over the years different browsers different support of different standards technologies and all this it was just a pain to create web components or web apps that are fitting to all mobile or to all devices and then all the time we got mobile devices uh something like an ipad with big screen on a mobile interface with small screens and we wanted to have this web um web pages or web apps everywhere and the second thing is that more or less people wanted to have this feeling of a web app like a native app so it's going in this field of progressive web apps so there was a big move and over the years we we got something um that's called web components it's a standard it's um it's a definition or based on this um three technologies html5 css and javascript to define and capsule component and the biggest thing what they wanted to achieve here is that if you have a component library like in javafx or swing or whatever you can just grab different components and mix them together to new components so we're talking mostly about two streams with one stream the person that's creating a basic web component means creating a button creating a grid creating whatever and then we are talking about uh the consumer that want to build um compositions out of it so a screen with buttons and text fields and all that stuff but all this stuff is your client side so the web component itself they are just you can just activate it on on a hml page and then clicking on a button but then nothing is happening so if you want to have some selections here you have to connect it somehow and i'm focusing now on the path that want to have a server side so you have pros and cons going to your client side on your server side but with this approach what you could do is you can build a hybrid application so half client side and half server side it really depends on your needs and on the other side if you're a servicer developer you want to have it like like a java component so you know from javafx or swing if you want to have a button you just say new button and then you you want to see something so this is what what you want to have you want to have something like a breakpoint you want to debug you want to um yeah use your tools you know from the java so how we can connect if you want to have this one we need somehow this communication this communication between the web component and the server side representation and we have some frameworks that are doing this one because if you start doing all this communication by yourself it's quite pain in the ass because you have to deal with long pulling stuff with five walls with routers with uh connection disconnection and connection again and all this stuff so this is not a trivial thing and you want to make sure that the communication between the client side and the server side is a little bit secure so that you're not so easily can compromise it or if in the front and the button is disabled you want to make sure that on the server side is exactly the same or reverse so this communication is not easy but we have some frameworks how to communicate all this stuff or list the basic here is atmosphere framework and then we want to have the java side so if you're doing all this stuff by yourself it's a lot of work but there is something that you can use it's a basic um to to start with your work and we can divide it in three parts we have the pure web component with the communication layer and then we have this bundled version with the java component if you're talking about the java world maybe you want to do it with a test driven approach as well so it would be great if you can not only say new button and you have a button but it would be great if you are using this one energy unit 5 as well in the driver net 5 universe then we have two different ways so pure server side or full stack testing i will cover this in a few minutes a little bit but we have two versions with version of the web component and then we have a version of the javaside this doesn't it must not fit together basically you can provide it together but you have independent versioning if it's necessary so what can we do we have an open source framework on market that is doing more or less exactly what we need and this is called vadi sovardin is from this finnish company and the most stuff from them is open source what they have done in the past say they have built something based on gwt so the approach was more or less you have this java site then you're generating a huge thing and then you have this gwp front end it's more or less a virtual environment based on javascript in the client side and then they started communicating a bit but a few years ago they followed the standard and shifted from gwt to the web component stack because this is standard and all browsers are supporting it now so this was just a logical step to go through what they have done is they they created all components from scratch a button text field and all the stuff and first they build it as a pure web component so you can go to this website and say i i just want to have this button as a client-side version then you don't need to take the java site with you and then they wanted to have their old customers again because they are focusing on the java site and they build up this java environment so a driver for presentation so what they've done is exactly they split the whole they split it up the whole development between your client side the communication part and the java part the java part in vardin is called body flow and what they have is they have their own abstraction layers so if you are reading the documentation you don't see this so exactly so they they want to sell their own components together with the java back-end but if you are going a little bit inside this api you would see they have this abstraction layer and you can adapt it to other web components and here i'm showing you the example to do this one with sap five ui or this sap ui5 web component this was a test and it's running well so by the way i'm sharing the github coordinates from this project so that you can just take this one as an example and then try it out by yourself so what they have is they have this mapping based on the technical steps you need if you're going with web components so the web component world is managed in a similar way like the maven or the gradle world so you have something a package manager and this is npm in this case if you want to have a component what you need is an npm install grabbing the web component so that you have it on your local environment and then you can start using it like an import statement it's the same like in java if you want to have a class you have first this import statement then it can use it in your class when a webpage is more or less you have this import statement then you can use it in this page in this name space or whatever you want to say to it and the last thing is you're using actually this web component so in an html5 page you have this dedicated text so every web component will have its own tag and here you're using the own tag inside your hmls so if you want to map all the spaces to the java world you have to deal with exactly this three parts this npm install this import and the usage of the tags or mapping to a java class and for this if you are going to this butting flow framework you will find three annotations that are mapping exactly this life cycle and the first one is this npm package and you need the value the value is exactly what you need for the mpm install command it's something like the group an artifact id and mave and then you're grabbing this from out of the repository you have it locally in your local npm repository and then you need explicitly aversion so you can't deal with the latest tag or whatever so you really have to be at uh what is a component and the version so then you have a defined version available the stacks of what you closed can we say a life cycle grab this stuff from npm from the repositories and you have it locally the next is you need this javascript module something like an import statement it's an annotation as well and then you're just adding exactly what you would use as an import statement and this depends a little bit on the web components here on this srp05 you have this uh web component slash d slash badge.js it could be a little bit different from from different web components this is not clearly defined so they don't have always the same naming schema and then you have this tag and for this to define this one they have the annotation tag and then exactly the name with uh what you will find so if you are on webcomponents.org you will find all these informations on the website from the web components you can map it immediately what this looks like at a java class to activate this one on the java the first steps what you need here is just these three annotations so you say npm package grab this js module i want to have explicitly a mapping out of this collection of the components and here i'm grabbing the badge and it should represent the tag on the client side called your i5 badge so with this you have exactly these three steps and you have to extend your building class from component from the flow framework what you get with this is the whole life cycle grabbing stuff and mapping via a communication layer and in the back and in the background it's atmosphere the atmosphere framework and with this one we have the whole communication all this stuff done this is just a holder so but we have already a lot of stuff solved so what would be the next step if you want to map this one or if you want to deal now with actions and attributes and properties and all this stuff you will find inside the documentation of this web components for example something like this i have this web component url five batch and i have a property uh or um an attribute and then sometimes they are mixing and up so the difference between property and attribute is not always very clear so this is not nice but you have to fill it a little bit around so but you will find this definition here i have this color scheme it's a value one and then what you can do is you're just creating a getter and a setup for exactly this property and here you have to go over one indirection in this framework you're just creating inside your classes get on setter with the name you want to have so there is no explicit naming schema you must follow at this point so you can adopt your api or your um your requirements here with the naming schema and all this stuff and then internally you're going from this component to that element what they've done is they have this class component this is a graphical component but inside they have this element please don't ask me why they have done this one but they have this two different levels of abstraction component for basically is now the thing we want to put something around and then this generic element and from this element you have the methods like set property get property and all this stuff so this generic methods that are dealing with properties or attributes on an element and what you're doing is just property name property value that's it and then you're setting it so here we have for example this is one it could be an integer or whatever on the java side so make sure that if you're mapping this stuff think as early as possible about the possibility um how you want to deal with types in the in the front end it's more or less everything is some kind of text but uh what you can do here is you can say this color scheme is or you can map it for example what i've done here to enumeration because you have just the value from one to ten and then you are just using here an enumeration and make sure that your type save as early as possible on your own site so that's the only thing so with this we are able to grab the information from the client side already and uh setting stuff the same if you want to not only set the stuff if you want to get this stuff it's exactly the same way they're going to get element or we have so a presentation then instead of set property you say that property and here using the name that is defined inside this web component so um this is more or less everything if you're just dealing with attributes and if you're comparing what what is the amount of work what you have to do by yourself and what you will get with all this stuff it's amazing you're just creating a class extending from component adding three annotations that is just the stuff that you will find inside the documentation of the web component and then you can start with creating letters and setters but this is just the first level we want to reach the next one is if you have now this badge you want to create a composition of web components so if you talk thinking a little bit about these web components they build it because they want to have every web component isolated and independent so that you have something like label bricks you can put together and it should be exactly in the same way if you want to have complex attributes it should be component that's it so all this is done if i want to have complex components at this site then going here for example to this documentation from this ul5 badge you will see that inside the ui5 match you can have a child and this child is a ui five icon and this your five icon some attributes and all this stuff so how to do this one first of all you are just creating a class called ui5 icon you're adding three annotations extending from component and you're doing all this stuff with the properties you have and then with this one you can go now to your ui5 badge and creating get and setter methods for complex childs the only thing that is different is that instead of get element set property you're just saying get element append child there's one thing again i don't know why they have done it but this and child want to have an instance of element not an instance of component so you have to unwrap the complex child again so that i learned append child takes the instance of your component and call the method get element that's it now you have the possibility to build a tree of the components on the javascript and yeah that's more or less no it's up to you you can build trees trees trees tables whatever so everything's there um there's something with um actions for example a click listener on a button and other stuff but smallest going in the same way so if you are now able to activate actions betting properties setting properties building up complex trees of all this stuff what we achieved so far is that we can create now a jar inside this jar i'm wrapping all this stuff i'm pushing this to artifactory a maven repository or whatever and my colleague he never worked with web components can use this stuff like the following i want to have a new badge i say new url5 badge i'm setting text i'm setting color i'm grabbing an icon i'm setting an icon i'm whatever and finally i'm putting my stuff to the page i won't have it so um you can use a whole body flow environment for this one and you can use the basic documentation how to to deal with this one but you can map it completely to your own um web component universe so that's that's the basic work you have to do here any questions so far any questions yes i have a question this is thomas uh as i understand this you can create complex user interface by by combining these these components if i mean if if i have a user interface that has a lot of interdependencies between the ui components in such a way that if i make a selection in a drop down list i want the contents of another drop down list to change for instance can i do and i understand you can do that server side but can you do with client-side to reduce the ram chips yeah so if if this is something for you you can do it client-side then you have to deal with how to work on the web components and the web component must must be done what i'm not covering here is extension of what you can do with adding javascript libraries so what you could do is you can writing kotlin your stuff generate the javascript libraries out of it and adding them via annotation to the class so that they are available on the client side as well and then you have different approaches working on the web components itself adding some functionality and triggers on the server side well it it depends what exactly you want to achieve but the possibility is extending with javascript that you're annotating to classes and this indirectly to to the page the body flow page you can say in this page i have this javascript library and so on or you are just modifying the web components itself yeah this is a short version the long version would be a github repository with examples and then filling around so that's that's what i can say so far okay thank you okay um okay um yeah but one one thing is one one interesting aspect if you are talking about how to combine this stuff um if you are talking about um inheritance and delegation i just pushed on um on youtube it's already activated i i'm not sure if i if i push it out uh so far but i'm just um talking about the difference between inheritance and delegation here and then graphically user interfaces um what's really interesting to see is that if you're building this become this big compositions uh that it's sometimes even better if you're just connecting them by a tiny observer pattern or if you're just delegating in the composition instead of going over the inheritance because then you have really these tiny round trips that are just shifting around this this message itself and then the difference between doing a client side or having this round trip depends on the architecture and if you're going over mobile connections and so on sure that um you can build very responsive pure server-side applications so if if you need it but well other topic so um yeah what we what we reached so far is we have a jar my colleague as a java developer can just grab it and start writing this ui and with this ui i have now a few things i want to highlight one thing is what what have you done now we we have now from the from the java side uh this dependency but in under the hood i'm combining two different technologies so i'm talking immediately with my application with two package managers with two compository touch which is npm and with the maven world and what you should be aware of is whatever you're looking at your code you have this indirect view to the dependencies not only the dependencies but of the different technologies so you have to check for example not only the vulnerabilities of java you have to check the vulnerabilities of the mpm stack as well and so it's very convenient on one side that you are hiding technology on the other side um you should have it have an eye on this one what what you're adding indirectly and not only with the transitive dependencies in the java world but with the transitive dependencies that are going to different technologies so i we will have to look at this in a few minutes so the next thing is if you have now this java clause and i can say hey i have a new button new button and then go on your text field set text and so on i i have to deal somehow with um with oh here then you can see that um what you can do is that you that you will need or you need the ttd part so if i have it on the java side why not using the ttd part on the javascript as well why why should i use format testing a javascript tool for the web components then testing my javascript i can do it completely together testing web apps you have two different approaches here i'm showing the full approach means i'm testing the full web application so what everything means i have this web app maybe of the circular container ramping up the web app is running i need the browser i have the selenium on top or silly new heat i'm using and then you have this robot that is doing something with the browsers the browser's invoking the web app and all together needs a test definition so your j2.5 test environment and test runtime so this is quite heavy and um this there's a big thing so maybe you you don't want to test every time this full stack but for integration testing or for later testing or for a nightly test or whatever maybe this is a good approach and what you need here is just the representation now on the on the java side for the selenium part as well so in the end what we're doing is exactly the same so for web components i'm mapping this because it's a standard and i'm doing it then i can collect all these different web components but if i'm talking about selenium there are not so many different frameworks so say selenium is some kind of standard so i can focus on implementing against the selenium representation of components and they have done the same i will show you two different things the first one is it is a commercial thing this test bench but it's open source and it's perfect to learn what they have done here is they have this web component on the selenium side and they have this button element on the test bench side and they doing exactly the same stuff so they have this web thing they have this communication then they have the java representation but here it's not extending from um from component it's extending from testbench element so if if you don't want to spend the money you can use this open source framework to learn how they have done it because it's open source that's fine the main thing what you should do is exactly you're creating your ui5 switch or batch element extending from testbench element and then you're doing exactly the same set property get property and you have an element tag and it's exactly the same element name you're using for mapping the web component and with this you have now the java component for building the web app and you have the java component to run tests over selenium again this one if you want to have a full stack test that's a good thing yeah just just have in mind if you want you can go really the full stack here the only thing you have to deal inside this test i don't want to explain all this stuff here for this test but uh you have to deal with the life cycle you have to make this large i've done this and i had an overlay of 200 milliseconds ramping up surface container doing all this stuff if this is fast enough you can go with this which is too slow maybe you should have looked at caribou dsl um caribou dsl is a kotlin dsa is under mit license and it will give you a kotlin esl on top of the java model if you want but on the other side this caribou dsl there is a caribou dsl testing and there the approach is that you're just testing the java part and trust that the communication and the web component part is running well if this is enough because you just want to test your use cases then you can do the whole test which is kind of testing you're mocking the internals of bardin away and then you have this java in memory test so we're talking about nanoseconds instead of hundreds of thousands of milliseconds and then you can start creating tests against this category dslr testing so it really depends if you want to have a full second one you have something like this test bench if you want to have this your client a server-side one you can go with cardboard testing so what i showed here is for the testing part itself it's a good approach if you're doing it with a design pattern page object so testing ramping up the whole stack with test containers for example if you want to know more about it we can have a dedicated session about this which one maybe but you're ramping up the whole life cycle you have it in the java world and then you have the collection details like the address and all this stuff and with this you can ramp up the components and talking with selenium to your weapon so it's possible it's not so bad it's i like it so it really depends what what you need if you want to have a look at my prototype i've done here for this testing it's under the developer slp ui5 for flow i think it's there but just search for srp ui file for flow and then you will find it on my github repositories and you can use this one just as a base or yeah well just do it by yourself um one thing if you're talking about web components quite often we have the challenge that we have to deal with serialization and all this stuff and what i really recommend here is that you could go with security payloading against this one this approach you can use for the pure java side so just testing there again serialization issues but you can use the same stuff with um with a web component so pushing stuff to the web component check on the server side if something is going wrong and reverse so um what what you need for this one is more or less you need a repository where you're storing all these compromise binaries there are tools in the field that are able to generate compromised binaries for different technologies you can store them in generic repositories so that you have the security payload testing suite or this data suite inside artifactory in a generic repository that fits to your application version and what you're doing with j1.5 is you are just ramping up the sandbox you are doing this security payload injection checking if you have the compromised functionality snl throwing it away and using this one more or less to harden against typical um attack vectors from the web your world for this you have to deal with with jl network custom test engines it's available on the internet if you're interested in this so swan if you back up a little bit so do you have any important information because you were hiding part of the graphics uh with your overlay oh which one which one let me see exactly okay so let's just replace perfect thank you i know it's it's just compositor so what what you need is this bi-directional cycle to um you have a repository where you're grabbing the components and all that stuff you have a corresponding repository to grab the security payload stuff you're combining this one and make sure that the test result is caught as well in build information or whatever so if you're using artifactory pipelines for example you have to build information in dedicated repositories so that you have the full package of information so what's the binary what was the web app and what's the data information you have and yeah well that's more or less the point here so talking about this um security part is if you have that component and if i'm hiding all this stuff we're going to this cloud native thing we have these different architectures uh and and layers i don't want to go in detail to to this one for this i've dedicated that or i'm coming back or whatever but the basic idea is even with graphical user interfaces they're going this approach of microservices so a composition of micro uis to a big ui and this means you are thinking uh you're thinking more or less about a rewrite instead of a refactoring if you're going with this approach or you have a big apple technology thinking about refactoring that's the same but with these tiny approaches and was playing around with new technologies and combining different technologies you have this challenge that i'm a senior maybe in java but i'm not the senior go i'm not a senior in kotlin so even if i'm going to the kotlin world i have to learn again and then the tool stack and all this stuff so i have to learn again and this is a challenge we sometimes don't want to see but what i see definitely if i'm talking about web apps if i'm working from the application adding the linux layer it's runtime environment wrapping it in docker wrapping it in kubernetes samsung whatever and then pushing it out production so i'm as a developer i'm creating the source code if i'm able to minimize the amount of known vulnerabilities then this is not existing in all other layers so what we're more or less talking about is this shifting left i'm excluding the concept phase we have there some how to make this uh wizards and all this stuff per definition secure this is one thing but we are talking about the shift left thing so as early as possible and we as a developer if i'm writing this web application i'm in the first line and it would be nice if i have this one immediately so we have two different types of things that could be bad for us one is compliance just wrong license at the right place the other is the vulnerability and why imagining it here is i have no different technologies and single vulnerabilities are maybe not bad but i can combine them to different attack vectors over different technologies not only layers but over technologies and now i have this npm and javascript so how to get a view here the main thing is that if there's a vulnerability somewhere i have no idea how fast it will be found i have no influence until this is public and if this is public it needs some time until this information is consumable for me so this is time i can't speed up or i can just spend some money but after the time is consumable for me the time is running because this is time frame from i can now use this information up to this is changing production this is the time i really should focus on because this i have 100 in my hands and the main thing is that i need a good test coverage if i need a good test coverage and i have that web components mapped for example to the java site then i can use my tool stack with 0.5 to do exactly this testing because i have to change some versions and then i want to make sure that the behavior is the same so a good test coverage is not only good for quality is perfect against vulnerabilities as well because efficient dependency management is one of the low-hanging fruits here so the main thing is that we have to do it now over different technologies and if i want to do this as a developer it would be perfect if i can do it right now if i'm adding a dependency so i'm adding a javascript library i'm adding a web component i'm adding a dependency jakarta comes whatever but i will get this information as soon as possible not only the ci environment is complaining after day of coding so speeding this up if you have time i can show it in the ide as well but the main main idea is if i'm adding some dependencies and if i'm adding by mentioning because with with this connecting to web components i have a lot of stuff that is in the field of serialization and serialization itself is a critical thing in java so if you are talking about the jackson family or whatever we have some some vulnerabilities more or less constantly in this dependency so i should have an eye on it and then i should change versions so that i'm minimizing the amount of vulnerabilities because i have to deal with this anyway with this freak here with the freight here you have the possibility to get this x-ray this scanner that is working against factory and this information is available inside your ide as well so with the id plug-in you can say i'm adding bardin for example please give me the list of known vulnerabilities of all transitive dependencies and this is a huge thing because if you are just talking about adding one dependency and if you're checking the body independently it's a huge thing i'm not complaining that this is bad but it's just a big framework and with a good architecture you have a lot of fine grain dependencies and this is more or less something you're not managing by yourself it's a human so um we have some time i don't know if it is exactly until one o'clock or if the q and a included until one o'clock if we have some time i can show them the id how it works for you how to harden the body stick please do okay so we have a few more minutes but uh i don't know if we have any other questions oh you take a see if somebody has a question otherwise i think you could uh okay show a short demo go for it yeah so i have i have on github this example i'm using as a as a free tier testing environment so where's the street here the street here you can just register um i will share the link or i have it somewhere and with this what you could do is you can have a defector in x-ray and if you're talking about different technologies it's good if you're grabbing this one and if we are talking about docker images with artifactory you have this unlimited frequency you can just grab docker images so you're not running in this limitations because this assignment so this is the repository i'm using here what i've done here is just i've just a java project and i've just added a few dependencies and just a stupid surface so no fancy table nothing it's just to train how to deal with this dependencies and with this how to harden this stuff so okay i here this is uh sven youtube it is when youtube that's a direct link to the free tier if you want to have this one so what what you will get you will get a maven um project and here i'm connecting to my um 3ta instance so it's exactly a pretty instance you will get the same and then you're just adding your your name here so then what what's your chosen server name during the participation process so what what we're doing is um we're heading at some point so what is what is what it is management yeah so at some point wedding dependencies i don't want to go to all this because it's more or less a workshop i don't know what's the next workshop i think in two weeks one week i don't know we can share the date but then you can have it as a workshop if you are interested so um we are adding this uh dependency and immediately if i'm getting mr penny and this is the only dependency plus the j unit if i'm checking now what is what is a transitive dependency tree here it's huge you can zoom in you can do it by yourself but it's huge and this is just by adding one single dependency okay and even here you will see that you have overlapping versions and all this stuff it's just a huge thing so can you see it better so okay so i just want to show the the amount of dependencies we have and if you're going back you see this big network so this you are just not checking by yourself manual definitely so i'm i'm adding now this depends here and if you have this jeffree back in to give this one it's just uh yep it's just plugins and then you're searching for jfrog and jfrog then you have this plugin it's for free you can install it and then you're adding here your credentials from a test environment and that's it so now we have the possibility to push the definitions from from the pawn it's another two towards a um x-ray instance adding this dependency here okay so i think this dependency means i'm adding a lot of transitive dependencies if you're re-reading the dependency tree then you will get here something like this one you have here so sven i would like to do an experiment so could you instead of using your current solution if is it easy for you to try to share your screen instead i want to see if it's your setup that makes the resolution bad or if it's just your internet connection okay let's see i'm switching here's a monitor let's see and then i will start if it's if it's not too hard for you to try that oh no no no no it's so um i think i need to get them and go okay do we have it the classic way of sharing the screen okay i hope it's better i will take some i will take some screenshots and share them with you so you can see the difference yeah sure perfect okay so what i have here is i have this um the pencil and what i will get is here this plugin and this plugin will give me the the whole tree and the corresponding tree so what i see here is that the bardeen i i just took an older version but you can just change it to a new one or whatever and beware i don't want to blame the body framework i just want to show they are vulnerabilities and they're working on it just just mention it so i have here this writing call inside this fighting core i have maybe the server dependency inside the server dependency i see oh yeah i have some things and for sure the most frame but if they are dealing with jackson or whatever they have some kind of vulnerabilities in if you're dealing with sterilization so if i want to get rid of this one i can go now to i don't know guava or whatever i want to have here so data binding i don't know what's called i'm just called it sounds good so if i want to exclude this one and what i see here if i'm clicking here on this depends here i see that there is a fixed version already available so i have to change now the dependency models what i need is right click and say yeah exclude dependency it's now going to the upper level that will give me this transitive dependency we'll do a con exclusion and what i'm doing here is just grabbing this one adding it explicit giving it back and what was the version i don't know it was 130 no and then adding version version 1 13. so we're reading the information grabbing this stuff analyzing and so on what could happen here at this stage it could happen that there is a vulnerability a and there is a fix in the version whatever you are adding this version and then in this version there are new but different vulnerabilities so it could be that you're hopping one or two times until it's really done it is not always the latest version that is the best one sometimes it makes sense to go one or two three versions back which because then there is not this vulnerability not existing and then you need a good test coverage to make sure that even if you are switching up or down with a version the functionality you are using from this dependency is just the same sorry test driven development is just your best friend if you are going to the field of security so what we have here now we are just i think you can sit down i have now explicitly this codec i'm now going here to this writing call and i see this concordic stuff is not available anymore and now i'm going just step by step through this one i can just go here and say okay i want to have some full 3 change or i'm going to the latest one and changing this one if you want to have a longer example ingredient step by step until it's done um on youtube i have this video in my death checkouts playlist about how to harden the bar in framework and they'll show ex all the steps until it's done but i think the basic idea is more or less shown analyzing the dependencies and doing it and yeah and all package managers that are managed by artifactory can be scanned by x-ray and that means if you have different technologies in your project then you can go over the scan of different technologies inside your ide or inside the web ui whatever so you can have it for free in the free tier just try it and uh yeah any questions support because now my chat window is far away ah yeah okay are you on your way of wrapping up unless more or less if there are no questions we're trying to uh trying to keep the time a little bit so i think we should go over to questions if we have one and then i will uh stop the recording thank you very much

Channel: Jfokus

Views: 84

Keywords:

Id: J6LQ_sHcxok

Length: 50min 20sec (3020 seconds)

Published: Mon May 31 2021